网页CAD开发包后台处理DWG图纸(在线预览CAD图纸)

简介: MxServiceCode 是云图开发包中基于 Node.js 的轻量级 CAD 后端服务,封装 DWG 处理能力,依托 MxFun 引擎、C++ 原生模块与 mxcad 模型,支持格式转换、图框裁剪、图层分析、参数绘图及图纸合并等命令式批量处理,输出标准化 JSON 结果。

一、引言:什么是 MxServiceCode?

在开发 Web CAD 应用时,我们经常会遇到一些需要在服务器后台处理图纸的需求,比如批量转换格式、提取图纸数据等。这时候,云图开发包中的 MxServiceCode 就派上大用场了。

简单来说,MxServiceCode 是一个典型的 CAD 后端服务层,它位于云图开发包中的MxDrawCloudServer\Bin\MxServiceCode目录下。它不是一个完整的 Web 前端应用,而是以 Node.js 命令行(CLI)的形式,对底层的 DWG 处理能力进行了轻量化的封装。它的核心技术由三大基石构成:MxFun 核心引擎、Native Addon(原生 C++ 扩展插件)以及 mxcad 对象模型。

这种底层架构设计,保证了它在处理复杂 CAD 数据时的高性能与稳定性。而在应用层面上,它非常灵活,所有的后端功能都是由基于该核心的“命令模块”来提供的。这意味着,开发者可以像搭积木一样,通过编写或调用不同的命令模块,轻松定制和扩展服务器端的图纸处理逻辑。

二、MxServiceCode 项目结构介绍

image-20260608115739107.png

为了让大家在二次开发时能“找对门”,我们结合实际的工程目录结构,对 MxServiceCode 主要部分进行详细拆解。该项目采用标准的 Node.js + TypeScript 工程规范,核心分为以下几个板块:

1. bin 原生依赖与资源

bin 目录是整个项目的“动力心脏”,它并非普通的脚本文件夹,而是包含了项目运行所必需的底层二进制文件和资源。MxServiceCode 之所以能处理复杂的 DWG 图纸,完全依赖于该目录提供的原生环境支持。

  • Mx2DNode.node:核心的 Native 模块,真正执行 DWG 解析与转换的底层引擎。
  • fonts:DWG 字体文件,确保后台转换时文字不乱码。

2. src 核心源码层

这是项目的逻辑处理中心,包含了从底层引擎封装到具体业务功能的所有 TypeScript 代码。根据职责不同,可划分为以下三个部分:

(1) mxcad 数据模型层

image-20260608151307159.png
这个文件夹是 CAD 对象模型的封装,将底层的 Native DWG 对象包装成了 JavaScript 可访问的实体。里面包含了大量的核心类,例如:

  • McDbDatabase.ts:图纸数据库。
  • McDbEntity.tsMcDbPolyline.tsMcDbText.ts:各类图纸实体(如多段线、文字、圆等)。
  • McDbLayerTable.ts:图层表,用于管理图纸的图层信息。

(2) sample 业务实现层

image-20260608152435467.png
这里是编写实际业务逻辑的地方,每个文件通常对应一个特定的图纸处理功能(如格式转换、图框切割等)。

若需新增功能,只需在此添加脚本并在 MxCommand.ts 中注册即可,模块化设计使得扩展非常灵活。

(3) 其他核心 TS 文件

image-20260608153909205.png

除了上述子文件夹外,src 根目录下的文件构成了程序的骨架与控制中枢:

  • ini.js初始化脚本。通常在程序启动最早期执行,用于设置环境变量或加载基础配置,确保后续模块正常加载。
  • MxFun.ts底层桥梁。负责加载 bin 目录下的原生 C++ 扩展(Mx2DNode.node),初始化 CAD 引擎环境,并提供日志记录、路径处理等通用工具函数。
  • MxProcessor.ts命令调度中枢。负责解析外部传入的命令行参数,并将任务精准分发给对应的业务处理函数。
  • MxCommand.ts命令注册表。在这里定义所有可用的指令名称(如 convertframeCut)与具体实现函数的映射关系。
  • MxUtility.ts通用工具库。提供项目中各模块复用的高频辅助方法,减少重复代码。
  • MxBackstageConvert.ts图纸文件后台处理接口。封装底层 DWG 后台处理接口,负责打开/保存图纸、生成 WebGL 输出并提供后台数据库访问。

3. 根目录与基础配置

这是项目的入口和配置中心,决定了程序如何启动和运行。

  • mxapp.ts程序的绝对入口。Node.js 启动时首先执行此文件,负责初始化底层环境、解析命令行参数并触发命令执行。
  • package.json / tsconfig.json:项目的依赖管理清单与 TypeScript 编译配置文件。
  • test.bat / testlinux.sh:跨平台的测试脚本。分别用于 Windows 和 Linux 环境下快速验证功能是否正常。
  • .dwg (A3.dwg, BT.DWG, tree.dwg 等):项目自带的测试图纸文件,用于开发调试时的输入源。

