说实话，你有没有遇到过这种情况：在网页端想预览或批注DWG图纸，却束手无策？哈哈，别担心，今天咱就来聊聊这个问题。

你得知道，DWG格式的CAD图纸在网页上直接打开可没那么简单——它需要专门的工具或库来解析。

那为啥非要在网页端预览呢？你懂的，方便啊！不用下载额外的软件，直接在浏览器里搞定，多省事儿。

这里咱要隆重介绍两个重量级嘉宾：MxCAD和MxDraw。它们可是实现CAD图纸在线预览和编辑的利器。

MxCAD主要负责编辑功Neng，而MxDraw则侧重于显示和批注。简单来说Ru果你只需要在网页中显示、批注图纸，MxDraw就足够了；但要是想直接修改源图纸，那就必须用到MxCAD了它依赖MxDraw库，为其赋予了编辑图纸的Neng力。

顺便提个问题，你有没有想过为什么有些网站的内容百度不收录？其实影响收录的因素hen多，比如网站结构、内容质量、外部链接等。说实话，这事儿挺复杂的，但简而言之，Ru果你的网站内容够独特、质量够高，并且对用户有价值，那么被收录的可Neng性就大。

回答：一般来说可Neng是因为网站存在死链、内容重复度高，或者是新站还在考察期等等。咱就是说Zuo好网站优化，提高内容原创性和用户体验，是提升收录率的关键。

假设你Yi经决定要用MxCAD/MxDraw了下一步就是配置开发环境。以Vite为例，你需要安装必要的依赖包，比如mxcad，以及可Neng的mxdraw。

# 安装 mxcad 核心包
npm install mxcad
# 若使用 pnpm，请额外安装 mxdraw 
pnpm add mxdraw

在组件模板中定义渲染容器和文件选择器，并添加控制按钮。

<template>
  <!-- CAD 渲染区域 -->
  <div style="width: 100vw; height: 95vh; overflow: hidden;">
    <canvas id="myCanvas"></canvas>
  </div>
  <!-- 控制栏 -->
  <div style="margin-top: 10px; padding: 10px; background: #f5f5f5;">
    <!-- 隐藏的文件输入框 -->
    <input
      type="file"
      ref="fileInput"
      accept=".dwg,.dxf,.mxweb"
      @change="openDwgFile"
      style="display:none"
    />
    <!-- 功Neng按钮 -->
    <button @click="$refs.fileInput.click" :disabled="!mxcadReady">打开图纸</button>
    <button @click="startCloudMark" :disabled="!mxcadReady">绘制云线批注</button>
    <button @click="saveMarkup" :disabled="!mxcadReady">保存批注</button>
    <button @click="loadMarkup" :disabled="!mxcadReady">加载批注</button>
  </div>
</template>

在 Vue 组件的 onMounted 生命周期中调用 createMxCad，完成 Canvas 绑定、WASM 核心文件路径定位、字体库路径设置以及初始化完成的回调处理。

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createMxCad, MxCpp } from 'mxcad';
const mxcadReady = ref;
const fileInput = ref<HTMLInputElement | null>;
onMounted => {
  // 自动检测浏览器环境：支持 SharedArrayBuffer 则启用多线程 ，否则降级为单线程 
  const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st";
  createMxCad({
    canvas: "#myCanvas",
    // 动态定位 WASM 文件路径，兼容 Vite/Webpack 等构建工具
    locateFile:  => {
      return new URL(
        `../../node_modules/mxcad/dist/wasm/${mode}/${fileName}`,
        import.meta.url
      ).href;
    },
    fileUrl: "", // 初始不加载文件，等待用户通过 UI 选择
    fontspath: new URL(
      "../../node_modules/mxcad/dist/fonts",
      import.meta.url
    ).href,
    // 初始化完成回调
    onInit:  => {
      console.log;
      mxcadReady.value = true;
    }
  });
});
</script>

MxCAD引擎内核仅Neng直接解析和打开特定的.mxweb格式文件,无法直接读取原生AutoCAD格式。若跳过转换步骤直接尝试加载 DWG 文件,MXCAD 将报错或无法显示任何内容.

关键点说明:

因此,在实现“打开 DWG 图纸”功Neng时,必须遵循以下逻辑:

前端选择文件后,将原始 DWG/DXF 文件上传至后端;

后端调用转换服务将 DWG/DXF 转为.mxweb;

前端拿到转换后的.mxweb URL,通过 MxCAD.openWebFile加载并渲染.

// 原地址:http://localhost:/uploadfile// 
代理后地址:/api/uploadfile  或直接 /uploadfileconst res = await fetch("/api/uploadfile", { 
// Vite 会自动拦截并转发到 localhost:/uploadfile method: "POST", body: formData,}); 

图纸的加载与渲染核心依赖于 MxCAD提供的 openWebFile API。该接口支持从网络 URL 直接加载 .mxweb 或转换后的图纸数据,并提供了丰富的参数控制。

// 打开 DWG/DXF 文件
const openDwgFile = async  => {
 const target = event.target as HTMLInputElement;
 const file = target.files?.;
 if  return;
 const fileName = file.name;
 const fileExt = fileName.slice).toLowerCase;
 const mxcad = MxCpp.getCurrentMxCAD;
 if  {
 // 上传并转换
 const formData = new FormData;
 formData.append;
 try {
 const res = await fetch;
 const mxwebUrl = await res.text; // 后端返回转换后的 .mxweb URL
 // 加载转换后的图纸
 mxcad.openWebFile;
 } catch  {
 console.error;
 }
 } else if  {
 // 直接读取 .mxweb
 const tempUrl = URL.createObjectURL;
 mxcad.openWebFile;
 }
};

绘制云线批注 & 保存/加载批注数据

MxDraw 提供交互接口让用户绘制云线并添加文字说明。saveMxEntityToJson/ loadMxEntityFromJson 用于序列化/反序列化非原生实体至 JSON，实现持久化存储。

// 保存当前所有批注实体至 JSON 字符串
const saveMarkup =  => {
 const draw = MxFun.getCurrentDraw;
 if  return;
 const jsonData = draw.saveMxEntityToJson;
 localStorage.setItem;
};
/// 从 JSON 还原Yi保存的批注数据 
const loadMarkup =  => {
 const draw = MxFun.getCurrentDraw;
 if  return;
 const jsonData = localStorage.getItem;
 if  {
 draw.loadMxEntityFromJson;
 }
};

实际业务场景下,应将 saveMarkup,与特定 图纸ID关联存储;loadMarkup,应在 图纸加载完成后回调),自动从后端拉取对应数据并执行加载.

// vite.config.ts 示例server:{ headers:{ "Cross-Origin-Opener-Policy":"same-origin", "Cross-Origin-Embedder-Policy":"require-corp", } }