前端THREE.JS实现DWG图纸的批注和预览

# 新建 Vue3 + TypeScript 项目
npm create vite@latest cad-viewer -- --template vue-ts
cd cad-viewer
npm install

# 安装 mxcad 核心包
npm install mxcad
​
# 若使用 pnpm，请额外安装 mxdraw (通常 mxcad 已包含，视具体版本策略而定)
# pnpm add mxdraw

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
export default defineConfig({
  plugins: [vue()],
  server: {
    // 开发环境：直接在此处配置响应头
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    }
  },
  build: {
    target: 'esnext' // 确保编译目标支持最新特性
  }
})

<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"
    />
    
    <!-- 功能按钮 -->
    <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>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createMxCad, MxCpp } from 'mxcad';
​
const mxcadReady = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);
​
onMounted(() => {
  // 自动检测浏览器环境：支持 SharedArrayBuffer 则启用多线程 (2d)，否则降级为单线程 (2d-st)
  const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st";
​
  createMxCad({
    canvas: "#myCanvas",
    // 动态定位 WASM 文件路径，兼容 Vite/Webpack 等构建工具
    locateFile: (fileName: string) => {
      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("MxCAD 引擎初始化完成");
      mxcadReady.value = true;
    }
  });
});
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
​
export default defineConfig({
  plugins: [vue()],
  server: {
    // ....其他配置
      
    // 开发环境跨域代理配置
    proxy: {
      // 匹配所有以 /api 开头的请求（建议前端请求时加上 /api 前缀）
      '/api': {
        target: '://localhost:3000', // 图纸转换服务地址
        changeOrigin: true,              // 修改 Host 头为 target
        rewrite: (path) => path.replace(/^\/api/, ''), // 去掉 /api 前缀再转发
      },
      // 或者直接代理特定的转换接口路径
      //'/uploadfile': {
      //  target: '://localhost:3000',
      //  changeOrigin: true,
      // },
      // '/demo': {
      //  target: '://localhost:3000',
      //  changeOrigin: true,
      // }
    }
  }
})

// 原地址：://localhost:3000/uploadfile
// 代理后地址：/api/uploadfile (需在 proxy 中配置 rewrite) 或直接 /uploadfile
const res = await fetch("/api/uploadfile", { // Vite 会自动拦截并转发到 localhost:3000/uploadfile
  method: "POST",
  body: formData,
});

<script setup lang="ts">
// ... 上述初始化代码 ...
​
// 打开图纸处理函数
const openDwgFile = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  
  if (!file) return;
  
  const fileName = file.name;
  // 获取文件后缀并转为小写
  const fileExt = fileName.slice(fileName.lastIndexOf(".")).toLowerCase();
  const mxcad = MxCpp.getCurrentMxCAD();
​
  if (fileExt === ".dwg" || fileExt === ".dxf") {
    // DWG/DXF 需要后端转换
    const formData = new FormData();
    formData.append("file", file);
    
    try {
      // 调用代理后的上传接口
      const res = await fetch("/upfile/mxcad", {
        method: "POST",
        body: formData,
      });
      
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      
      // 约定：转换后的文件位于 /demo/ 目录下，文件名不变，后缀变为 .mxweb
      const mxwebFullUrl = `/demo/${fileName}.mxweb`;
      mxcad.openWebFile(mxwebFullUrl);
      
    } catch (err) {
      console.error(err);
      alert("上传或转换失败，请检查后端服务是否启动");
    }
  } else if (fileExt === ".mxweb") {
    // MXWEB 直接读取
    const tempUrl = URL.createObjectURL(file);
    mxcad.openWebFile(tempUrl);
  } else {
    alert("不支持该文件格式，请上传 .dwg, .dxf 或 .mxweb");
  }
  
  // 重置 input value，允许重复选择同一文件
  target.value = "";
};
</script>

import {
  MxFun,
  MrxDbgUiPrPoint,
  McEdGetPointWorldDrawObject,
  MrxDbgUiPrBaseReturn,
  MxDbRectBoxLeadComment,
} from "mxdraw";

// 绘制云线批注函数
function startCloudMark() {
  const point = new MrxDbgUiPrPoint(); // 获取点交互对象
  const mxDraw = MxFun.getCurrentDraw(); // 获取当前绘图对象
  const worldDrawComment = new McEdGetPointWorldDrawObject(); // 动态绘制辅助对象
  const mxCheckDraw = new MxDbRectBoxLeadComment(); // 云线批注实体对象

  // 设置云线半径（屏幕坐标转文档坐标）
  mxCheckDraw.radius = MxFun.screenCoordLong2Doc(5);
  mxCheckDraw.setLineWidth(3);
  mxCheckDraw.setLineWidthByPixels(true);

  // 第一步：获取起始点
  point.setMessage("\n云线框起始点: ");
  point.go((status) => {
    if (status != MrxDbgUiPrBaseReturn.kOk) return;
    
    mxCheckDraw.point1 = point.value();
    
    // 动态预览：移动鼠标时绘制矩形
    worldDrawComment.setDraw((currentPoint) => {
      mxCheckDraw.point2 = currentPoint;
      worldDrawComment.drawCustomEntity(mxCheckDraw);
    });

    point.setUserDraw(worldDrawComment);
    point.setMessage("\n云线框结束点: ");
    
    // 第二步：获取结束点
    point.go((status) => {
      if (status != MrxDbgUiPrBaseReturn.kOk) return;
      
      mxCheckDraw.point2 = point.value();
      
      // 动态预览：确定文本位置
      worldDrawComment.setDraw((currentPoint) => {
        mxCheckDraw.point3 = currentPoint;
        worldDrawComment.drawCustomEntity(mxCheckDraw);
      });

      // 设置批注文本属性
      mxCheckDraw.text = "审图批注";
      mxCheckDraw.textWidth = MxFun.screenCoordLong2Doc(100);
      mxCheckDraw.textHeight = MxFun.screenCoordLong2Doc(50);
      mxCheckDraw.fixedSize = true;

      if (mxCheckDraw.fixedSize) {
        mxCheckDraw.textHeight = 20;
        mxCheckDraw.textWidth = 130;
      }

      point.setMessage("\n审图标注点: ");
      
      // 第三步：获取文本引出点
      point.go((status) => {
        if (status != MrxDbgUiPrBaseReturn.kOk) return;
        
        mxCheckDraw.point3 = point.value();
        // 将实体添加到图纸数据库
        mxDraw.addMxEntity(mxCheckDraw);
      });
    });
  });
}

import { MxFun } from "mxdraw";

// 保存图纸批注
const saveMarkup = () => {
  const draw = MxFun.getCurrentDraw();
  if (!draw) return;
  
  // 序列化批注数据
  const jsonData = draw.saveMxEntityToJson();
  localStorage.setItem("mx-markup-data", jsonData);
  alert("批注已保存至本地存储");
};

import { MxFun } from "mxdraw";

// 恢复图纸批注
const loadMarkup = () => {
  const draw = MxFun.getCurrentDraw();
  if (!draw) return;

  const jsonData = localStorage.getItem("mx-markup-data");
  if (jsonData) {
    draw.loadMxEntityFromJson(jsonData);
    alert("批注已加载");
  } else {
    alert("未找到保存的批注数据");
  }
};