FMB Viewer

Appearance

截图导出 ​

viewer.export 提供矢量导出:把当前相机视角的模型导出为消隐线条风格的 SVG 工程图——BREP 边线 + silhouette 轮廓做解析遮挡裁剪,可选按实例材质色填充面。输出是真矢量,任意缩放不糊,且默认带 data-* id 属性,可在 SVG 里继续做交互。引擎没有位图(PNG)截图 API,SVG 是唯一内置导出格式。

下面的 demo 演示 SVG 导出的视觉基础——消隐渲染,点「导出 SVG」按钮可在右侧预览导出结果:

可交互 demo · H 消隐 / S 实色线框 / G 隐藏边灰显,点「导出 SVG」右侧预览,点击 SVG 的面/边可高亮在新窗口打开 ↗

核心 API ​

ts
// 按当前视角取 SVG 字符串(默认:画布尺寸、消隐线条 + 按实例材质色填充)
const svg = viewer.export.toSvg();

// 纯线框风格:关掉面填充
const lines = viewer.export.toSvg({ fills: false });

// 定制尺寸与样式
viewer.export.toSvg({
  width: 1920,
  height: 1080,
  lineColor: "#003366",
  strokeWidth: 1.5,
  background: "#ffffff",
});

// 直接触发浏览器下载(文件名不带 .svg 时自动补)
viewer.export.downloadSvg("model", { fills: true });

行为要点 ​

  • toSvg(options?):按当前相机视角生成 SVG 字符串。这是独立的解析计算(投影 + 遮挡裁剪),不要求画布当前处于 HiddenLine 渲染模式——屏上的消隐模式(viewer.renderMode)与 SVG 导出共享同一种视觉语言,但互不依赖。viewer 已销毁时抛 ViewerError(Disposed)。
  • SvgExportOptions 常用项:width / height 默认画布大小;fills 默认 true(面填充),fillColor 默认 "instance"(每实例材质色)或传 CSS 色强制单色;lineColor 默认 "#000000"、strokeWidth 默认 1;includeSilhouettes 默认 true(含视相关轮廓线);background 默认无(透明);xmlProlog 默认 true。完整字段(含遮挡裁剪容差 clipProximity / clipZNudge)见类型定义。
  • data-* id 属性:emitIds 默认 true,输出的 <polygon> / <polyline> 带 data-node-id / data-face-group-id / data-edge-id,可把导出的 SVG 嵌回页面做点击高亮、BOM 关联等(demo 右侧预览的点选高亮就是这样实现的);silhouette 轮廓线无逐边 id,标 class="silhouette"。
  • downloadSvg(filename, options?):生成 SVG 并触发浏览器下载,仅浏览器环境可用;filename 不带 .svg 后缀时自动补。
  • 没有位图截图 API:引擎当前不提供 PNG / 位图截图;且 WebGL 画布未开启 preserveDrawingBuffer(不可配置),渲染帧提交后绘制缓冲即失效,直接对 canvas 调 toBlob 通常得到空白。可行的替代路径:线条风格位图可把 toSvg() 的输出光栅化得到(SVG → Image → 2D canvas → toBlob);带着色的实渲位图当前无法从引擎导出,只能依赖浏览器级截屏或等待后续版本提供。

相关 API ​