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

前言

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

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

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

如何打开图纸请参考mxcadx.gitee.io/mxcad_docs/...

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

数据如何获取和修改

以图层数据为例,代码如下:

import 复制代码
// 获取当前的控件

const mxcad = MxCpp.App.getCurrentMxCAD();

//  得到数据库中的图层表

const layerTable = mxcad.getDatabase().getLayerTable();

//  得到所有图层的ID对象

const aryId = layerTable.getAllRecordId();

 

const layers = aryId.map((id) => {

// 得到对应ID的图层数据对象    

let layerRec = id.getMcDbLayerTableRecord();

if (layerRec === null) return;

return layerRec

})

// 设置第一个图层的颜色

const layer = layers\[0]

if (!layer) returnconst

color = new McCmColor()

color.setRGB(255, 0, 0)

layer.color = color

// 更新显示就可以发现图纸0层上的所有选择了颜色随层的图形都变成了红色mxcad.updateDisplay()

从上述代码中可以得出:

1.图层数据对象由图层ID对象得到

2.ID对象可以访问到其对应的数据对象

3.数据库存在各种表, 可以从表中得到存储的数据ID和数据对象

4.数据对象可以访问属性和调用各种方法来设置或修改该数据

该代码实现效果如下图:

1.改变图层颜色前:

2.改变图层颜色后:

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

在API文档中我们可以看到数据库中存在各种方法,其中有getJsonsetJson ,顾名思义就是JSON的序列化和反序列化方法,而实际上, 只要是继承了 McRxObject基类的都存在对应的序列化方法。

如图形类[McDbEntity]的基类McDbObject就继承了McRxObject基类, 所以每一个图形对象都是可以序列化的,同样的每一个图形对象, 都可以通过对象

ID[mxcadx.gitee.io/mxcad_docs/... 修改这些数据对象上的属性,显示渲染的图形也会根据数据的变化而变化,举个例子, 我们选中一个图形然后修改它的颜色, 代码如下:

scss 复制代码
import { MxCADUiPrEntity, MxCpp } from "mxcad"

// 得到当前控件

const mxcad = MxCpp.App.getCurrentMxCAD();

// 实例化一个mxcad提供的通过鼠标点击获得图形对象ID的类

let getEnt = new MxCADUiPrEntity();

const selectEntity = async ()=> {

    let id = await getEnt.go();

    // 通过ID对象得到图形数据对象

    let ent = id.getMcDbEntity();

    if(ent) {

        const color = ent.trueColor.clone()

        color.setRGB(255, 0, 0)

        ent.trueColor = color

        mxcad.updateDisplay()

    }

    selectEntity()

}

setTimeout(()=> {

    selectEntity()

}, 1000)

图形数据对象

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

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

而图形数据对象就是继承了McDbEntity的类实例>

我们只需要操作这些数据对象,就可以修改这张图纸的所对应的信息。

例如McDbLayerTableRecord 一个图层数据对象, 和McDbLayerTable一个图层表数据对象, 图层表中存储图层数据,自然可以对表中整体数据进行增删改查,而可以针对某个图层数据对象的属性进行修改。

对图层的增删改查示例代码如下:

ini 复制代码
import { McCmColor, MxCpp, McDbLayerTableRecord, McDb } from "mxcad"

// 得到当前控件

const mxcad = MxCpp.App.getCurrentMxCAD();

// 实例化一个图层数据对象并设置这个图层的一些属性

const layer = new McDbLayerTableRecord()

layer.color = new McCmColor(0, 0, 0)

layer.isFrozen = true

layer.isLocked = true

layer.isOff = true

layer.lineWeight = McDb.LineWeight.kLnWt018

layer.name = "testLayer1"

// 拿到当前控件的数据库图层表

const layerTable = mxcad.getDatabase().getLayerTable();

// 将图层数据对象添加到图层表中会得到一个标识该图层数据的对象ID

const objId = layerTable.add(layer)

// 我们可以通过图层表的JSON序列化和反序列化来整体的增删改查一些图层

const layerJsonString = layerTable.getJson()

const layerJson = JSON.parse(layerJsonString)

// 这里我们只要保留以下几个名称的图层

const  keepLayerNames = \["0", "排水", "testLayer1"]

const keepLayers = layerJson.filter((layerJsonObj)=> {

    return keepLayerNames.includes(layerJsonObj.name)

})

const keepLayersJsonString = JSON.stringify(keepLayers)

layerTable.setJson(keepLayersJsonString)

// 最后我们可以通过has方法检查图层是否存在 get方法传入图层名来得到对应的对象ID

console.log("图层0是否存在", layerTable.has("0"))

console.log("图层0的对象ID", layerTable.get("0"))

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

演示Demo源码:

gitee.com/mxcadx/mxdr...

相关推荐
踩着两条虫33 分钟前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程
jzlhll1232 小时前
kotlin Flow first() last()总结
开发语言·前端·kotlin
用头发抵命2 小时前
Vue 3 中优雅地集成 Video.js 播放器:从组件封装到功能定制
开发语言·javascript·ecmascript
蓝冰凌2 小时前
Vue 3 中 defineExpose 的行为【defineExpose暴露ref变量】详解:自动解包、响应性与实际使用
前端·javascript·vue.js
奔跑的呱呱牛3 小时前
generate-route-vue基于文件系统的 Vue Router 动态路由生成工具
前端·javascript·vue.js
柳杉3 小时前
从动漫水面到赛博飞船:这位开发者的Three.js作品太惊艳了
前端·javascript·数据可视化
Greg_Zhong3 小时前
前端基础知识实践总结,每日更新一点...
前端·前端基础·每日学习归类
We་ct4 小时前
LeetCode 148. 排序链表:归并排序详解
前端·数据结构·算法·leetcode·链表·typescript·排序算法
TON_G-T4 小时前
day.js和 Moment.js
开发语言·javascript·ecmascript