前端直接打开 AutoCAD DWG/DXF 文件的 Vue 3 组件来了

在很多前端开发者的认知里，AutoCAD 的 DWG/DXF 文件要么得用本地软件打开，要么需要后端进行格式解析。但现在，你可以只用 Vue 3，就在浏览器里直接打开和编辑 CAD 文件 ，无需任何后端支持------这就是 MlCadViewer。

💡 在线体验 ：Live Demo

📚 API 文档 ：API Docs

它是什么？

MlCadViewer 是一个基于 Vue 3 的高性能 CAD 组件，支持 AutoCAD DWG、DXF 文件的查看与编辑，完全在浏览器端运行。它不仅内置了现代化 UI，还集成了状态管理、渲染引擎、国际化、主题切换等功能，让你在项目里一行标签就能用。

关键特点：

• 无后端依赖：DWG/DXF 文件解析 & 渲染全在本地完成
• 高性能渲染：即使是大图纸也能保持 60+ FPS
• 可定制 UI：工具栏、命令行、坐标显示、性能统计随意开关
• 文件安全：文件不上传服务器，隐私无忧

快速上手

安装：

npm install @mlightcad/cad-viewer

最简单的使用方法：

<template>
  <MlCadViewer locale="zh" url="example.dwg" />
</template>

<script setup lang="ts">
import { MlCadViewer } from '@mlightcad/cad-viewer'
</script>

UI 可定制

MlCadViewer 的 UI 配置来自全局的 AcApSettingManager，你可以在组件加载前任意修改。

ts
复制编辑
import { AcApSettingManager } from '@mlightcad/cad-simple-viewer'

// 关闭命令行
AcApSettingManager.instance.isShowCommandLine = false

// 关闭工具栏
// AcApSettingManager.instance.isShowToolbar = false

组件功能一览

• 主菜单：文件操作、视图控制、设置
• 工具栏：绘图、缩放、选择工具
• 图层管理：图层可见性与属性
• 命令行：AutoCAD 风格命令输入
• 状态栏：坐标、缩放等级、系统状态
• 文件读取：支持拖拽、URL 自动加载
• 多语言支持：中文 / 英文一键切换
• 主题切换：暗黑 / 明亮模式

如何操作

在桌面端浏览器里面，操作的方式和AutoCAD完全一致。

桌面浏览器操作

• 选择：鼠标左键单击图形实体
• 缩放：鼠标滚轮向上/向下滚动进行放大或缩小
• 平移：按住鼠标中键并拖动视图

平板 / 手机浏览器操作

• 选择：手指轻触图形实体
• 缩放：双指捏合放大或缩小视图
• 平移：双指拖动视图进行移动

架构简述

CAD-Viewer 是一个高性能、纯浏览器端的 DWG/DXF 文件查看器，采用模块化、可扩展的架构设计，以支持多种 CAD 数据格式的加载、解析、渲染与交互。整个系统分为以下几个核心层次：

这种分层架构确保了 CAD-Viewer 在面对不同数据规模、渲染需求与部署环境时，都能保持高性能、低延迟与高扩展性。

模型层

• 通过 realdwg-web 中的 @mlightcad/data-model 模块定义统一的数据模型（Data Model）来描述解析后的 CAD 数据，包括几何实体、图层信息、视图参数等。
• 通过 AcDbDatabaseConverter 定义了一个统一的 CAD 文件转化接口，可以使用不同的转化器将 CAD 数据转化为统一的数据模型。
• 通过 realdwg-web 中的 @mlightcad/libredwg-converter 模块提供 DWG 文件的解析能力，将 DWG 文件解析为统一的数据模型。
• 通过 @mlightcad/dxf-json 模块提供 DXF 文件的解析能力，将 DXF 文件解析为统一的数据模型。
• 通过 realdwg-web 中的 @mlightcad/geometry-engine 模块几何引擎，提供各种几何（点、线、多段线、样条曲线、圆、圆弧、椭圆、椭圆弧等）计算和数学计算（向量、矩阵等）的能力。

此处，我们稍微解释一下为什么要定义 AcDbDatabaseConverter 这样一个接口。因为市面上已有的 DXF 和 DWG 读写和转换工具都实现的功能不是非常完整，所以我自己基于一些开源的代码写了 @mlightcad/libredwg-converter 和 @mlightcad/dxf-json 。但是，目前市面上最好 AutoCAD DWG/DXF 读取和转化工具实际上是 ODA 。你只有购买了它的 license 才能拿到它的源码，才能基于它构建一个 WebAssembly 模块，将 DXF 和 DWG 转化为 @mlightcad/data-model 模块定义统一的数据模型。那位好心人有 ODA 的源码分享给我的话，我可以基于 ODA 源码做一个转化器。

