以梦为马,不负韶华

搜索
查看: 59|回复: 8
收起左侧

在线CAD(WEB CAD)如何二次开发常用的CAD编辑功能

[复制链接]
 楼主| 发表于 2024-7-10 08:50:24 显示全部楼层 |阅读模式
本帖最后由 lihao2014 于 2024-6-27 09:05 编辑

前言

网页CAD中常见的修改和编辑命令有很多,例如移动、复制、缩放、旋转、镜像、剪切、延伸、阵列、修改和编辑,这些命令可以帮助用户对绘图进行修改、调整和优化,提高工作效率和设计质量。mxcad 根据该需求提供了相应接口和方法,实现了CAD中常见的修改和编辑命令。这些操作中涉及到对点、向量、矩阵、角度等的计算,具体规则可参考 [指南-数学库],也可前往在线DEMO查看具体效果。

删除

我们可以通过调用实体的[erase()]方法删除作图过程中的图线和多余的图线,参考代码如下:
  1. import { MxCADUtility, McObjectId } from "mxcad"
  2. const objIds = MxCADUtility.getCurrentSelect()
  3. objIds.forEach((objId: McObjectId) => {
  4.   objId.erase()
  5. })
复制代码

效果示例如下:
1.png

2.png

复制

我们可以通过调用实体的 [clone()]方法复制多个对象,也可对一个或多个对象进行多次复制。在复制完成后可点击复制实体移动到目标位置,参考代码如下:
  1. import { MxCADUtility, McDbEntity, McObjectId, MxCpp } from "mxcad"
  2. const objIds = MxCADUtility.getCurrentSelect()
  3. objIds.forEach((objId: McObjectId) => {
  4.     const event = objId.getMcDbEntity()
  5.     if (!event) return;
  6.     const event_clone = event.clone() as McDbEntity
  7.     MxCpp.getCurrentMxCAD().drawEntity(event_clone)
  8. })
复制代码

此外,我们还可以调用实体的 [transformBy()]方法复制对象,该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击 [McGeMatrix3d-clone()]查看矩形变换详细方法和属性,参考代码如下:
  1. import { MxCADUtility, McDbEntity, McObjectId,  MxCpp} from "mxcad"
  2. const objIds = MxCADUtility.getCurrentSelect()
  3. objIds.forEach((objId: McObjectId) => {
  4.     const event = objId.getMcDbEntity()
  5.     if (!event) return;
  6.     const event_clone = event.clone() as McDbEntity
  7.     const matrix = new McGeMatrix3d()
  8.     matrix.clone()
  9.     event_clone.transformBy(matrix)
  10.     MxCpp.getCurrentMxCAD().drawEntity(event_clone)
  11. })
复制代码

效果示例如下:
3.png

4.png

镜像

我们可以通过调用实体的 [mirror()]方法将指定的对象按指定的参考线作镜像处理,代码如下:
  1. import { MxCADUtility, McObjectId,McGeMatrix3d, MxCADUiPrPoint } from "mxcad"
  2. async function Mx_test_mirror(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt1 = new MxCADUiPrPoint()
  5.     getPt1.setMessage("指定镜像参考线的开始点")
  6.     const pt1 = await getPt1.go()
  7.     if(!pt1) return
  8.     const getPt2 = new MxCADUiPrPoint()
  9.     getPt2.setMessage("指定镜像参考线的结束点")
  10.     const pt2 = await getPt2.go()
  11.     if(!pt2) return
  12.     objIds.forEach((objId: McObjectId) => {
  13.         const event = objId.getMcDbEntity()
  14.         if(!event) return
  15.         event.mirror(pt1, pt2)
  16.     })
  17. }
复制代码

此外,我们还可以调用实体的 transformBy() 方法镜像处理对象。该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击[McGeMatrix3d-setMirror()]查看矩形变换详细方法和属性,参考代码如下:
  1. import { MxCADUtility, McObjectId,McGeMatrix3d, MxCADUiPrPoint } from "mxcad"
  2. async function Mx_test_mirror(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt1 = new MxCADUiPrPoint()
  5.     getPt1.setMessage("指定镜像参考线的开始点")
  6.     const pt1 = await getPt1.go()
  7.     if(!pt1) return
  8.     const getPt2 = new MxCADUiPrPoint()
  9.     getPt2.setMessage("指定镜像参考线的结束点")
  10.     const pt2 = await getPt2.go()
  11.     if(!pt2) return
  12.     objIds.forEach((objId: McObjectId) => {
  13.         const event = objId.getMcDbEntity()
  14.         if(!event) return
  15.         const matrix = new McGeMatrix3d()
  16.         matrix.setMirror(pt1,pt2)
  17.         event.transformBy(matrix)
  18.     })
  19. }
