在线前端mxdraw和mxcad库预览编辑图纸

CAD画图

mxdraw 前端库预览图纸

mxdraw 的作用就是预览图纸，也可以绘制一些批注或者其他图形，首先进行安装，如果你没有前端工程化的基础，请先看https://help.mxdraw.com/?pid=117基础知识，mxdraw有详细的文档，建议点击https://mxcadx.gitee.io/mxdraw_docs/start/abstract.html 查看使用说明，然后我们讲一下转换后的图纸用mxdraw库显示的步骤:

1）新建工程

这里我们就用vite来创建一个前端工程化的项目

先创建一个目录vite-mxdraw 然后进入命令行输入以下命令:

1. # 初始化项目
   
2. 
   
3. npm init -y
   
4. 
   
5. # 创建vite 项目
   
6. 
   
7. npm create vite@latest
   
8. 
   
9. # 安装mxdraw库
   
10. 
    
11. npm install mxdraw

复制代码

更多关于创建vite项目的说明，请参考: https://cn.vitejs.dev/guide/

2）使用mxdraw

在vite创建的项目中你选择了其中一种框架，而mxdraw它是不依赖于任何框架的，所以我们只需要在canvas元素创建完成后就可以直接使用mxdraw提供的方法，在页面中直接显示转换后的图纸文件。

如果你不知道mxdraw转换的图纸文件是什么，或怎么转换的，可以先看https://help.mxdraw.com/?pid=32

一般情况下我们不要只使用一个canvas元素，而是定义一个父级元素，并且这个父级的高度一定需要是固定的（不能使用百分比单位），宽度也必须有（可以是百分比单位），像下面这样：

1. <div style="width: 100%;height: 90vh"><canvas id="myCanvas"></canvas></div>

复制代码

然后我们可以在js/ts文件（根据前端框架的不同写的位置也不一样，但是只要canvas元素创建挂载，那么就可以使用下面的代码），输入如下代码:

1. import { MxFun } from "mxdraw"
   
2. 
   
3. MxFun.createMxObject({
   
4. 
   
5.     canvasId: "myCanvas", // canvas元素的id
   
6. 
   
7.     cadFile: "./demo/buf/$hhhh.dwg",
   
8. 
   
9.     useWebsocket: false,
   
10. 
    
11. });

复制代码

这里cadFile 对应的就算转换后的文件缩写，它会自动去请求转换后对应的多个文件，详细的入门文档请参考:https://mxcadx.gitee.io/mxdraw_docs/start/quickStart.html

mxcad 在线编辑图纸

如果只是在网页中显示、批注图纸，mxdraw就足够了，如果需要直接修改源图纸，就必须用到mxcad这个库，mxcad依赖mxdraw库，为mxdraw库赋予了编辑图纸的能力。

要使用mxcad，同样需要先有转换后的图纸文件，但这个文件和mxdraw显示的转换后的图纸文件是不一样的，下文只是简单尝试使用mxcad，如果你希望更多的使用它，建议你直接查看https://mxcadx.gitee.io/mxcad_docs/zh/。

1）先初始化项目和创建vite项目

与使用mxdraw是一样，建议使用vite作为打包工具，如果使用其他打包工具或者不使用打包工具请直接查看https://mxcadx.gitee.io/mxcad_docs/zh/，mxcad是基于https://developer.mozilla.org/zh-CN/docs/WebAssembly的，我们需要找到vite.config.ts文件如果没有就在根目录创建一个，输入如下代码:

1. import { defineConfig } from "vite"
   
2. 
   
3. export default defineConfig({
   
4. 
   
5.     server: {
   
6. 
   
7.         headers: {
   
8. 
   
9.           "Cross-Origin-Opener-Policy": "same-origin",
   
10. 
    
11.           "Cross-Origin-Embedder-Policy": "require-corp",
    
12. 
    
13.         }
    
14. 
    
15.     }
    
16. 
    
17. })

复制代码

服务器配置了这样的响应头，我们才能使用，如果不配置也可以，但打开图纸期间会阻塞js线程，详细的使用请查看https://mxcadx.gitee.io/mxcad_docs/zh/。

2）编辑CAD图纸

安装好mxcad后，我们就可以直接使用可以在页面中显示并编辑cad图纸，输入如下代码：

1. import { createMxCad } from "mxcad"
   
2. 
   
3. createMxCad({
   
4. 
   
5.     canvas: "#myCanvas",
   
6. 
   
7.     locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
   
8. 
   
9.     fileUrl: new URL("../assets/test.mxweb", import.meta.url).href
   
10. 
    
11. }).then((mxcad)=> {
    
12. 
    
13.     // 我想换一个文件显示?
    
14. 
    
15.     // mxcad.openWebFile(new URL("../assets/test2.mxweb", import.meta.url).href)
    
16. 
    
17.     // 保存文件？必须放在用户操作的事件（如点击）中调用它，因为这个行为必须是用户操作去触发
    
18. 
    
19.     // mxcad.saveFile()
    
20. 
    
21. })

复制代码

fileUrl 以及openWebFile的参数都是指的转换后的文件，如何转换文件在https://mxcadx.gitee.io/mxcad_docs/zh/中有对应的说明，而更详细的可以看https://help.mxdraw.com/?pid=32中的相关内容。

使用示例源码合集

如果你仍然无法完成图纸展示或者编辑，建议在github上看我们写好的对应示例源码，然后直接git clone 我们在github上提供的示例代码来参考或者进行开发。

mxdraw相关示例：https://github.com/mxcad/mxdraw-sample

mxcad相关示例: https://github.com/mxcad/mxcad_docs/tree/master/examples

如果你不了解git 请参考：https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git

注意：使用mxcad 你需要克隆的是https://github.com/mxcad/mxcad_docs仓库，而不是https://github.com/mxcad/mxcad_docs/tree/master/examples ，

具体如何启动这些示例，在示例项目中有详细说明。

CAD画图

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

wo5068056

感谢大佬！

复仇云

感谢分享