Question

CAD图纸文件格式较复杂，有的文件又特别大，不能直接在网页进行编辑，所以需要梦想CAD控件提供的后台转换程序提前转换成mxweb格式，传送给前台编辑，其中转换方法和原理请查看快速入门的《编辑模式原理说明》章节，如下图所示：

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

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

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

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

import { defineConfig } from "vite"

export default defineConfig({
    server: {
        headers: {
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
        }
    }
})

服务器配置了这样的响应头，我们才能使用，如果不配置也可以，但打开图纸期间会阻塞js线程，详细的使用请查看mxcad文档。

2）编辑CAD图纸

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

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

fileUrl 以及openWebFile的参数都是指的转换后的文件，如何转换文件在mxcad文档中有对应的说明，而更详细的可以看快速入门文档中的相关内容。

在线编辑CAD图纸DEMO链接：快速入门 | mxcad，效果图如下：