渲染层

• 通过 realdwg-web 中的 @mlightcad/graphic-interface 模块来定义统一的渲染接口，用于渲染图纸中各种类型的图元。
• cad-viewer 中的 @mlightcad/three-renderer 模块实现了统一的渲染接口，使用 Three.js 来渲染图纸中各种类型的图元。
• cad-viewer 中的 @mlightcad/svg-renderer 模块实现了统一的渲染接口，用于将图纸渲染为 SVG。

视图层

• cad-viewer 中的 @mlightcad/cad-simple-viewer 模块提供了 CAD 查看器的核心视图逻辑，例如文档管理、命令处理，以及 UI 与渲染引擎之间的协作。该模块不依赖任何 UI 框架，除了画布（canvas）外不提供任何用户界面。
• cad-viewer 中的 @mlightcad/cad-viewer 模块基于 @mlightcad/cad-simple-viewer 提供了基于 Vue3 的菜单、工具栏、命令行、状态栏等用户界面，并且提供了dark和light两种UI主题。同时，将主要功能封装到一个 Vue3 的组件中供开发人员集成使用。

渲染引擎

渲染 DXF/DWG 文件主要有几个难点：

• 高性能地渲染一张包含了很多图元的图纸
• 还原AutoCAD的文字渲染效果
• 线形和填充效果

高性能渲染

要高性能地渲染包含大量图元的图纸，核心是要合并点、线、面减少 Draw Call。这个 THREE.js 已经提供了部分解决方案了，它提供了一个类 BatchedMesh 可以做三角网格的合并，减少 Draw Call。但是，这个类并不支持点和线的合并，而且即使是面也并不完全符合我们的需求，所以我们仿照这个类实现了若干个类来提供点、线和面的合并功能，具体代码我就不在此处赘述了，大家可以自行查阅这部分代码。

文字渲染

AutoCAD 使用了称为 MText 的格式来描述富文本，而且使用了一种特有的 SHX 字体（本质就是只用线不用面来绘制的一种字体）来加速文字的渲染。所以，核心是要解决这两个问题，其它都没有什么特殊的，按照正常的渲染引擎的做法做即可。

• 解析 MText ：按照 MText 的 Specification，我们专门写了一个 MText 的 Parser 工具包 @mlightcad/mtext-parser。
• 解析 SHX 字体 ：按照 SHX 字体的 Specification，我们专门写了一个 SHX 字体的 Parser 工具包 @mlightcad/shx-parser。
• 渲染 MText ：有了前面的两个 Parser，渲染文字就相对轻松了，我们专门写了一个渲染 MText 的工具包 @mlightcad/mtext-renderer。由于中文字体的文件有点大，为了加速文字的渲染性能，我们在浏览器的 IndexDB 中缓存了解析后的字体文件。这样，一旦这个字体被下载和解析后，下次使用到这个字体的时候图纸的渲染速度就会快一些。

同时，为了调试文字的渲染效果，我们专门做了一个基于 THREE.js 的富文本编辑器 mtext-editor。具体的实现细节，大家可以看这篇文章。

• 如何构建一个基于WebGL的富文本编辑器？

其实，现在市面上还没有开源的基于 THREE.js 的富文本编辑器，大家有需要使用这个编辑器作为自己的渲染引擎的文字编辑器。

线形和填充效果

AutoCAD支持自定义线形和填充效果，暂且我们完成了部分效果，例如线形中包含文字的话暂且不支持。所有的线形和填充效果都是用了 THREE.js 的 Shader Material 来实现。具体代码我就不在此处赘述了，大家可以自行查阅这部分代码。

结语

如果你想了解更多关于 CAD-Viewer 的内容，可以阅读该项目的 Readme文档，也欢迎大家阅读该文章的姊妹篇。

• CAD-Viewer：面向未来的高性能纯浏览器 DWG/DXF 查看器

如果大家在使用过程中发现任何问题或者有任何建议，可以在 Github Issues 进行提交。如果是 Bug，最好可以贴上图纸的链接地址，这样我可以复现这些问题。