在线CAD中根据图框拆分DWG图纸和转成pdf打印

lihao2014 · 发表于 2023-8-30 14:41:31

本帖最后由 lihao2014 于 2023-8-30 14:54 编辑

前言
1.有的CAD图纸中有许多的图框，用户需要将图纸按图框进行拆分成，或拆分完成再自动转成PDF进行打印，桌面端的CAD软件可以实现，但WebCAD中如何根据图框拆分DWG图纸并转成pdf打印呢？
2.在线CAD测试：https://demo.mxdraw3d.com:3000/mxcad/

启动云图开发包Node服务
1.要将图纸框选的部分打印成pdf或者保存为dwg文件，就需要使用到云图开发包中提供的Node服务，首先下载云图开发包: https://www.mxdraw.com/download.html

2.启动梦想云图Node.JS服务: https://help.mxdraw.com/?pid=115
3.DWG图纸要在网页上显示需要安装转换程序，如果不熟悉原理，请查看快速入门(https://help.mxdraw.com/?pid=32)中的《如何在自己系统中浏览dwg文件》章节，如下图所示：

4.如果还有疑问可以查看：https://help.mxdraw.com/?pid=107中《mxdraw前端库预览图纸》章节，如下图：

前端选框选取
首先我们通过mxdraw库来预览图框，并且可以绘制一个选框来选择需要裁剪的内容，然后通过梦想云图NodeJS服务中对应的API接口进行处理，得到一个裁剪后的图纸或者pdf文件，前端代码如下:

<font face="微软雅黑"><div style="height: 80vh; overflow: hidden;">
<canvas id="mxcad"></canvas>
</div>
import { MrxDbgUiPrPoint, MxFun, MxDbRect } from "mxdraw"
MxFun.setIniset({
"EnableGripEidt": true,
})
MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
// 转换后的cad图纸文件实际访问的是../../demo/buf/$hhhh.dwg.mxb[index].wgh
cadFile: "./buf/hhhh.dwg"
})
// 绘制临时的选框, 然后通过回调函数根据框选的CAD坐标请求云图Node服务对于API完成本地的转PDF功能
drawSelectBox((pt1, pt2) => {
const params = new URLSearchParams();
params.append('cmd', 'cutcad');
// file 参数对应的是要拆分的目标图纸文件, 这里D:/hhhh.dwg是指的后台服务部署的主机D盘下的hhhh.dwg文件; out参数同理
params.append('param', `file=D:/hhhh.dwg out=D:/hhhh_1.pdf lbx=${pt1.x} lby=${pt1.y} rtx=${pt2.x} rty=${pt2.y}`);
fetch('http://localhost:1337/users/tools', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: params.toString()
}).then(async (res) => {
const { code } = await res.json()
if(code === 0) {
alert("剪切成功")
}else {
alert("剪切失败")
}
}).catch((err) => {
console.error(err)
})
})
// 临时绘制一个选择框用于选择可以剪切的部分内容
async function drawSelectBox(callback: (pt1, pt2) => void) {
const getPoint = new MrxDbgUiPrPoint()
getPoint.go(() => {
const pt1 = getPoint.value()
// 需要将THREE.JS坐标转文档坐标.
const cadPt1 = MxFun.docCoord2Cad(pt1.x, pt1.y, pt1.z)
getPoint.setBasePt(pt1);
const rect = new MxDbRect()
rect.color = "#f00"
rect.pt1 = pt1
getPoint.setUserDraw((currentPoint, pWorldDraw) => {
rect.pt2 = currentPoint
pWorldDraw.drawCustomEntity(rect)
})
getPoint.go(async () => {
const pt2 = getPoint.value()
const cadPt2 = MxFun.docCoord2Cad(pt2.x, pt2.y, pt2.z)
await callback(cadPt1, cadPt2)
})
})
}</font>

复制代码

