QQ登录

只需一步,快速开始

快捷登录

登录 或者 注册 请先

UG爱好者

查看: 655|回复: 1
打印 上一主题 下一主题

[图文教程] 在线CAD(web cad sdk)前端直接获取修改转换后的图纸数据

[复制链接]

中尉

Rank: 5Rank: 5

299

主题

319

帖子

3984

积分

活跃会员

跳转到指定楼层
楼主
发表于 2023-11-1 10:13:38 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
前言

有用户集成网页CAD之后,需要提取图纸的各种信息和数据,下面我们讲一下Web版CAD如何在前端直接提取修改和转换后的图纸信息,没有集成过在线CAD的小伙伴可以先看一下快速入门

在mxcad中转换后的图纸(.mxweb格式的文件)可以通过mxcad npm包得到图纸的各种数据,如图层、文字样式、图块、以及图形对象中的数据等等,我们经常需要拿到这些数据并对它们进行修改,然后在显示的图纸上应用这些修改后的数据。

Mxcad在线CAD提供了数据库,专门用于处理这些数据的增删改查,当转换的图纸打开后, 就会存在这个打开图纸的数据库,我们可以从数据库中得到想要并修改想要的数据。

如何打开图纸请参考:
https://mxcadx.gitee.io/mxcad_docs/zh/1.%E6%8C%87%E5%8D%97/1.%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.html


在线CAD功能测试:https://demo.mxdraw3d.com:3000/mxcad/


数据如何获取和修改

以图层数据为例,代码如下:
  1. <font size="3">import { McCmColor, MxCpp, createMxCad } from "mxcad"
  2. // 获取当前的控件
  3. const mxcad = MxCpp.App.getCurrentMxCAD();
  4. // 得到数据库中的图层表
  5. const layerTable = mxcad.getDatabase().getLayerTable();
  6. //  得到所有图层的ID对象
  7. const aryId = layerTable.getAllRecordId();

  8. const layers = aryId.map((id) => {
  9. // 得到对应ID的图层数据对象   
  10. let layerRec = id.getMcDbLayerTableRecord();
  11. if (layerRec === null) return;
  12. return layerRec
  13. })
  14. // 设置第一个图层的颜色
  15. const layer = layers[0]
  16. if (!layer) returnconst
  17. color = new McCmColor()
  18. color.setRGB(255, 0, 0)
  19. layer.color = color
  20. // 更新显示就可以发现图纸0层上的所有选择了颜色随层的图形都变成了红色mxcad.updateDisplay()</font>
复制代码

从上述代码中可以得出:
1.图层数据对象由图层ID对象得到;
2.ID对象可以访问到其对应的数据对象;
3.数据库存在各种表, 可以从表中得到存储的数据ID和数据对象;
4.数据对象可以访问属性和调用各种方法来设置或修改该数据。

该代码实现效果

1.改变图层颜色前:


2.改变图层颜色后:


其中 getDatabase 返回的是McDbDatabase的实例, 可以查看到获取表的方法和对应的表实例说明, 其他表的数据修改和图层表类似,可根据文档自行实现数据增删改查。

在API文档中我们可以看到数据库中存在各种方法,其中有getJson和setJson ,顾名思义就是JSON的序列化和反序列化方法。

而实际上, 只要是继承了 McRxObject基类的都存在对应的序列化方法。如图形类McDbEntity的基类McDbObject就继承了McRxObject基类, 所以每一个图形对象都是可以序列化的。同样的每一个图形对象, 都可以通过对象ID来得到图形的数据对象, 修改这些数据对象上的属性,显示渲染的图形也会根据数据的变化而变化。

