本帖最后由 MxDraw 于 2023-8-30 12:01 编辑
前言
1. 有的CAD图纸中有许多的图框,用户需要将图纸按图框进行拆分成,或拆分完成再自动转成PDF进行打印,桌面端的CAD软件可以实现,但WebCAD中如何根据图框拆分DWG图纸并转成pdf打印呢?
启动云图开发包Node服务
3.DWG 图纸要在网页上显示需要安装转换程序,如果不熟悉原理, 请查看快速入门中的《如何在自己系统中浏览dwg 文件》章节,如下图所示:
前端选框选取
首先我们通过mxdraw库来预览图框,并且可以绘制一个选框来选择需要裁剪的内容,然后通过梦想云图NodeJS服务中对应的API接口进行处理,得到一个裁剪后的图纸或者pdf文件,前端代码如下: - <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)
- })
- })
- }
复制代码
调用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目录, 运行如下命令: - MxWebDwg2Jpg.exe cutcad fileparam=D:/cutcad_param.txt
复制代码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就可以了。
剪切后的实际效果图
1.剪切红色选框中的内容:
2.剪切部分转换成pdf和dwg文件打开显示内容:
需要注意的事项
* 部分图纸裁剪可能无效, 有问题的图纸可以反馈给我们 * 前端mxdraw库实现裁剪需要将坐标转成CAD文档坐标, 然后后端通过转换前的原图纸进行裁剪 * 云图开发包Node服务中的API接口只是简单的测试一下功能是可以正常使用的, 具体使用的时候需要根据实际需求进行修改 * 剪切的内容可以通过out参数 来存放在一个pdf格式或者dwg格式的文件中
Demo源码: |