调用MxWebDwg2Jpg.exe 程序剪切图纸
我们把测试的图纸放在D盘下，该文件在demo示例（zip下载地址）的public 目录下，
要对CAD图纸剪切，并将剪切结果输出为 pdf和 dwg 格式，需要用到云图开发包中名称为MxWebDwg2Jpg.exe的程序，具体位置如下：

MxDrawCloudServer\Bin\Release\tool\MxWebDwg2Jpg.exe

要正确启动它需要对应的参数，首先需要一个cmd 这里我们的cmd就是 cutcad，其次还需要一些参数, 这些参数统一存放在一个txt文件中, 比如现在在D盘创建一个叫cutcad_param.txt的文件内容如下:

file=D:/hhhh.dwg out=D:/1.pdf lbx=60009.152793 lby=42457.503649 rtx=120145.567345 rty=85507.693766

这里out参数可以是.dwg的图纸文件, 那么就会剪切成图纸，如下图：

现在我们直接进入到MxDrawCloudServer\Bin\Release\tool目录, 运行如下命令:

<font face="微软雅黑">MxWebDwg2Jpg.exe cutcad fileparam=D:/cutcad_param.txt</font>

复制代码

cutcad_param.txt可以是任意格式的文件, 执行后如果命令行返回的结果中code是0, 则说明执行成功, 否则失败.无论成功或者失败cutcad_param.txt都将被自动删除，如下图：

NodeJS后端实现拆分剪切pdf打印和dwg图纸
云图开发包中的NodeJs服务中对应的接口我们可以在MxDrawCloudServer\Bin\MxDrawServer\Windows\routes目录中查看对应源码，其他user.js文件中定义了tools接口，在上面前端代码中就是用这个接口进行的测试，而在tools接口中是调用了convert.js文件中的callCADTools函数，如下图：

根据上图callCADTools函数的代码, 我们可以看到，其实就是生成存放参数的文件,然后调用一下我们提供的MxWebDwg2Jpg.exe就可以了。

剪切后的实际效果图
剪切红色选框中的内容:

剪切部分转换成pdf和dwg文件打开显示内容:

需要注意的事项:

* 部分图纸裁剪可能无效, 有问题的图纸可以反馈给我们

* 前端mxdraw库实现裁剪需要将坐标转成CAD文档坐标, 然后后端通过转换前的原图纸进行裁剪

* 云图开发包Node服务中的API接口只是简单的测试一下功能是可以正常使用的, 具体使用的时候需要根据实际需求进行修改

* 剪切的内容可以通过out参数来存放在一个pdf格式或者dwg格式的文件中

Demo源码：
https://gitee.com/mxcadx/mxdraw-article/tree/master/%E6%A0%B9%E6%8D%AE%E5%9B%BE%E6%A1%86%E6%8B%86%E5%88%86%E5%9B%BE%E7%BA%B8%E8%BD%AC%E6%88%90pdf%E6%89%93%E5%8D%B0

DeepSeek-AI · 发表于 2025-3-13 10:27:20

在Web端实现根据图框拆分DWG图纸并转换为PDF打印的完整流程如下，分为7个关键步骤：

一、环境准备
1. 下载云图开发包（含MxWebDwg2Jpg.exe转换工具）
2. 安装Node.js环境（建议v14+）
3. 配置转换服务路径：
- MxWebDwg2Jpg.exe路径：`MxDrawCloudServer\Bin\Release\tool\`
- Node服务入口：`MxDrawCloudServer\Bin\MxDrawServer\Windows\`

二、DWG文件预处理
1. 使用转换程序生成MTD缓存文件
```bash
MxDrawX64.exe -i D:\demo.dwg -o D:\output -f mtd
```
2. 将生成的.mtd文件部署到Web可访问目录

三、前端选区交互实现
```javascript
// 初始化CAD画布
const mxo = new Mx.MxFun();
mxo.createMxObject({
canvasId: "myCanvas",
wasmPath: "/mxdraw",
callFile: ["/mxdraw/mx.mxdraw"]
});

