FMB Viewer

Appearance

<fmb-label-overlay> ​

序号标签呈现层——把 viewer.labels 里的编号气泡与引线画到画布上。

这是一个只读组件:只画不改。标签是视图内容的一部分——作者在编辑器里给零件编了号,看视图的人就该看见它们。拖拽、改号这类编辑交互留在编辑器侧,本组件的 pointer-events 全关,不会挡住旋转与拾取。

最小用法 ​

html
<fmb-viewer-context id="ctx">
  <div class="viewport" style="position: relative">
    <canvas id="canvas"></canvas>
    <fmb-label-overlay></fmb-label-overlay>
  </div>
</fmb-viewer-context>

接线只有 viewer 一件事(经 context 自动注入)。有标签就画,没有就完全静默。

属性 ​

名称类型property / attribute默认值说明
viewerViewer | undefined仅 property(attribute: false)undefined通常经 <fmb-viewer-context> 注入

事件 ​

无。组件不接受交互。

行为细节 ​

  • 每帧投影:标签的气泡落点存的是归一化 0..1 坐标、引线锚点存的是零件局部坐标,组件每帧把它们投影成像素,所以气泡与引线跟着相机走、跟着被挪动的零件走。
  • 有标签才跑 rAF:标签集为空时组件完全静默,不占用帧预算;labels-changed 事件驱动重新同步。
  • 绘制用 SVG:气泡形状(圆 / 方 / 六边形)、引线走向(直线 / 折线)、端点(圆点 / 箭头 / 无)按 LabelStyle 渲染,矢量缩放不糊。
  • 背面隐藏:锚点跑到相机背后时引线自动隐藏,不会画出穿到屏幕另一侧的线。
  • 定位::host 自带 position: absolute; inset: 0; z-index: 12; pointer-events: none,须放在 position: relative 的视口容器内。
  • hidden 生效::host([hidden]) { display: none } 已内置,需要临时藏起标签层直接设 hidden。

可定制点 ​

气泡底色 / 描边 / 文字与引线颜色走 --fmb-surface、--fmb-border-strong、--fmb-fg-1 令牌。形状与引线样式不是 CSS 变量,而是 viewer.labels.setStyle() 的数据——它属于视图内容,要随视图存盘。全表见主题定制。

相关 ​