HarmonyOS鸿蒙Next中网页版CAD(WEB CAD SDK)绘制的批注信息如何保存到图纸上

HarmonyOS鸿蒙Next中网页版CAD(WEB CAD SDK)绘制的批注信息如何保存到图纸上 前言

用户在网页中浏览编辑DWG图纸之后，会在图纸上进行审图批注，批注的内容会保存到服务器或原图纸中，本章节我们讲一下保存批注信息的方法，如果你还不会创建一个在线浏览编辑CAD图纸的前端应用，请参考使用：

MxDraw云图开发包的文档：https://help.mxdraw.com/?pid=32
mxcad库：https://mxcadx.gitee.io/mxcad_docs/zh/

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

操作界面如下：

实现步骤

用mxdraw绘制的批注图形，要保存到图纸上, 需要使用MxDraw云图开发包中对应服务进行保存 下面将详细讲解保存图纸批注的每一步。

首先下载MxDraw云图开发包开发包, 然后解压。可得到一个解压后的目录MxDrawCloudServer, 进入该目录, 运行Mx3dServer.exe软件。

点击按钮开始服务，再点击按钮VueBrowse 会加载一个网页，这个网页加载了一个在线浏览的图纸。

该网页的源码在开发包的MxDrawCloudServer\SRC\sample\Browse\2d\Browse目录, 在该目录下找到 src\test\SaveDwg.ts文件, 代码如下:

保存批注使用mxdraw提供的方法MxFun.getCurrentDraw().saveMxEntityToObject() 得到了一个JSON对象, 包含了页面中绘制的所有批注数据。

保存的两种方式

第一种方式是将这个数据保存在服务器的数据库中，再次打开这张图纸的时候，再去请求得到对应的批注数据，通过MxFun.getCurrentDraw().loadMxEntityFromJson(jsonString)在前端页面中直接恢复对应的批注。

第二种方式是直接保存到图纸上, 从上面代码得知，我们得到了所有批注数据的对象，在这个对象上设置了savefile 表示保存了包含了批注的新图纸服务器上的地址。而filename就是现在网页上打开的图纸的原图纸在服务器上的地址。

然后发起了一个post请求, 下面我们看看在服务器中是如何处理的。

首先我们在开发包中找到MxDrawCloudServer\Bin\MxDrawServer\Windows\routes\savecomment.js

这里就是这个post请求接口定义的位置:

接下来我们找到callMxNodeJS这个函数, 在同目录下的convert.js文件中:

可以看见，这里在组装参数, 然后运行mxconvert.js这个文件， 要找到这个文件的位置，我们要看mxconfig_1.default.getMxBinPath()这个函数的返回值。

如上所知, callMxNodeJS函数运行的就是这个文件MxDrawCloudServer\Bin\Release\mxconvert.js

同理，在同目录下找到mxconvert/MxConvert.js

如上，最终我们要在aryParam参数中找到cmd字符串调用对应命令，这里的字符串就是savecomment 然后调用new SaveCommentToDWG_1.SaveCommentToDWG().DO()

我们可用在同目录下找到SaveCommentToDWG.js

如上代码中，将各种不同的批注都绘制到图纸中, 最后将图纸保存在参数提供的savefile 中。

我们发现将这些图形绘制在图纸上是通过MxDrawCloudServer\Bin\Release\

MxNode.node和MxDrawCloudServer\Bin\Release\Mx2DNode.node提供的方法调用的, 你可以根据源码中使用方式，完善绘制更多自定义的图形到图纸中。

mxdraw实现自定义批注: [点击查看对应文档](https://mxcadx.gitee.io/mxdraw_docs/previewAnnotation/bases.html#%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E8%87%AA%E5%AE%9A%E4%B9%89%E6%89%B9%E6%B3%A8)

查看文档后, 这些批注中的getTypeName方式就是服务端得到的参数TypeName, 其他参数数据就是dwgOut返回的对应的这个图形需要的一些数据, 最终组成这样一个个的批注数据上传到服务器中。服务器根据这些批注数据, 绘制出对应图形到图纸中。

根据上文所述，我们知道了保存批注到图纸中的整个实现，可用参考代码或者直接使用这个接口。

注意以上代码为代码片段，请自行下载MxDraw云图开发包按照上文步骤了解保存批注的整个实现流程和实现细节。