viewer.export — ExportManager

设计意图

viewer.export 是导出域,只做一件事:把当前相机视角的模型导出为消隐线条风格的矢量 SVG 工程图——BREP 边线 + silhouette 轮廓做解析遮挡裁剪,可选按实例材质色填充面。SVG 是引擎唯一内置的导出格式,没有位图(PNG)截图 API。输出是真矢量,任意缩放不糊,适合工程文档、打印与归档。

导出默认带 data-* id 属性(data-node-id / data-face-group-id / data-edge-id,经 emitIds 控制):导出的 SVG 嵌回页面后仍能按零件 / 面组 / 边做点击高亮、BOM 关联——矢量图与模型结构之间的链路不断。导出是独立的解析计算,不要求画布当前处于 HiddenLine 渲染模式,屏上是什么模式都不影响结果。

何时用它:出工程图 / 审阅附件、生成可交互的 SVG 报告页。屏上实时消隐预览归 viewer.renderMode;需要位图的替代路径见截图导出指南。

典型用法

按当前视角出图并下载(文件名自动补 .svg 后缀):

viewer.export.downloadSvg("assembly-A0", { width: 1920, height: 1080 });

纯线框风格字符串(关面填充,改线色线宽),交给后端归档:

const svg = viewer.export.toSvg({ fills: false, lineColor: "#003366", strokeWidth: 1.5 });
await fetch("/api/drawings", { method: "POST", body: svg });

把导出的 SVG 嵌回页面做点击高亮(吃 data-* id):

import { SelectionItem, SelectionMode, type NodeId } from "@modelcubes/viewer-core";

preview.innerHTML = viewer.export.toSvg();
preview.addEventListener("click", (e) => {
  const id = (e.target as Element).getAttribute("data-node-id");
  if (id) viewer.selection.apply(SelectionItem.node(Number(id) as NodeId), SelectionMode.Set);
});

注意事项

• 没有位图截图 API:WebGL 画布未开 preserveDrawingBuffer,直接对 canvas 调 toBlob 通常得到空白;线条风格位图可把 toSvg() 输出光栅化得到,带着色的实渲位图当前无法从引擎导出——替代路径详见截图导出指南。
• toSvg 是同步纯计算,按模型规模可能花上百毫秒,大模型导出放在用户显式触发的按钮里,别逐帧调;viewer 已销毁时抛 ViewerError(Disposed)。
• 常用默认值:尺寸默认画布大小;fills 默认 true 且 fillColor 默认 "instance"(每实例材质色);lineColor 默认 "#000000"、strokeWidth 默认 1;includeSilhouettes 默认 true;background 默认无(透明);emitIds 默认 true。
• silhouette 轮廓线无逐边 id(标 class="silhouette"),只有 BREP 边与面填充带 data-* 属性。
• downloadSvg 仅浏览器环境可用(走 DOM 下载);非浏览器集成用 toSvg 拿字符串自行落盘。

完整签名与延伸

• ExportManager — toSvg / downloadSvg 的精确签名。
• SvgExportOptions — 全部导出选项与默认值(含遮挡裁剪容差)。
• 指南:截图导出 — 位图替代路径与可交互 demo。
• 相邻域:viewer.renderMode — 屏上实时消隐(同一视觉语言,互不依赖)。