UG爱好者

标题: 网页CAD中选择图形进行编辑（WEB CAD SDK） [打印本页]
作者: CAD画图    时间: 2024-1-3 09:48
标题: 网页CAD中选择图形进行编辑（WEB CAD SDK）
前言

在网页修改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. })

  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. })

  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. })

  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[])=> {})

  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

作者: 半支烟·    时间: 2024-1-3 13:51

谢谢楼主分享
作者: F4R3LL7    时间: 2024-1-8 14:17
谢谢分享
作者: 复仇云    时间: 2024-3-22 13:18
感谢分享



欢迎光临 UG爱好者 (https://www.ugsnx.com/) Powered by Discuz! X3.2