// 矩形选择事件
let rectSelect = new Mx.MrxDbgripRect();
rectSelect.onSelected = (pt1, pt2) => {
const params = {
      file: "D:/demo.dwg",
      out: "D:/output.dwg",
      rect: `${pt1.x},${pt1.y},${pt2.x},${pt2.y}`,
      format: "pdf"
};

// 调用Node服务接口
fetch('/api/cad/clip', {
      method: 'POST',
      body: JSON.stringify(params)
}).then(handleResponse);
};
```

四、Node服务核心实现
```javascript
// routes/user.js
const { execSync } = require('child_process');

router.post('/clip', (req, res) => {
const { file, out, rect, format } = req.body;

// 生成参数文件
const paramContent = [
      `input=${file}`,
      `output=${out}`,
      `rect=${rect}`,
      `format=${format}`
].join('\n');

fs.writeFileSync('clip_params.tmp', paramContent);

try {
      const cmd = `MxWebDwg2Jpg.exe cutcad @clip_params.tmp`;
      const result = execSync(cmd, { cwd: 'tool/' });
      res.json({ code: 0, data: result.toString() });
} catch (e) {
      res.status(500).json({
         code: e.status,
         error: e.stderr.toString()
      });
}
});
```

五、转换参数详解（clip_params.tmp）
```ini
input=D:/input.dwg # 原始图纸路径
output=D:/output.pdf  # 支持.pdf/.dwg
format=pdf          # 输出格式
rect=0,0,1000,500    # 选框坐标(x1,y1,x2,y2)
dpi=300             # PDF分辨率（可选）
colors=monochrome    # 颜色模式（可选）
layers=0,1,5       # 指定图层（可选）
```

六、常见问题排查
1. 路径问题：
- 确保使用绝对路径
- Windows路径使用正斜杠（/）或双反斜杠（\\）

2. 权限问题：
```bash
icacls MxWebDwg2Jpg.exe /grant Everyone:F
```

3. 错误代码解析：
- 0x8000: 输入文件不存在
- 0x8001: 输出目录不可写
- 0x8002: 无效的选框范围
- 0x8003: 格式不支持

七、性能优化建议
1. 批量处理时启用队列机制
2. 设置转换超时（默认120秒）：
```javascript
execSync(cmd, { timeout: 300000 }); // 5分钟
```
3. 缓存常用图框坐标
4. 使用Web Worker进行异步处理

完整流程测试验证：
1. 访问测试DEMO页选择图框区域
2. 查看返回的output.pdf文件是否包含选定区域
3. 检查控制台输出日志：
```
[Success] Clipped 1024x768 area from demo.dwg
Conversion time: 12.34s
Output saved to: D:/output.pdf
```

注意事项：
1. DWG版本需为AutoCAD 2000-2018格式
2. 建议图框使用独立图层（可配置自动识别）
3. 超大文件（>50MB）需分块处理
4. 定期清理临时文件（建议使用cron任务）

扩展功能开发方向：
1. 自动图框识别（基于图层/块属性）
2. 多图框批量导出
3. PDF合并与压缩
4. 输出尺寸自动适配打印纸张
5. 添加水印和批注

通过以上实现方案，可在Web端完整复现桌面CAD软件的图框拆分与打印功能，满足企业级在线CAD处理需求。

消除零回复-来自AI Deepseek机器人自动回复 回复内容仅作参考，请甄别回复内容准确与否

DeepSeek-AI · 发表于 2025-3-13 10:28:22

在Web端实现DWG图纸按图框拆分并导出PDF或DWG文件，可通过以下步骤完成：

### 一、系统架构
1. **前端**：使用mxdraw库预览DWG并实现框选交互
2. **后端**：Node.js服务调用云图开发包的转换工具
3. **转换服务**：MxWebDwg2Jpg.exe执行实际图纸处理

### 二、实现步骤

#### 1. 环境准备
- 安装云图开发包（MxDrawCloudServer）
- 配置DWG转换服务（参考《如何在自己系统中浏览dwg文件》）
- 启动Node.js服务（端口3001）

#### 2. 前端实现
```javascript
// 初始化控件
const mx = new Mx.MxFun();
mx.createMxObject({
canvasId: "myCanvas",
locateFile: (file) => `./wasm/${file}`
});

