找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 462|回复: 1

[分享] 在线CAD(H5网页CAD SDK)实现阵列功能

[复制链接]
发表于 2023-11-29 09:52:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
本帖最后由 ywl0224 于 2023-11-29 09:54 编辑

前言
在线CAD SDK的集成过程中,甲方客户可能有阵列功能的需求,作为开发者如何利用WEB CAD SDK展现此功能效果呢?本章节我们重点讲述一下。
首先看一下在线CAD的DEMO:https://demo.mxdraw3d.com:3000/mxcad/,阵列功能如下图:
1.png


环境搭建
首先按照mxcad入门文档创建环境,如下图:
2.png


基于mxcad库实现阵列功能
阵列功能是按一定规律对某个或多个图形组合进行复制偏移,生成出新的图形组合,在实现它之前我们要确保已经用mxcad库在页面中显示了一个cad图纸然后我们用鼠标点击一个或者多个图形, 就可以选中它们选中后执行以下代码:
const rowNum = Number(prompt("输入行数"))
const colNum = Number(prompt("输入列数"))
if (isNaN(rowNum) || isNaN(colNum)) return
alert("点击画布两点之间的距离作为偏移量")
let offset = await MxCADUtility.getCorner("输入偏移距离");
if (!offset) return
let dColOffset = offset.pt2.x - offset.pt1.x;
let dRowOffset = offset.pt2.y - offset.pt1.y;
// 得到选中的图形
let aryId = await MxCADUtility.userSelect("选择陈列对象");
// 得到这些图形的包围盒
let ext = MxCADUtility.getMcDbEntitysBoundingBox(aryId);
if (!ext) return;
let cenPt = new McGePoint3d();
if (dColOffset > 0)
    cenPt.x = ext.minPt.x;
else
    cenPt.x = ext.maxPt.x;
if (dRowOffset > 0)
    cenPt.y = ext.minPt.y;
else
    cenPt.y = ext.maxPt.y;
// 角度
let dAng = Number(prompt("输入角度"));
if (isNaN(dAng)) return
let matRot = new McGeMatrix3d().setToRotation(dAng * Math.PI / 180.0, McGeVector3d.kZAxis, cenPt);
// 循环渲染
let iMaxNum = 50000;
let iCount = 0;
for (let i = 0; i < rowNum; i++) {
    // 行 平移矩阵
    let yOffsetVec = new McGeVector3d(0.0, dRowOffset * i, 0.0);
    let offsetMatY = new McGeMatrix3d().setToTranslation(yOffsetVec);
    for (let j = 0; j < colNum; j++) {
        if (i == 0 && j == 0)
            continue;
        // 列 平移矩阵
        let xOffsetVec = new McGeVector3d(dColOffset * j, 0.0, 0.0);
        let ofssetMatX = new McGeMatrix3d().setToTranslation(xOffsetVec);
        let vecOffset = new McGePoint3d(cenPt.x, cenPt.y, cenPt.z);
        // 应用对应矩阵
        vecOffset.transformBy(offsetMatY);
        vecOffset.transformBy(ofssetMatX);
        vecOffset.transformBy(matRot);
        // 最终的变换矩阵
        let tmpMat = new McGeMatrix3d().setToTranslation(new McGeVector3d(vecOffset.x - cenPt.x, vecOffset.y - cenPt.y, vecOffset.z - cenPt.z));
        for (let m = 0; m < aryId.length; m++) {
            let tmp = aryId[m].clone() as McDbEntity
            if (!tmp) {
                continue;
            }
            // 将该变换矩阵应用在图形对象上
            tmp.TransformBy(tmpMat);
            MxCpp.GetCurrentMxCAD().DrawEntity(tmp);
            iCount++;
            if (iCount > iMaxNum) {
                alert("超出最大阵列对象个数" + iMaxNum + "限制. \n");
                return;
            }
        }
    }
}
代码中主要让用户输入一些行列数和偏移距离以及角度值, 然后得到选中图形, 得到其包围盒,并计算出变换矩阵, 复制这些对象然后绘制在画布,效果如下:
3.png
4.png
5.png

对于需要自己二次开发cad相关功能, 可以参考:

DEMO源码:

论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!

已领礼包: 226个

财富等级: 日进斗金

发表于 2023-12-4 08:05:00 | 显示全部楼层
谢谢分享!!!!!
论坛插件加载方法
发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;
如果你在论坛求助问题,并且已经从坛友或者管理的回复中解决了问题,请把帖子标题加上【已解决】;
如何回报帮助你解决问题的坛友,一个好办法就是给对方加【D豆】,加分不会扣除自己的积分,做一个热心并受欢迎的人!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|申请友链|Archiver|手机版|小黑屋|辽公网安备|晓东CAD家园 ( 辽ICP备15016793号 )

GMT+8, 2024-11-23 22:46 , Processed in 0.248884 second(s), 32 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表