网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能

本文涉及的产品
Serverless 应用引擎 SAE,800核*时 1600GiB*时
性能测试 PTS,5000VUM额度
云原生网关 MSE Higress,422元/月
简介: ```markdown# CAD网页编程概览- 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。- `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。- `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。- `move()`和`transformBy(setToTranslation)`实现移动功能。- `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。```

前言

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

删除

我们可以通过调用实体的[erase()]方法删除作图过程中的图线和多余的图线,参考代码如下:

import { MxCADUtility, McObjectId } from "mxcad"
const objIds = MxCADUtility.getCurrentSelect()
objIds.forEach((objId: McObjectId) => {
    objId.erase()
})

效果示例如下:
image-7274.png
image-20240621095201843.png

复制

我们可以通过调用实体的 clone() 方法复制多个对象,也可对一个或多个对象进行多次复制。在复制完成后可点击复制实体移动到目标位置,参考代码如下:

import { MxCADUtility, McDbEntity, McObjectId, MxCpp } from "mxcad"
const objIds = MxCADUtility.getCurrentSelect()
objIds.forEach((objId: McObjectId) => {
    const event = objId.getMcDbEntity()
    if (!event) return;
    const event_clone = event.clone() as McDbEntity
    MxCpp.getCurrentMxCAD().drawEntity(event_clone)
})

此外,我们还可以调用实体的[transformBy()]方法复制对象,该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击[McGeMatrix3d-clone()]查看矩形变换详细方法和属性,参考代码如下:

import { MxCADUtility, McDbEntity, McObjectId,  MxCpp} from "mxcad"
const objIds = MxCADUtility.getCurrentSelect()
objIds.forEach((objId: McObjectId) => {
    const event = objId.getMcDbEntity()
    if (!event) return;
    const event_clone = event.clone() as McDbEntity
    const matrix = new McGeMatrix3d()
    matrix.clone()
    event_clone.transformBy(matrix)
    MxCpp.getCurrentMxCAD().drawEntity(event_clone)
})

效果示例如下:
image-20240621095922868.png
image-20240621100043704.png

镜像

我们可以通过调用实体的 mirror() 方法将指定的对象按指定的参考线作镜像处理,代码如下:

import { MxCADUtility, McObjectId,McGeMatrix3d, MxCADUiPrPoint } from "mxcad"
async function Mx_test_mirror(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt1 = new MxCADUiPrPoint()
    getPt1.setMessage("指定镜像参考线的开始点")
    const pt1 = await getPt1.go()
    if(!pt1) return
    const getPt2 = new MxCADUiPrPoint()
    getPt2.setMessage("指定镜像参考线的结束点")
    const pt2 = await getPt2.go()
    if(!pt2) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
        event.mirror(pt1, pt2)
    })
}

此外,我们还可以调用实体的transformBy()方法镜像处理对象。该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击[McGeMatrix3d-setMirror()]查看矩形变换详细方法和属性,参考代码如下:

import { MxCADUtility, McObjectId,McGeMatrix3d, MxCADUiPrPoint } from "mxcad"
async function Mx_test_mirror(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt1 = new MxCADUiPrPoint()
    getPt1.setMessage("指定镜像参考线的开始点")
    const pt1 = await getPt1.go()
    if(!pt1) return
    const getPt2 = new MxCADUiPrPoint()
    getPt2.setMessage("指定镜像参考线的结束点")
    const pt2 = await getPt2.go()
    if(!pt2) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
        const matrix = new McGeMatrix3d()
        matrix.setMirror(pt1,pt2)
        event.transformBy(matrix)
    })
}

效果示例如下:
image-20240621100901368.png
image-20240621101159826.png

移动

我们可以通过调用实体的[move()]方法移动目标对象,该移动方法只是变更对象的原始位置,并不复制对象,参考代码如下:

import { MxCADUtility, McGePoint3d, McObjectId } from "mxcad"
const objIds = MxCADUtility.getCurrentSelect()
const pt1= new McGePoint3d(0,0,0)
const pt2 = new McGePoint3d(100,100,0)
objIds.forEach((objId: McObjectId) => {
    objId.getMcDbEntity()?.move(pt1, pt2)
})

此外,我们还可以调用实体的transformBy()方法移动对象。该方法是通过变换矩阵实现图形的编辑,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击[McGeMatrix3d-setToTranslation()]查看矩形变换详细方法和属性,参考代码如下:

import { MxCADUtility, McGePoint3d, McObjectId } from "mxcad"
const objIds = MxCADUtility.getCurrentSelect()
const pt1= new McGePoint3d(0,0,0)
const pt2 = new McGePoint3d(100,100,0)
objIds.forEach((objId: McObjectId) => {
    const event = objId.getMcDbEntity()
    if(!event) return
    const matrix = new McGeMatrix3d()
    const v = pt2.sub(pt1)
    matrix.setToTranslation(v)
    event.transformBy(matrix)
})

效果示例如下:
image-20240621103019962.png
image-20240621103056583.png

旋转

我们可以通过调用实体的[rotate()]方法将所选对象绕指定基点旋转指定角度,参考代码如下:

import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
async function Mx_test_rotate(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt1 = new MxCADUiPrPoint()
    getPt1.setMessage("指定旋转基点")
    const pt1 = await getPt1.go()
    if(!pt1) return
    const getPt2 = new MxCADUiPrPoint()
    getPt2.setMessage("指定旋转角度")
    getPt2.setUserDraw((pt,pw)=>{
        const line = new McDbLine(pt1.x,pt1.y,pt1.z,pt.x,pt.y,pt.z)
        pw.drawMcDbEntity(line)
        objIds.forEach((objId: McObjectId) => {
            const event = objId.getMcDbEntity()?.clone() as McDbEntity
            if(!event) return
            // 旋转角度
            const dRotationAngle = pt1.sub(pt).angleTo2(McGeVector3d.kXAxis, McGeVector3d.kZAxis);
            event.rotate(pt1, dRotationAngle)
            pw.drawMcDbEntity(event)
        })
    })
    const pt2 = await getPt2.go()
    if(!pt2) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
        const dRotationAngle = pt1.sub(pt2).angleTo2(McGeVector3d.kXAxis, McGeVector3d.kZAxis);
        event.rotate(pt1, dRotationAngle)
    })
}

此外,我们还可以调用实体的 transformBy() 方法旋转对象,该方法是通过变换矩阵实现图形的旋转,具体矩阵变换原理可参考指南数学库中的矩阵-mcgematrix3d,点击[McGeMatrix3d-setToTranslation()]查看矩形变换详细方法和属性,参考代码如下:

import { MxCADUtility, MxCADUiPrPoint, McGeMatrix3d, McObjectId } from "mxcad"
async function Mx_test_rotate(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt1 = new MxCADUiPrPoint()
    getPt1.setMessage("指定旋转中心点")
    const pt1 = await getPt1.go()
    if(!pt1) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
        // 以pt1为中心点 绕z轴 旋转45度
        const matrix = new McGeMatrix3d()
        matrix.setToRotation(Math.PI / 4, McGeVector3d.kZAxis, pt1)
        event.transformBy(matrix)
    })
}

效果示例如下:
image-20240621104258903.png
image-20240621104348458.png

偏移

我们可以通过调用实体的[offsetCurves()]方法将直线、圆、多线段等作同心复制,相当于平行移动一段距离后进行复制,参考代码如下:

import { MxCADResbuf, MxCADUtility, MxCpp } from "mxcad"
async function Mx_test_offset(){
    const filter = new MxCADResbuf();
    filter.AddMcDbEntityTypes("LINE") ;
    const objIds = MxCADUtility.getCurrentSelect(filter)
    const getPt1 = new MxCADUiPrPoint()
    getPt1.setMessage("指定偏移点")
    const pt1 = await getPt1.go()
    if(!pt1) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity() ;
       let objArr = (event as McDbLine).offsetCurves(100,pt1)
       if (objArr.length() === 0) return;
       objArr.forEach(obj=>{
        MxCpp.getCurrentMxCAD().drawEntity(obj as McDbEntity)
       })
    })
}

效果示例如下:
image-20240621104733460.png
image-20240621104849568.png

缩放

我们可以通过调用实体的[scaleEntity]方法对图形进行自由缩放,参考代码如下:

import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
async function Mx_test_scale(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt = new MxCADUiPrPoint()
    getPt.setMessage("指定缩放基点")
    const pt = await getPt.go()
    if(!pt) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
         event.scaleEntity(pt,0.2)
    })
}

此外,我们还可以调用实体的 transformBy() 方法缩放对象。该方法是通过变换矩阵实现图形的缩放,具体矩阵变换原理可参考[指南数学库中的矩阵-mcgematrix3d],点击[McGeMatrix3d-setToScaling()]查看矩形变换详细方法和属性,参考代码如下:

import { MxCADUtility, MxCADUiPrPoint } from "mxcad"
async function Mx_test_scale(){
    const objIds = MxCADUtility.getCurrentSelect()
    const getPt = new MxCADUiPrPoint()
    getPt.setMessage("指定缩放中心点")
    const pt = await getPt.go()
    if(!pt) return
    objIds.forEach((objId: McObjectId) => {
        const event = objId.getMcDbEntity()
        if(!event) return
        const matrix = new McGeMatrix3d()
        matrix.setToScaling(0.2, pt)
        event.transformBy(matrix)
    })
}

效果示例如下:
image-20240621105517340.png
image-20240621105600990.png

相关文章
|
11天前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
19 0
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
10 1
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
11天前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
30 3
|
11天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
4天前
|
JavaScript
【vue】 vue2 | js 实现数字滚动效果
【vue】 vue2 | js 实现数字滚动效果
8 0
|
4天前
|
JavaScript 前端开发
【vue】 网站动态背景 | vanta.js的使用
【vue】 网站动态背景 | vanta.js的使用
10 0
|
9天前
|
JavaScript
JS【实战】跨域的网页链接跳转
JS【实战】跨域的网页链接跳转
6 0
|
9天前
|
JavaScript API
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
|
10天前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
11 0

热门文章

最新文章

  • 1
    @SneakyThrows 是 Lombok 库中的一个注解
    3
  • 2
    在会议系统工程中,Python可以用于多种任务,如网络请求(用于视频会议的连接和会议数据的传输)、数据分析(用于分析会议参与者的行为或会议效果)等。
    9
  • 3
    在可视会议系统工程中,系统工程方法可以帮助我们系统地规划、设计和实现一个高效、可靠的可视会议系统。
    10
  • 4
    我们可以从系统工程的角度来讨论如何优化组织架构,并给出一些可能涉及的Python应用领域的示例。
    7
  • 5
    在环境治理领域,污染治理系统工程旨在通过系统的方法来解决环境污染问题。这通常包括污染源的识别、污染物的监测、治理技术的选择、治理效果的评估等多个环节。
    13
  • 6
    我将提供一个简化的Python代码示例和详解,以展示如何使用Python和Django框架来构建智能化小区综合物业管理系统的一部分功能。
    8
  • 7
    在系统工程中,软件测试是一个至关重要的环节,它确保软件的质量、可靠性和性能。软件测试通常包括多个阶段,如单元测试、集成测试、系统测试和验收测试等。
    14
  • 8
    在软件部署阶段,系统工程的目标是确保软件能够顺利、稳定地部署到目标环境中,并满足用户的需求。
    11
  • 9
    航空航天领域,系统工程被用于设计复杂的飞行器和系统。这包括飞行器的结构、推进系统、控制系统等。
    12
  • 10
    在通讯系统工程中,这通常包括硬件、软件、网络协议、数据传输等多个方面的设计和实现。
    9