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

CAD画图

前言

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


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

选择图形编辑功能

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

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

复制代码

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

获取当前选择的图形:

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

复制代码

MxCADSelectionSet

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

1. import { MxCADSelectionSet, MxCADResbuf, MxCADUiPrPoint } from "mxcad"
   
2. const ss = new MxCADSelectionSet();
   
3. //选择所有图形元素
   
4. ss.allSelect();
   
5. ss.forEach(()=> {
   
6.     let ent = id.getMcDbEntity();
   
7.     if (!ent) return;
   
8.     console.log(ent)
   
9. })
   
10. 
    
11. const filter = new MxCADResbuf();
    
12. // 添加对象类型，选择集只选择文字类型的对象
    
13. filter.AddMcDbEntityTypes("TEXT,MTEXT");
    
14. ss.allSelect(filter);
    
15. // 第一种方式获取对象id集合
    
16. ss.getIds()
    
17. // 第二种方式获取对象id集合
    
18. ss.forEach((id)=> {
    
19.     let ent = id.getMcDbEntity();
    
20.     if (!ent) return;
    
21.     console.log(ent)
    
22. })
    
23. 
    
24. // 通过单个点选择
    
25. const getPoint = new MxCADUiPrPoint()
    
26. getPoint.go((point)=> {
    
27.     if(!point) return;
    
28.     // 加filter过滤选择集, 这里只会选择文字对象
    
29.     const index = ss.pointSelect(point.x, point.y, filter)
    
30.     const objId = ss.item(index)
    
31.     const ent = objId.getMcDbEntity()
    
32.     console.log(ent)
    
33. })
    
34. 
    
35. // 通过鼠标选择多个对象
    
36. // 加filter过滤选择集, 这里只会选择文字对象
    
37. ss.userSelect("框选需要的对象", filter).then((is)=> {
    
38.     if(is) {
    
39.         // 得到框选的两个选择点
    
40.         const { pt1, pt2 } =  ss.getSelectPoint()
    
41.         ss.getIds()
    
42.         ss.forEach((id)=> {
    
43.             let ent = id.getMcDbEntity();
    
44.             if (!ent) return;
    
45.             console.log(ent)
    
46.         })
    
47.     }
    
48. })

复制代码

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

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

复制代码

选择编辑事件:

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

复制代码

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

1. import { McCmColor, McObjectId, MxCpp, createMxCad } from "mxcad"
   
2. import { MxFun } from "mxdraw"
   
3. window.onload = async () => {
   
4.     const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
   
5.     MxFun.setIniset({
   
6.         // 启动夹点编辑功能, 开启单选图形(mxcad默认开启)
   
7.         "EnableGripEidt": true,
   
8.         // 开启多选
   
9.         "multipleSelect": true
   
10.     })
    
11.     await createMxCad({
    
12.         canvas: "#mxcad",
    
13.         locateFile: (fileName) => {
    
14.             return new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
    
15.         },
    
16.         fileUrl: new URL("../public/test2.mxweb", import.meta.url).href,
    
17.         fontspath: new URL("../node_modules/mxcad/dist/fonts", import.meta.url).href,
    
18.     })
    
19.     let oldColors: (McCmColor | undefined)[] =  []
    
20.     let oldIds: McObjectId[] = []
    
21.     MxCpp.getCurrentMxCAD().on("selectChange", (ids: McObjectId[])=> {
    
22.         // 还原颜色
    
23.         oldIds.forEach((id, index)=> {
    
24.             const color = oldColors[index]
    
25.             const ent = id.getMcDbEntity()
    
26.             if(!ent) return
    
27.             if(color) ent.trueColor = color
    
28.         })
    
29.         // 选中更改颜色
    
30.         oldColors = ids.map((id)=> {
    
31.             const ent = id.getMcDbEntity()
    
32.             if(!ent) return
    
33.             const color =  ent.trueColor.clone()
    
34.             ent.trueColor = new McCmColor(255, 0, 0)
    
35.             return color
    
36.         })
    
37.         oldIds = ids
    
38.     })
    
39. }

复制代码

效果图如下:


本文提供的源码下载地址:
https://gitee.com/mxcadx/mxdraw-article/tree/master/mxcad选择图形编辑/demo.zip

半支烟·

谢谢楼主分享

F4R3LL7

谢谢分享

复仇云

感谢分享