4. doc 与 public 目录

  • doc:存放相关的技术文档或 API 说明,方便开发者查阅。
  • public:静态资源目录。如果 MxServiceCode 启动了简单的 HTTP 服务,这里的文件(如 HTML 预览页、CSS/JS 资源)可以直接被外部访问。

三、命令执行链路

image-20260608163831986.png
理解了项目结构后,我们需要深入探究 MxServiceCode 是如何处理一次完整请求的。它的命令执行链路非常清晰,核心逻辑可以概括为:命令行输入 → MxProcessor 调度 → 业务实现 → 底层处理 → JSON 输出。具体流程如下:

1. 程序启动与参数读取

当我们在终端输入命令时,Node.js 首先会执行入口文件 mxapp.ts。程序启动后,会立即调用 MxFun.init() 来初始化底层的 C++ 运行环境。随后,它会通过 process.argv.slice(2) 获取用户在命令行传入的所有参数。如果此时没有传入任何命令,程序会直接输出版本信息和日志路径并结束运行。

2. 命令分发与注册

当检测到有效参数后,程序会进入 MxProcessor.do(args) 进行命令分发。在分发之前,MxProcessor 会先调用 ReginstCommand() 完成命令的注册。这个函数位于 MxCommand.ts 中,它的作用是将具体的命令名称(如 convertframeCutmargeDwg 等)与 sample 目录下的具体实现函数一一映射。

3. 参数解析与执行

MxProcessor 支持两种参数解析模式:一种是标准的 命令 名称=值 形式,另一种是通过 fileparam filepath=... 读取外部 JSON 文件的形式。解析出命令名和参数后,MxProcessor 会在已注册的命令表中查找对应的处理函数。如果找不到,会直接返回“命令没定义”的错误;如果找到,则立即执行该函数。

4. 业务逻辑与底层交互

位于 sample 目录下的命令实现函数被触发后,会开始处理具体的业务逻辑。它们通常会调用 MxBackstageConvertMx2DDraw 等模块来操作图纸。而这些模块在接收到指令后,会将请求传递给真正的底层核心——由 MxFun 加载的 Native 模块(Mx2DNode.node)。Native 模块负责执行最耗时的 DWG 文件打开、实体遍历、数据转换等底层操作。

5. 统一结果输出

当 Native 层完成所有图纸处理任务后,结果会逐层向上返回给命令实现函数。命令函数会将处理结果封装成一个标准的对象(例如包含 successmessage 字段)。最后,MxProcessor.do() 会使用 console.log(JSON.stringify(...)) 将这个对象统一输出为 JSON 格式。这种标准化的输出方式,使得外部的 Web 服务或调用程序能够极其方便地读取和处理执行结果。

四、 功能测试

在正式体验 MxServiceCode 强大的图纸处理能力之前,有一个关键的前置步骤,如果需要通过 HTTP 接口来调用这些功能,必须先启动云图开发包中的web服务,确保 1337 端口处于正常运行状态。

1. 启动 1337 端口服务(前置准备)

image-20260609112317507.png

MxDraw 云图开发包提供了极其简便的一键启动方式,您无需手动配置复杂的后台环境:

  • Windows 系统:直接双击运行 MxDrawCloudServer/Mx3dServer.exe,在弹出的窗口中点击“开始Web服务”。程序会自动启动 1337 端口的 CAD 核心引擎服务(由 Bin/MxDrawServer/Windows/app.js 驱动)。
  • Linux 系统:在终端执行启动脚本 ./start_demo.sh,该脚本会自动拉起 1337 端口的 CAD 核心服务。

便捷提示:服务启动后,您可以直接在浏览器访问 localhost:1337/servertest。这是一个官方提供的可视化测试页面,您可以在页面上直接点击按钮来测试 DWG 转换、PDF 导出等核心接口,无需编写任何代码。

2. 核心功能与参数详解

(1)获取DWG文件基础数据

读取 DWG 图纸的实体数据、版本、范围等元信息,并输出为标准 JSON 文件,便于前端解析与展示。

  • 命令行调用

    ./bin/node mxapp.js getcaddata file=t1.dwg outfile=t1.dwg.json
    
  • 接口调用

    var data = {
         
       cmd:"getcaddata",
       file:"t1.dwg",
       outfile:"t1.dwg.json"
    };
    axios({
         
       method: "post",
       url: "localhost:1337/users/mxservicecode",
       data 
    }).then((ret) => {
         
       console.log(ret.data)
       alert(JSON.stringify(ret.data))
    // 输出文件位置:Bin/MxServiceCode/MxServiceCode/t1.dwg.json
    }).catch((err)=>{
         alert("网络错误") })
    
