Web cad（私有云CAD SDK）中实现插入图块的方法

MxDraw

前言

CAD制图的过程中会有很多重复的图元需要绘制，为了节约绘制时间，我们会把部分图元保存成图块，下次就可以快速和多次的插入到相应的图纸位置中，提高绘图效率，在线CAD功能demo：https://demo.mxdraw3d.com:3000/mxcad/

网页版CAD页面中要实现插入图块功能，首先需要将这个图块dwg文件转换成mxweb文件，我们需要下载MxDraw云图开发包,根据入门文档的操作, 实现dwg文件到mxweb文件的转换, 让它支持在页面中显示。

下载试用包之后，我们按下图所示将dwg文件转成mxweb文件:

更多关于图纸转换程序的使用说明可以参考入门文档或者mxcad文档-图纸转换

有了mxweb文件,就可以通过mxcad npm包实现插入图块功能。

注意：无论是图纸还是图块 最终转换后都是mxweb文件。

在阅读了mxcad文档-快速入门后, 你可以自己按照步骤去实现页面加载mxweb文件显示图纸，也可以直接下载或者参考我们提供的示例源码

实现插入图块功能

我们就基于示例源码中vite目录这个由vite打包工具使用mxcad的初始化示例项目为例 来开始实现一个插入图纸的功能，代码如下:

1. import { createMxCad } from "mxcad"
   
2. 
   
3. (async ()=> {
   
4. 
   
5.     const mxcad = await createMxCad({
   
6. 
   
7.         canvas: "#myCanvas",
   
8. 
   
9.         locateFile: (fileName) => {
   
10. 
    
11.             return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
    
12. 
    
13.         },
    
14. 
    
15.         fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
    
16. 
    
17.         fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
    
18. 
    
19.     })
    
20. 
    
21. 
    
22. 
    
23.     // 这里用定时器是保证稳定的测试, 正常来说是在需要的时候调用就好
    
24. 
    
25.     setTimeout(async () => {
    
26. 
    
27.         // 加载图块转换的mxweb文件
    
28. 
    
29.         let blkrecId = await mxcad.insertBlock(new URL("../public/tree.mxweb", import.meta.url).href, "tree");
    
30. 
    
31. 
    
32. 
    
33.         // id是否有效
    
34. 
    
35.         if (!blkrecId.isValid()) {
    
36. 
    
37.             return;
    
38. 
    
39.         }
    
40. 
    
41.         // 实例化一个块
    
42. 
    
43.         let blkRef = new McDbBlockReference();
    
44. 
    
45.         // 将加载的图块ID赋值给它
    
46. 
    
47.         blkRef.blockTableRecordId = blkrecId;
    
48. 
    
49.         // 然后计算一下这个块的包围盒
    
50. 
    
51.         let box = blkRef.getBoundingBox();
    
52. 
    
53.         if (box.ret) {
    
54. 
    
55.             let dLen = box.maxPt.distanceTo(box.minPt);
    
56. 
    
57.             // 如果图块包围盒特别小
    
58. 
    
59.             if (dLen > 0.00001) {
    
60. 
    
61.                 // 则需要放大
    
62. 
    
63.                 blkRef.setScale(mxcad.getMxDrawObject().screenCoordLong2Doc(100) / dLen);
    
64. 
    
65.             }
    
66. 
    
67.         }
    
68. 
    
69. 
    
70. 
    
71.         // 这里开始做用户交互
    
72. 
    
73.         let getPoint = new MxCADUiPrPoint();
    
74. 
    
75.         getPoint.setMessage("\指定插入基点");
    
76. 
    
77. 
    
78. 
    
79.         // 动态绘制这个图块
    
80. 
    
81.         getPoint.setUserDraw((v, worldDraw) => {
    
82. 
    
83.             blkRef.position = v;
    
84. 
    
85.             worldDraw.drawMcDbEntity(blkRef);
    
86. 
    
87.         });
    
88. 
    
89. 
    
90. 
    
91.         // 用户鼠标点击时得到位置
    
92. 
    
93.         let pt = await getPoint.go();
    
94. 
    
95.         if (!pt) return;
    
96. 
    
97.         blkRef.position = pt;
    
98. 
    
99.         // 绘制这个图块
    
100. 
     
101.         mxcad.drawEntity(blkRef);
     
102. 
     
103.     }, 1000)
     
104. 
     
105. })()

复制代码

效果如下图：

这样我们就完成了图块的插入。

DEMO源码:

https://gitee.com/mxcadx/mxdraw-article/tree/master/插入图块功能/demo.zip