网页CAD中选择图形进行编辑（WEB CAD SDK）

MxDraw

前言

在网页修改DWG，经常会有对图形进行编辑以及对图形的夹点进行编辑的需求，MxCAD提供的在线版CAD提供了这样的功能，效果如下：

测试地址：https://demo.mxdraw3d.com:3000/mxcad/

选择图形编辑功能

mxcad在默认配置下是开启了选择图形的编辑功能, 我们可以通过mxdraw提供的MxFun.setIniset实现各种初始化配置, 配置参数参考iniConfig，代码如下：

1. import { MxFun } from "mxdraw"
   
2. 
   
3. MxFun.setIniset({
   
4. 
   
5.     // 启动夹点编辑功能, 开启单选图形(mxcad默认开启)
   
6. 
   
7.     "EnableGripEidt": true,
   
8. 
   
9.     // 开启多选
   
10. 
    
11.     "multipleSelect": true
    
12. 
    
13. })

复制代码

通过如上设置, 我们就可以通过鼠标对应的图形进行编辑和选择。

获取当前选择的图形:

1. import { MxCpp, MxCADUtility, McObjectId, McObjectIdType } from "mxcad"
   
2. 
   
3. // 需要等待createMxCad完成创建控件后才能得到
   
4. 
   
5. const objIds = MxCADUtility.getCurrentSelect()
   
6. 
   
7. objIds.forEach((objId: McObjectId)=> {
   
8. 
   
9.     if(objId.type === McObjectIdType.kMxCAD) {
   
10. 
    
11.         console.log("CAD图形对象", objId.getMcDbEntity())
    
12. 
    
13.     }
    
14. 
    
15.     if(objId.type === McObjectIdType.kMxDraw) {
    
16. 
    
17.         console.log("绘图对象", objId.getMxDbEntity())
    
18. 
    
19.     }
    
20. 
    
21. })

复制代码

MxCADSelectionSet

我们也可以通过MxCADSelectionSet进行选择:

1. import { MxCADSelectionSet, MxCADResbuf, MxCADUiPrPoint } from "mxcad"
   
2. 
   
3. const ss = new MxCADSelectionSet();
   
4. 
   
5. //选择所有图形元素
   
6. 
   
7. ss.allSelect();
   
8. 
   
9. ss.forEach(()=> {
   
10. 
    
11.     let ent = id.getMcDbEntity();
    
12. 
    
13.     if (!ent) return;
    
14. 
    
15.     console.log(ent)
    
16. 
    
17. })
    
18. 
    
19. 
    
20. 
    
21. const filter = new MxCADResbuf();
    
22. 
    
23. // 添加对象类型，选择集只选择文字类型的对象
    
24. 
    
25. filter.AddMcDbEntityTypes("TEXT,MTEXT");
    
26. 
    
27. ss.allSelect(filter);
    
28. 
    
29. // 第一种方式获取对象id集合
    
30. 
    
31. ss.getIds()
    
32. 
    
33. // 第二种方式获取对象id集合
    
34. 
    
35. ss.forEach((id)=> {
    
36. 
    
37.     let ent = id.getMcDbEntity();
    
38. 
    
39.     if (!ent) return;
    
40. 
    
41.     console.log(ent)
    
42. 
    
43. })
    
44. 
    
45. 
    
46. 
    
47. // 通过单个点选择
    
48. 
    
49. const getPoint = new MxCADUiPrPoint()
    
50. 
    
51. getPoint.go((point)=> {
    
52. 
    
53.     if(!point) return;
    
54. 
    
55.     // 加filter过滤选择集, 这里只会选择文字对象
    
56. 
    
57.     const index = ss.pointSelect(point.x, point.y, filter)
    
58. 
    
59.     const objId = ss.item(index)
    
60. 
    
61.     const ent = objId.getMcDbEntity()
    
62. 
    
63.     console.log(ent)
    
64. 
    
65. })
    
66. 
    
67. 
    
68. 
    
69. // 通过鼠标选择多个对象
    
70. 
    
71. // 加filter过滤选择集, 这里只会选择文字对象
    
72. 
    