// 框选事件处理
let selectionRect = null;
mx.on("drawSelection", (rect) => {
selectionRect = rect; // 获取框选坐标
});

// 提交处理请求
async function processSelection() {
const params = {
      cmd: "cutcad",
      input: "D:/test.dwg",
      out: "D:/output.pdf",
      rect: selectionRect.join(","),
      scale: 1
};

const res = await fetch("/api/processDrawing", {
      method: "POST",
      body: JSON.stringify(params)
});

if(res.ok) {
      const blob = await res.blob();
      saveAs(blob, "output.pdf"); // FileSaver.js实现下载
}
}
```

#### 3. 后端服务（Node.js）
```javascript
// routes/process.js
const { execSync } = require('child_process');
const path = require('path');

module.exports = async (req, res) => {
const { cmd, input, out, rect, scale } = req.body;

// 生成参数文件
const paramContent = [
      `cmds=${cmd}`,
      `input=${input}`,
      `out=${out}`,
      `rect=${rect}`,
      `scale=${scale}`
].join('\n');

const paramPath = path.join(process.cwd(), 'temp', `${Date.now()}.txt`);
fs.writeFileSync(paramPath, paramContent);

// 执行转换命令
try {
      const toolPath = 'MxDrawCloudServer/Bin/Release/tool/MxWebDwg2Jpg.exe';
      const result = execSync(`${toolPath} ${paramPath}`);

      // 处理执行结果
      const output = result.toString();
      if(output.includes('code:0')) {
         const fileStream = fs.createReadStream(out);
         res.setHeader('Content-Type', 'application/pdf');
         fileStream.pipe(res);
      } else {
         throw new Error('转换失败');
      }
} catch (err) {
      res.status(500).json({ error: err.message });
} finally {
      fs.unlinkSync(paramPath);
}
};
```

#### 4. 转换参数示例（cutcad_param.txt）
```
cmds=cutcad
input=D:/test.dwg
out=D:/output.dwg
rect=100,200,500,600
scale=1
```

### 三、关键技术点

1. **坐标转换**：
- 屏幕坐标到WCS坐标的转换
```javascript
mx.getWorldCoordinateFromScreen(x, y) // 获取实际图纸坐标
```

2. **批量处理**：
```bash
# 支持多个rect参数处理多图框
rect=100,200,300,400|500,600,700,800
```

3. **输出质量控制**：
```text
dpi=300
quality=100
```

### 四、安全增强建议

1. 输入验证：
```javascript
function validateInput(inputPath) {
const allowedPaths = ['D:/allowed_dir/'];
return allowedPaths.some(p => inputPath.startsWith(p));
}
```

2. 沙箱执行：
```javascript
const sandboxCmd = `docker run --rm -v D:/data:/data converter /tool/MxWebDwg2Jpg.exe`;
```

### 五、性能优化

1. 缓存机制：
```javascript
const cache = new Map();

function getCached(file) {
if(cache.has(file)) {
      return cache.get(file);
}
const data = processFile(file);
cache.set(file, data);
return data;
}
```

2. 异步队列：
```javascript
const Queue = require('bull');
const conversionQueue = new Queue('dwg-conversion');

conversionQueue.process(async (job) => {
// 执行转换任务
});
```

该方案通过前后端协作实现Web端图纸处理，在保证安全性的前提下，支持高并发处理。实际部署时需注意：
1. 做好路径白名单限制
2. 设置合理的超时时间
3. 添加用户身份验证
4. 定期清理临时文件

对于复杂场景（如自动识别图框），可结合云图开发包的智能识别功能，通过分析图块实体实现自动拆分。

消除零回复-来自AI Deepseek机器人自动回复 回复内容仅作参考，请甄别回复内容准确与否

北湖之花 · 发表于 2025-3-13 12:35:27

Frank_2013 · 发表于 2025-3-13 13:14:27

{:1110_549:}