AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2024-07-03 266
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
注册配置 MSE Nacos/ZooKeeper，118元/月
Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月
性能测试 PTS，5000VUM额度
简介： ```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

文章标签：
JavaScript
关键词：
JavaScript功能
JavaScript网页
JavaScript vue
JavaScript预览
网页JavaScript
游客uqb2obj6pe7ry
目录
相关文章
Star时光
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页：从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页：从基础到实践
Star时光
93 1
疯狂的猿
|
23天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
24 2
2的n次方_
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式（行内、内部、外部）和基础语法，包括变量、数据类型、运算符、数组、函数和对象等内容。同时，文章还详细讲解了 jQuery 的基本语法和常用方法，如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等，以及如何插入和删除元素。通过示例代码和图解，帮助读者更好地理解和应用这些知识。
2的n次方_
19 1
【JavaScript】网页交互的灵魂舞者
想飞的雪糕
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
想飞的雪糕
51 1
mao29955
|
2月前
|
JavaScript 前端开发 API
除了 Vue.js，还有哪些框架可以实现全屏显示功能？
【10月更文挑战第7天】
mao29955
24 1
疯狂的猿
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图，默认左侧是页面主要内容，minimap.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果，可以点击并快速定位到页面的某个位置。简单实用，欢迎下载！
疯狂的猿
31 0
邹荣乐
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
vue前端开发中，通过vue.config.js配置和nginx配置，实现多个入口文件的实现方法
邹荣乐
163 0
邹荣乐
|
2月前
|
JavaScript
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
深入解析：JS与Vue中事件委托（事件代理）的高效实现方法
邹荣乐
45 0
游客zi3qmblbcdexu
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
游客zi3qmblbcdexu
26 0
神明木佑
|
2月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
神明木佑
34 0

云原生

热门文章

最新文章

  • 1
    Docker CE 镜像源站
  • 2
    Minikube - Kubernetes本地实验环境
  • 3
    利用Zipkin对Spring Cloud应用进行服务追踪分析
  • 4
    利用Helm简化Kubernetes应用部署
  • 5
    在阿里云容器服务上开发基于Docker的Spring Cloud微服务应用
  • 6
    Kafka、RabbitMQ、RocketMQ 消息中间件的对比 | 消息发送性能篇
  • 7
    通义灵码最全使用指南，一键收藏，新用户领取见面礼
  • 8
    阿里巴巴的云原生应用开源探索与实践
  • 9
    并发模式与 RPS 模式之争，性能压测领域的星球大战
  • 10
    AI开发者福音！国内首个基于NGC的GPU优化容器已在阿里云正式推出
  • 1
    【Azure Developer】分享一段Python代码调用Graph API创建用户的示例
    10
  • 2
    要统计Nginx的客户端IP，可以通过分析Nginx的访问日志文件来实现
    14
  • 3
    为什么选择CMS制作网站？
    16
  • 4
    【Azure ADLS】为Azure Data Lake Storage的Container赋予了操作权限后创建子文件夹遇见403报错
    25
  • 5
    test工具的使用，你知道多少？
    8
  • 6
    如何建设一个网站？
    16
  • 7
    函数计算 FC 诚邀您参加【Cloud Up 挑战赛】赢取丰厚奖品！
    14
  • 8
    智保未来：国泰产险的 AI 网关革新之旅
    17
  • 9
    一行代码都不改，Golang 应用链路指标日志全知道！
    19
  • 10
    使用Nginx搭建流媒体服务器
    37

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月