73. ss.userSelect("框选需要的对象", filter).then((is)=> {
    
74. 
    
75.     if(is) {
    
76. 
    
77.         // 得到框选的两个选择点
    
78. 
    
79.         const { pt1, pt2 } =  ss.getSelectPoint()
    
80. 
    
81.         ss.getIds()
    
82. 
    
83.         ss.forEach((id)=> {
    
84. 
    
85.             let ent = id.getMcDbEntity();
    
86. 
    
87.             if (!ent) return;
    
88. 
    
89.             console.log(ent)
    
90. 
    
91.         })
    
92. 
    
93.     }
    
94. 
    
95. })
    
96. 
    

复制代码

还可以手动将图形对象ID添加到当前选择中:

1. import { McApp } from "mxcad"
   
2. 
   
3. let mxcad = MxCpp.getCurrentMxCAD();
   
4. 
   
5. let id = mxcad.drawLine(0,0,1000,1000);
   
6. 
   
7. mxcad.addCurrentSelect(id);

复制代码

选择编辑事件:

1. import { MxCpp } from "mxcad"
   
2. 
   
3. // 当图形被当前选中时会触发`selectChange`事件并回调当前已选中的id对象列表
   
4. 
   
5. MxCpp.getCurrentMxCAD().on("selectChange", (ids: McObjectId[])=> {})
   
6. 
   
7. 
   
8. 
   
9. // 当我们点击某个CAD图形并对其进行编辑或者夹点拖动后, mxdraw会触发`databaseModify`事件表示该图纸已被修改, 并且该事件只会触发一次
   
10. 
    
11. const mxdraw = MxCpp.getCurrentMxCAD().getMxDrawObject()
    
12. 
    
13. mxdraw.on("databaseModify", ()=> {
    
14. 
    
15.     console.log("图纸被修改")
    
16. 
    
17. })

复制代码

下面是一个将选中的图形颜色变成红色的完整代码示例, 可以根据如下代码理解图形的选择:

1. import { McCmColor, McObjectId, MxCpp, createMxCad } from "mxcad"
   
2. 
   
3. import { MxFun } from "mxdraw"
   
4. 
   
5. window.onload = async () => {
   
6. 
   
7.     const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
   
8. 
   
9.     MxFun.setIniset({
   
10. 
    
11.         // 启动夹点编辑功能, 开启单选图形(mxcad默认开启)
    
12. 
    
13.         "EnableGripEidt": true,
    
14. 
    
15.         // 开启多选
    
16. 
    
17.         "multipleSelect": true
    
18. 
    
19.     })
    
20. 
    
21.     await createMxCad({
    
22. 
    
23.         canvas: "#mxcad",
    
24. 
    
25.         locateFile: (fileName) => {
    
26. 
    
27.             return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
    
28. 
    
29.         },
    
30. 
    
31.         fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
    
32. 
    
33.         fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
    
34. 
    
35.     })
    
36. 
    
37.     let oldColors: (McCmColor | undefined)[] =  []
    
38. 
    
39.     let oldIds: McObjectId[] = []
    
40. 
    
41.     MxCpp.getCurrentMxCAD().on("selectChange", (ids: McObjectId[])=> {
    
42. 
    
43.         // 还原颜色
    
44. 
    
45.         oldIds.forEach((id, index)=> {
    
46. 
    
47.             const color = oldColors[index]
    
48. 
    
49.             const ent = id.getMcDbEntity()
    
50. 
    
51.             if(!ent) return
    
52. 
    
53.             if(color) ent.trueColor = color
    
54. 
    
55.         })
    
56. 
    
57.         // 选中更改颜色
    
58. 
    
59.         oldColors = ids.map((id)=> {
    
60. 
    
61.             const ent = id.getMcDbEntity()
    
62. 
    
63.             if(!ent) return
    
64. 
    
65.             const color =  ent.trueColor.clone()
    
66. 
    
67.             ent.trueColor = new McCmColor(255, 0, 0)
    
68. 
    
69.             return color
    
70. 
    
71.         })
    
72. 
    
73.         oldIds = ids
    
74. 
    
75.     })
    
76. 
    
77. }

复制代码

效果图如下:

本文源码下载地址:

https://gitee.com/mxcadx/mxdraw-article/tree/master/mxcad选择图形编辑/demo.zip