复制代码

效果示例如下:
5.png

6.png

移动

我们可以通过调用实体的[move()],  方法移动目标对象,该移动方法只是变更对象的原始位置,并不复制对象,参考代码如下:
  1. import { MxCADUtility, McGePoint3d, McObjectId } from "mxcad"
  2. const objIds = MxCADUtility.getCurrentSelect()
  3. const pt1= new McGePoint3d(0,0,0)
  4. const pt2 = new McGePoint3d(100,100,0)
  5. objIds.forEach((objId: McObjectId) => {
  6.     objId.getMcDbEntity()?.move(pt1, pt2)
  7. })
复制代码

此外,我们还可以调用实体的 transformBy() 方法移动对象。该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击 [McGeMatrix3d-setToTranslation()] 查看矩形变换详细方法和属性,参考代码如下:
  1. import { MxCADUtility, McGePoint3d, McObjectId } from "mxcad"
  2. const objIds = MxCADUtility.getCurrentSelect()
  3. const pt1= new McGePoint3d(0,0,0)
  4. const pt2 = new McGePoint3d(100,100,0)
  5. objIds.forEach((objId: McObjectId) => {
  6.     const event = objId.getMcDbEntity()
  7.     if(!event) return
  8.     const matrix = new McGeMatrix3d()
  9.     const v = pt2.sub(pt1)
  10.     matrix.setToTranslation(v)
  11.     event.transformBy(matrix)
  12. })
复制代码

效果示例如下:
7.png

8.png

旋转

我们可以通过调用实体的 [rotate()]方法将所选对象绕指定基点旋转指定角度,参考代码如下:
  1. import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
  2. async function Mx_test_rotate(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt1 = new MxCADUiPrPoint()
  5.     getPt1.setMessage("指定旋转基点")
  6.     const pt1 = await getPt1.go()
  7.     if(!pt1) return
  8.     const getPt2 = new MxCADUiPrPoint()
  9.     getPt2.setMessage("指定旋转角度")
  10.     getPt2.setUserDraw((pt,pw)=>{
  11.         const line = new McDbLine(pt1.x,pt1.y,pt1.z,pt.x,pt.y,pt.z)
  12.         pw.drawMcDbEntity(line)
  13.         objIds.forEach((objId: McObjectId) => {
  14.             const event = objId.getMcDbEntity()?.clone() as McDbEntity
  15.             if(!event) return
  16.             // 旋转角度
  17.             const dRotationAngle = pt1.sub(pt).angleTo2(McGeVector3d.kXAxis, McGeVector3d.kZAxis);
  18.             event.rotate(pt1, dRotationAngle)
  19.             pw.drawMcDbEntity(event)
  20.         })
  21.     })
  22.     const pt2 = await getPt2.go()
  23.     if(!pt2) return
  24.     objIds.forEach((objId: McObjectId) => {
  25.         const event = objId.getMcDbEntity()
  26.         if(!event) return
  27.         const dRotationAngle = pt1.sub(pt2).angleTo2(McGeVector3d.kXAxis, McGeVector3d.kZAxis);
  28.         event.rotate(pt1, dRotationAngle)
  29.     })
  30. }
复制代码

此外,我们还可以调用实体的 transformBy() 方法旋转对象。该方法是通过变换矩阵实现图形的旋转,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击 [McGeMatrix3d-setToTranslation()]查看矩形变换详细方法和属性,参考代码如下:
  1. import { MxCADUtility, MxCADUiPrPoint, McGeMatrix3d, McObjectId } from "mxcad"
  2. async function Mx_test_rotate(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt1 = new MxCADUiPrPoint()
  5.     getPt1.setMessage("指定旋转中心点")
  6.     const pt1 = await getPt1.go()
  7.     if(!pt1) return
  8.     objIds.forEach((objId: McObjectId) => {
  9.         const event = objId.getMcDbEntity()
  10.         if(!event) return
  11.         // 以pt1为中心点 绕z轴 旋转45度
  12.         const matrix = new McGeMatrix3d()
  13.         matrix.setToRotation(Math.PI / 4, McGeVector3d.kZAxis, pt1)
  14.         event.transformBy(matrix)
  15.     })
  16. }