参数 说明
cmd 目标命令名
file 源 DWG 文件名
文件路径:MxDrawCloudServer\Bin\MxServiceCode\MxServiceCode
outfile 生成的 JSON 数据文件名
文件保存路径:MxDrawCloudServer\Bin\MxServiceCode\MxServiceCode

(2)后台参数化绘图

无需人工干预,程序打开空白模板,根据预设逻辑执行绘图操作(如绘制特定图形、标注等),并生成新的 DWG 文件。

  • 命令行调用

    ./bin/node mxapp.js testParamDraw  outfile=testdraw.dwg debug=1
    
  • 接口调用

    var data = {
         
       cmd:"testParamDraw",
       //cmd:"testParamDrawTk",
       outfile:"testdraw.dwg",
    };
    axios({
         
       method: "post",
       url: "localhost:1337/users/mxservicecode",
       data 
    }).then((ret) => {
         
       console.log(ret.data)
       alert(JSON.stringify(ret.data))
    // 输出文件位置:Bin/MxServiceCode/MxServiceCode/testdraw.dwg
    }).catch((err)=>{
         alert("网络错误") })
    
参数 说明
cmd 目标命令名
outfile 生成的新 DWG 文件的保存路径
debug 可选,调试模式开关。值为 1 时表示开启调试模式(通常会输出更多日志信息)

(3)根据图框名裁剪 DWG 到 PDF

这是一个非常实用的出图功能。程序会自动在图纸中搜索指定名称的图框(Block),识别其范围,并将图框内的图形内容批量导出为 PDF、图片或其他格式。

  • 命令行调用

    ./bin/node mxapp.js frameCut2 file=D:/Test/testcut.dwg tkname="AAA" outtype=.pdf width="5000" height="3000"
    
  • 接口调用

    var data = {
         
       cmd:"frameCut2",
       file:"D:/Test/testcut.dwg",
       tkname:"1横20200521",
       outtype:".pdf",
       //colorPolicy:"mono"
       //width:"1000"
       //height:"1000"
    };
    axios({
         
       method: "post",
       url: "localhost:1337/users/mxservicecode",
       data 
    }).then((ret) => {
         
       console.log(ret.data)
       alert(JSON.stringify(ret.data))
    }).catch((err)=>{
         alert("网络错误") })
    
参数 说明
cmd 目标命令名
file 源 DWG 文件路径
tkname 需要裁剪的图框名称(即 Block 的名字)
outtype 指定输出文件的格式,例如 .pdf.mxweb
width / height 指定输出pdf的宽度和高度
colorPolic 颜色策略。例如设置为 mono 表示输出黑白

(4)获取 DWG 文件图层信息

专门用于分析图纸结构,读取 DWG 的图层表(LayerTable),提取所有图层的名称、颜色、线型等属性,并输出图层列表,默认输出文件名为 原文件名_layers.json

  • 命令行调用

    ./bin/node mxapp.js getAllLayer  file="D:/Test/A.dwg"
    
  • 接口调用

    var data = {
         
       cmd:"getAllLayer",
       file:"t1.dwg",
    };
    axios({
         
       method: "post",
       url: "localhost:1337/users/mxservicecode",
       data 
    }).then((ret) => {
         
       console.log(ret.data)
       alert(JSON.stringify(ret.data))
    // 输出文件位置:Bin/MxServiceCode/MxServiceCode/t1.dwg_layers.json
    }).catch((err)=>{
         alert("网络错误") })
    
参数 说明
cmd 目标命令名
file 源 DWG 文件的路径

(5)合并图纸

读取多张 DWG 图纸的数据库,并将读取到的数据库合并到目标图纸数据库中,实现图纸的批量合并与拼接。

  • 命令行调用

    ./bin/node mxapp.js margeDwg file="D:/Test/mB.dwg" marge_file="D:/Test/mA.dwg"  out_file="D:/Test/mC.dwg" marge_layer="['2306','2307']" debug=1
    
  • 接口调用

    var data = {
         
       cmd:"margeDwg",
       file:"D:/Test/mB.dwg",
       marge_file:"['D:/Test/mA.dwg']",
       out_file:"D:/Test/mC.dwg",
       marge_layer:"['2306','2307']",
    };
    axios({
         
       method: "post",
       url: "localhost:1337/users/mxservicecode",
       data 
    }).then((ret) => {
         
       console.log(ret.data)
       alert(JSON.stringify(ret.data))
    }).catch((err)=>{
         alert("网络错误") })
    
