JavaScript is required

画布拓展内容(#canvas

画布插槽用于放置“跟随画布坐标系变化”的自定义元素。

1. 各平台写法

  • Vue:#canvas
  • React:<RGSlotOnCanvas>
  • Svelte:slot="canvas"

2. 行为模型

  • 内容渲染在画布层。
  • 内容会随画布平移/缩放。
  • 容器左上角对应画布坐标 (0,0)

3. 典型用途

  • 分组框、泳道、圈层等图元
  • 坐标系内网格、辅助背景元素
  • 挂载在图坐标上的业务注释

4. 基础示例

<template #canvas>
  <div class="my-canvas-content" style="position:absolute;top:20px;left:20px;">
    Canvas Content
  </div>
</template>

5. 与 canvas-above 的区别

  • canvas:位于节点/连线下方,可能被遮挡
  • canvas-above:位于节点/连线上方,不会被遮挡

6. 实践建议

  • 统一使用明确定位(absolute + top/left)管理位置。
  • 需要“永远可见”的覆盖内容优先用 canvas-aboveview

7. 下一步阅读