复制代码

效果示例如下:
9.png

10.png


偏移

我们可以通过调用实体的[offsetCurves()]方法将直线、圆、多线段等作同心复制,相当于平行移动一段距离后进行复制,参考代码如下:
  1. import { MxCADResbuf, MxCADUtility, MxCpp } from "mxcad"
  2. async function Mx_test_offset(){
  3.     const filter = new MxCADResbuf();
  4.     filter.AddMcDbEntityTypes("LINE") ;
  5.     const objIds = MxCADUtility.getCurrentSelect(filter)
  6.     const getPt1 = new MxCADUiPrPoint()
  7.     getPt1.setMessage("指定偏移点")
  8.     const pt1 = await getPt1.go()
  9.     if(!pt1) return
  10.     objIds.forEach((objId: McObjectId) => {
  11.         const event = objId.getMcDbEntity() ;
  12.        let objArr = (event as McDbLine).offsetCurves(100,pt1)
  13.        if (objArr.length() === 0) return;
  14.        objArr.forEach(obj=>{
  15.         MxCpp.getCurrentMxCAD().drawEntity(obj as McDbEntity)
  16.        })
  17.     })
  18. }
复制代码

效果示例如下:
11.png

12.png

缩放

我们可以通过调用实体的 [scaleEntity]方法对图形进行自由缩放,参考代码如下:
  1. import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
  2. async function Mx_test_scale(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt = new MxCADUiPrPoint()
  5.     getPt.setMessage("指定缩放基点")
  6.     const pt = await getPt.go()
  7.     if(!pt) return
  8.     objIds.forEach((objId: McObjectId) => {
  9.         const event = objId.getMcDbEntity()
  10.         if(!event) return
  11.          event.scaleEntity(pt,0.2)
  12.     })
  13. }
复制代码

此外,我们还可以调用实体的 transformBy() 方法缩放对象。该方法是通过变换矩阵实现图形的缩放,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击 [McGeMatrix3d-setToScaling()]查看矩形变换详细方法和属性,参考代码如下:
  1. import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
  2. async function Mx_test_scale(){
  3.     const objIds = MxCADUtility.getCurrentSelect()
  4.     const getPt = new MxCADUiPrPoint()
  5.     getPt.setMessage("指定缩放中心点")
  6.     const pt = await getPt.go()
  7.     if(!pt) return
  8.     objIds.forEach((objId: McObjectId) => {
  9.         const event = objId.getMcDbEntity()
  10.         if(!event) return
  11.         const matrix = new McGeMatrix3d()
  12.         matrix.setToScaling(0.2, pt)
  13.         event.transformBy(matrix)
  14.     })
  15. }
复制代码

效果示例如下:
13.png

14.png

[发帖际遇]: lihao2014 屌丝逆袭成功,获得白富美女神垂青,赚了 2 个 韶华币. 幸运榜 / 衰神榜
发表于 2024-7-11 00:38:52 显示全部楼层
谢谢分享,学习一下
[发帖际遇]: sky216 成功加入五毛党,回帖一个奖励 5 个 韶华币. 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

发表于 2024-7-12 10:21:16 显示全部楼层

以梦为马,江湖再见
[发帖际遇]: zhuhonl 成功获得红包 4 个 韶华币. 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

发表于 2024-7-15 10:12:16 显示全部楼层
以梦为马,江湖再见
[发帖际遇]: bkqcycyqm 屌丝逆袭成功,获得白富美女神垂青,赚了 1 个 韶华币. 幸运榜 / 衰神榜
回复 支持 反对

使用道具 举报

不想打字就选择快捷回复吧
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|以梦为马,不负韶华

GMT+8, 2025-2-11 09:25

Powered by 以梦为马,不负韶华

© 2024-2099 Meng.Horse

快速回复 返回顶部 返回列表