参数 说明
cmd 目标命令名
file 目标 DWG 文件(被合并到的主文件)
marge_file 要合并的 DWG 文件,支持单个路径或 JSON 数组
out_file 合并后输出 DWG 文件
marge_layer (可选)要合并的图层数组,格式类似 ['layer1','layer2']
相关文章
|
10月前
|
JavaScript 开发工具 数据库
(在线预览CAD图纸)网页CAD SDK集成的方法
基于mxcad创建的在线CAD项目,支持图纸预览、编辑与数据库操作,提供iframe和mxcad-app插件两种集成方式。本文重点介绍mxcad-app在vite/webpack中的集成方法,支持自定义容器、构建配置及二次开发,便于快速嵌入并扩展功能。
|
5月前
|
前端开发 JavaScript Linux
网页CAD开发包结构与功能说明(CAD轻量化)
MxDraw云图开发包是面向CAD云化的完整解决方案,集成图纸转换(MxCAD)、后台服务(MxDrawServer/MxServiceCode)、前端示例(Browse/Editor/GIS)及跨平台启动工具(Windows/Linux),开箱即用,支持2D/3D编辑、GIS融合与多框架集成,助力快速构建Web CAD应用。
|
24天前
|
存储 编解码 前端开发
网页CAD的图纸保存与数据持久化方法(云原生CAD插件)
本文详解MxCAD图纸保存全流程:前端序列化为mxweb格式→上传至服务端→后端调用云图开发包转码为DWG/PDF等标准格式→前端下载归档。支持`saveFile`与`saveFileToUrl`双API,结合Node预置服务,快速实现云端设计闭环。(239字)
|
2月前
|
JavaScript API Go
Online CAD实现命令行驱动与参数化绘图的方法(web dwg edit)
本文详解MxCAD Web端命令行系统与参数化绘图的实现:从UI搭建、事件监听、命令注册到动态执行;涵盖静态写死与动态交互(含`setUserDraw`实时预览)两种绘图模式,助你构建专业级Web CAD交互能力。(239字)
|
2月前
|
存储 前端开发 数据库
网页CAD实现专业级视图控制与图层管理
本文基于MxCAD引擎,详解企业级Web CAD中视图导航(缩放、平移、旋转、黑白显示等)与图层管理(增删改查、状态切换、批量操作、搜索过滤)的完整实现。涵盖底层数据库事务、符号表结构解析及Vue3+TS前端交互,提供可落地的最佳实践方案。(239字)
|
7月前
|
人工智能 自然语言处理 Cloud Native
AI生成CAD图纸(云原生CAD+AI让设计像聊天一样简单)
本项目探索AI与在线CAD融合,通过MxCAD原子化API和智能体系统,实现“用自然语言绘图”。支持多模型、安全沙箱运行,提升设计效率。
AI生成CAD图纸(云原生CAD+AI让设计像聊天一样简单)
|
4月前
|
存储 JSON Linux
在线CAD开发包图纸转换功能使用指南-WEB端CAD
MxDraw云图开发包提供跨平台图纸格式转换功能,支持DWG/DXF/MXWEB/PDF/JPG互转及范围裁剪。含命令行直调与1337端口HTTP接口两种方式,适配Windows/Linux(x86_64/ARM),需下载对应版本并配置权限。
在线CAD开发包图纸转换功能使用指南-WEB端CAD
|
12月前
|
移动开发 JavaScript
(H5查看CAD)网页CAD提取图纸表格到excel
本文介绍如何通过自定义MxCAD插件,在Web端智能识别CAD图纸中的表格,实现自动合并与高效导出至Excel,提升数据提取效率与准确性。内容涵盖区域选择、图形识别、表格结构重建、单元格合并及内容导出等关键技术,适用于工程图纸数据自动化处理场景。
|
2月前
|
存储 JSON 前端开发
前端JS集成CAD插件浏览和批注DWG文件的方法
本文详解MxCAD与MxDraw的职能边界:MxDraw为轻量级渲染引擎,专注图纸浏览与非侵入式批注;MxCAD是基于WebAssembly的全功能CAD内核,支持深度编辑。以Vue3为例,手把手指导DWG转MXWEB、Canvas初始化、跨域配置、批注绘制与JSON存取,助你快速构建Web CAD审阅系统。(239字)
|
4月前
|
编译器 C++
桌面软件在国产系统中集成CAD控件
梦想CAD推出QT C++版桌面控件,专为国产操作系统适配,支持高性能二维CAD图纸浏览。本文详解部署流程:需CMake≥3.10与VS2017环境,下载源码及第三方库后,通过CMake配置生成VS工程,编译运行即可快速体验。编辑功能可联系客服获取。(239字)