画布拓展内容(#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-above或view。