在线CAD（H5网页CAD SDK）实现阵列功能

lihao2014

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

环境搭建
首先按照 mxcad入门文档 创建环境，如下图：

基于mxcad库实现阵列功能
阵列功能是按一定规律对某个或多个图形组合进行复制偏移，生成出新的图形组合，在实现它之前我们要确保已经用mxcad库在页面中显示了一个cad图纸，
然后我们用鼠标点击一个或者多个图形, 就可以选中它们，选中后执行以下代码:

1. <font size="3">const rowNum = Number(prompt("输入行数"))
   
2. const colNum = Number(prompt("输入列数"))
   
3. if (isNaN(rowNum) || isNaN(colNum)) return
   
4. 
   
5. alert("点击画布两点之间的距离作为偏移量")
   
6. let offset = await MxCADUtility.getCorner("输入偏移距离");
   
7. if (!offset) return
   
8. let dColOffset = offset.pt2.x - offset.pt1.x;
   
9. let dRowOffset = offset.pt2.y - offset.pt1.y;
   
10. 
    
11. // 得到选中的图形
    
12. let aryId = await MxCADUtility.userSelect("选择陈列对象");
    
13. // 得到这些图形的包围盒
    
14. let ext = MxCADUtility.getMcDbEntitysBoundingBox(aryId);
    
15. if (!ext) return;
    
16. 
    
17. let cenPt = new McGePoint3d();
    
18. 
    
19. if (dColOffset > 0)
    
20.     cenPt.x = ext.minPt.x;
    
21. else
    
22.     cenPt.x = ext.maxPt.x;
    
23. 
    
24. if (dRowOffset > 0)
    
25.     cenPt.y = ext.minPt.y;
    
26. else
    
27.     cenPt.y = ext.maxPt.y;
    
28. // 角度
    
29. let dAng = Number(prompt("输入角度"));
    
30. if (isNaN(dAng)) return
    
31. let matRot = new McGeMatrix3d().setToRotation(dAng * Math.PI / 180.0, McGeVector3d.kZAxis, cenPt);
    
32. 
    
33. // 循环渲染
    
34. let iMaxNum = 50000;
    
35. let iCount = 0;
    
36. for (let i = 0; i < rowNum; i++) {
    
37.     // 行 平移矩阵
    
38.     let yOffsetVec = new McGeVector3d(0.0, dRowOffset * i, 0.0);
    
39.     let offsetMatY = new McGeMatrix3d().setToTranslation(yOffsetVec);
    
40. 
    
41.     for (let j = 0; j < colNum; j++) {
    
42.         if (i == 0 && j == 0)
    
43.             continue;
    
44.         // 列 平移矩阵
    
45.         let xOffsetVec = new McGeVector3d(dColOffset * j, 0.0, 0.0);
    
46.         let ofssetMatX = new McGeMatrix3d().setToTranslation(xOffsetVec);
    
47. 
    
48.         let vecOffset = new McGePoint3d(cenPt.x, cenPt.y, cenPt.z);
    
49.         // 应用对应矩阵
    
50.         vecOffset.transformBy(offsetMatY);
    
51.         vecOffset.transformBy(ofssetMatX);
    
52.         vecOffset.transformBy(matRot);
    
53. 
    
54.         // 最终的变换矩阵
    
55.         let tmpMat = new McGeMatrix3d().setToTranslation(new McGeVector3d(vecOffset.x - cenPt.x, vecOffset.y - cenPt.y, vecOffset.z - cenPt.z));
    
56.         for (let m = 0; m < aryId.length; m++) {
    
57.             let tmp = aryId[m].clone() as McDbEntity
    
58.             if (!tmp) {
    
59.                 continue;
    
60.             }
    
61.             // 将该变换矩阵应用在图形对象上
    
62.             tmp.TransformBy(tmpMat);
    
63.             MxCpp.GetCurrentMxCAD().DrawEntity(tmp);
    
64.             iCount++;
    
65.             if (iCount > iMaxNum) {
    
66.                 alert("超出最大阵列对象个数" + iMaxNum + "限制. \n");
    
67.                 return;
    
68.             }
    
69.         }
    
70.     }
    
71. }</font>

复制代码

代码中主要让用户输入一些行列数和偏移距离以及角度值, 然后得到选中图形, 得到其包围盒,并计算出变换矩阵, 复制这些对象然后绘制在画布，效果如下图:



对于需要自己二次开发cad相关功能, 可以参考:
mxcad入门: https://mxcadx.gitee.io/mxcad_docs/zh/
mxcad API文档 :https://mxcadx.gitee.io/mxcad_docs/api/README.html
DEMO源码：https://gitee.com/mxcadx/mxdraw-article/tree/master/%E5%AE%9E%E7%8E%B0%E9%98%B5%E5%88%97%E5%8A%9F%E8%83%BD

liangyj99736

学习制图了，谢谢楼主分享

liangda6

wmm598

太好了呀，真的是的啊，哈哈