如何快速上手cad-viewer：10分钟在浏览器中打开你的第一份DWG/DWG图纸

• 前端
• 3D渲染
• 图形学

cad-viewer 是全球首个完全运行在浏览器中的 DXF/DWG 查看器与编辑器：不需要安装 AutoCAD 等桌面软件，不需要部署后端服务器，打开浏览器就能直接查看、测量、标注 DWG/DXF 图纸，且图纸文件始终不离开你的设备。本文将带你用约 10 分钟完成环境检查、项目启动，并在浏览器中打开你的第一份图纸，顺手掌握图层切换、距离测量等最常用操作。

为什么选 cad-viewer：浏览器 CAD 查看器的 4 个核心优势

在动手之前，先弄清楚它解决了什么痛点：

💡 数据说明：cad-viewer 对图纸的隐私保护是由架构保证的——文件从始至终不离开本地设备，非常适合涉密图纸与离线场景。完整特性介绍可参考 README.zh-CN.md。

快速开始前的环境检查：2 项版本要求

cad-viewer 基于现代前端工具链，只需确认本地环境满足以下两个条件（约 1 分钟）：

• Node.js≥ 24
• pnpm≥ 10

检查命令：

node -v pnpm -v

如果 pnpm 未安装，可用npm install -g pnpm安装。另外，请提前准备一份.dwg或.dxf图纸文件，稍后会用到。

3 步启动 cad-viewer：克隆、安装、运行

核心步骤只有 3 条命令，全部在终端中执行（约 3 分钟）：

# 1. 克隆仓库 git clone https://gitcode.com/gh_mirrors/cad/cad-viewer cd cad-viewer # 2. 安装依赖 pnpm install # 3. 启动示例应用（二选一） pnpm dev # 完整版查看器（菜单、功能区、命令行、状态栏） pnpm dev:simple # 简易版查看器（轻量画布 + 工具栏）

启动成功后，浏览器访问终端输出的地址（Vite 默认http://localhost:5173，以实际输出为准），即可看到完整的 CAD 查看界面。

两种查看器的定位差异：

• 完整版cad-viewer：基于 Vue 3，功能最齐全，适合体验全部交互能力，源码位于 packages/cad-viewer/
• 简易版cad-simple-viewer：只有画布与 CAD 内核，适合嵌入自己的 Web 产品，源码位于 packages/cad-simple-viewer/

打开你的第一份图纸：常用鼠标与触控操作

在页面中打开准备好的 DWG/DXF 文件后，最常用的交互如下（完整版操作手册见 docs/guide/operations.md）：

桌面浏览器（鼠标）

手机 / 平板（触控）

• 双指捏合：缩放
• 单指拖动：平移
• 点按实体：选中

小技巧：右侧工具栏中的Zoom to Extents（范围缩放）可一键回到图纸全貌，刚打开复杂图纸时非常好用；图层管理面板则支持图层的开/关、锁定、冻结与隔离。

看图进阶：图层、测量与标注三大高频功能

打开图纸后，真正体现“编辑器”价值的功能有三个：

• 图层管理：在图层面板中按开关显示/隐藏图层，双击图层名可缩放到该图层范围，快速定位关注的部位
• 测量工具：内置距离、连续距离、面积、角度、弧长测量，结果实时显示在测量面板中，详见 docs/guide/measure/overview.md
• 标注工具：箭头、引线标注、云线、矩形、文本等批注能力，满足设计审查的全部需要，详见 docs/guide/markup/overview.md

💡 只看不改？cad-viewer 提供只读模式（Read-Only Mode），界面自动隐藏编辑命令，布局按桌面/平板/手机自适应，详见 docs/guide/ui/read-only.md。

进阶了解：模块化架构与离线导出能力

如果你想了解图纸是如何在浏览器里跑起来的，cad-viewer 采用清晰的三层架构（完整文档见 docs/index.md）：

• View Layer：cad-viewer（完整 Vue 应用）与cad-simple-viewer（核心引擎）
• Rendering Layer：three-renderer（WebGL 渲染）、svg-renderer、graphic-interface
• Model Layer：data-model（DXF 解析）、geometry-engine、可选的libredwg-converter（DWG 解析）

此外还有几个值得关注的扩展点：

• 插件系统：官方提供 HTML / PDF / SVG 导出、OneDrive、Google Drive 数据源、AI 绘图助手等插件，按需启用，各插件说明见 packages/ 目录下对应包的 README
• CLI 批量导出：cad-simple-viewer-cli支持把整目录 DWG 批量转为 PNG、PDF、离线 HTML，适合归档场景，见 packages/cad-simple-viewer-cli/README.md

常见问题：DWG 打不开或显示异常怎么办

• DWG 解析是可选能力：开源默认的 DWG 路径基于 LibreDWG，实体覆盖有限且 WASM 体积较大；示例应用通过显式注册启用。若需要更好的兼容性与更小的体积，可参考官方商业解析器说明 PROPRIETARY-PARSER.md
• DXF 文件解析最稳定：DXF 加载使用内置 MIT 许可解析器，建议初次体验优先使用 DXF
• 大文件加载慢：可关注官方 Roadmap 中的流式/增量加载进展；导出为离线 HTML 后查看同一图纸，内存占用通常远低于传统桌面看图软件
• 遇到报错截图：保留问题图纸链接便于社区复现，可直接在项目 Issue 中反馈

下一步：官方文档与示例项目

打开第一份图纸只是开始，建议按以下路线继续深入：

1. 阅读 docs/guide/ 下的用户指南：操作、测量、标注、只读模式全覆盖
2. 运行其他示例：pnpm dev:html-converter（HTML 转换器）、pnpm dev:diff（图纸对比查看器）
3. 把 cad-viewer 嵌入自己的产品：参考 packages/cad-simple-viewer-example/ 的极简宿主写法，一行代码即可集成
4. 生产部署：pnpm build构建后用pnpm preview本地验证产物

至此，你已经完成了从环境准备到打开第一份 DWG/DXF 图纸的全部流程——没有安装任何 CAD 软件，没有部署任何服务器。祝你在浏览器中愉快看图 🎉

• 前端
• 3D渲染
• 图形学