举个例子, 我们选中一个图形然后修改它的颜色, 代码如下:
  1. <font size="3">import { MxCADUiPrEntity, MxCpp } from "mxcad"
  2. // 得到当前控件
  3. const mxcad = MxCpp.App.getCurrentMxCAD();
  4. // 实例化一个mxcad提供的通过鼠标点击获得图形对象ID的类
  5. let getEnt = new MxCADUiPrEntity();
  6. const selectEntity = async ()=> {
  7.     let id = await getEnt.go();
  8.     // 通过ID对象得到图形数据对象
  9.     let ent = id.getMcDbEntity();
  10.     if(ent) {
  11.         const color = ent.trueColor.clone()
  12.         color.setRGB(255, 0, 0)
  13.         ent.trueColor = color
  14.         mxcad.updateDisplay()
  15.     }
  16.     selectEntity()
  17. }
  18. setTimeout(()=> {
  19.     selectEntity()
  20. }, 1000)</font>
复制代码

图形数据对象

前面说图形数据对象, 可以修改图形属性,那么什么才算是一个图形数据对象呢?

首先mxcad中的数据对象: 继承了McDbObject的类实例,都是数据库的数据对象。

而图形数据对象就是继承了McDbEntity的类实例。我们只需要操作这些数据对象,就可以修改这张图纸的所对应的信息。例如McDbLayerTableRecord一个图层数据对象, 和McDbLayerTable一个图层表数据对象, 图层表中存储图层数据,自然可以对表中整体数据进行增删改查,而可以针对某个图层数据对象的属性进行修改。

对图层的增删改查示例代码如下:
  1. <font size="3">import { McCmColor, MxCpp, McDbLayerTableRecord, McDb } from "mxcad"
  2. // 得到当前控件
  3. const mxcad = MxCpp.App.getCurrentMxCAD();
  4. // 实例化一个图层数据对象并设置这个图层的一些属性
  5. const layer = new McDbLayerTableRecord()
  6. layer.color = new McCmColor(0, 0, 0)
  7. layer.isFrozen = true
  8. layer.isLocked = true
  9. layer.isOff = true
  10. layer.lineWeight = McDb.LineWeight.kLnWt018
  11. layer.name = "testLayer1"
  12. // 拿到当前控件的数据库图层表
  13. const layerTable = mxcad.getDatabase().getLayerTable();
  14. // 将图层数据对象添加到图层表中会得到一个标识该图层数据的对象ID
  15. const objId = layerTable.add(layer)
  16. // 我们可以通过图层表的JSON序列化和反序列化来整体的增删改查一些图层
  17. const layerJsonString = layerTable.getJson()
  18. const layerJson = JSON.parse(layerJsonString)
  19. // 这里我们只要保留以下几个名称的图层
  20. const  keepLayerNames = ["0", "排水", "testLayer1"]
  21. const keepLayers = layerJson.filter((layerJsonObj)=> {
  22.     return keepLayerNames.includes(layerJsonObj.name)
  23. })
  24. const keepLayersJsonString = JSON.stringify(keepLayers)
  25. layerTable.setJson(keepLayersJsonString)
  26. // 最后我们可以通过has方法检查图层是否存在 get方法传入图层名来得到对应的对象ID
  27. console.log("图层0是否存在", layerTable.has("0"))
  28. console.log("图层0的对象ID", layerTable.get("0"))</font>
复制代码

McDbLinetypeTable线型表、McDbTextStyleTable文字样式表、McDbBlockTableRecord图块表等等,它们和图层表的使用方式大同小异,这里不一样举例, 可以直接点击对应名称详细了解。

演示Demo源码:
https://gitee.com/mxcadx/mxdraw-article/blob/master/前端直接获取得到转换后的图纸各种数据/demo.zip



有奖推广贴子: 

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

 
 
QQ:1359218528
工作时间:
9:00-17:00
 
微信公众号
手机APP
机械社区
微信小程序

手机版|UG爱好者论坛 ( 京ICP备10217105号-2 )    论坛管理员QQ:1359218528

本站信息均由会员发表,不代表本网站立场,如侵犯了您的权利请联系管理员,邮箱:1359218528@qq.com  

Powered by UG爱好者 X3.2  © 2001-2014 Comsenz Inc. GMT+8, 2024-11-9 09:47

返回顶部