基本概念

本文梳理编辑器中的核心概念，便于快速建立统一的理解与使用方式。

图纸

• 项目中的一个工作页，承载一张完整的可视化页面。

• 图纸承载了所有图元、数据、动画、事件、通信等所有绘画数据和业务数据。

• 每一个图纸为一个独立的json文件。可以很方便的导入导出，分发与显示。

  

画布

• 进行绘制与布局的区域，所有图元均位于画布之上。

• 支持缩放、平移、对齐；可设置背景色/背景图、宽高可自由设置。

• 坐标系以画布左上角为原点，单位与缩放比例关联。

  

图元

• 又称画笔Pen。图形表达的基本元素，组成图像的基本单元。
• 画布上的基本对象，包含基础图形、图片、组件、ECharts 图表等。
• 通用属性：位置（x/y）、尺寸（宽/高）、旋转、层级与样式。
• 行为扩展：数据绑定、事件动作、状态切换与动画。

构成

每一个图元由ID、名字、类型、属性（数据）组成。

ID

名为“id”的特殊属性，图元实例（画布上的图元对象）的唯一标识。拖拽到画布或创建一个图元对象时，自动生成。

名字

名为“name”的特殊属性，用于区分不同的图形。例如正方形、圆、连线、开关、报警灯等。

名字

名为“type”的特殊属性，用于区分节点node和连线line。

• 节点 - 没有轨迹的普通图形，具有逐帧动画。

• 连线 - 包含起点终点的轨迹线条，只有轨迹动画，没有逐帧动画。

属性

• 通用属性 - 内置的通用规则属性，常用通用属性有： id，name，type，rect，text，anchors、color、background等。
• 自定义数据 - 图元自身独有数据，用于显示或业务逻辑。可以任意添加自定义数据。

区域

每个图元需要有一个宽高不为0的区域，即x,y,width,height

交互事件

仅当画布锁定后，触发事件。否则，干扰编辑。更多请参考事件交互。

锚点

• 图元上的连接/控制点，用于连线吸附、对齐或路径编辑。
• 选中图元后显示，可自定义锚点位置与数量以满足连接需求。
• 连线与管道等元素会优先吸附锚点，保证连接的稳定与美观。

铅笔

• 自由绘制工具，用于快速勾勒路径与不规则形状。

• 支持平滑/简化、闭合路径与后续节点编辑，可转换为管道或其他路径类图元。

• 适合手绘流程、勾勒轮廓与快速原型。

  

标尺

• 画布边缘的刻度标尺，辅助感知尺寸与位置。
• 可配合参考线使用，拖拽即可创建/移动参考线，提升布局精度。
• 与画布缩放联动，刻度实时映射实际尺寸。

网格

• 画布背景网格，用于对齐与布局参照。
• 可设置网格间距、颜色与是否吸附；建议在精细布局时开启吸附提升一致性。
• 与标尺/参考线配合，实现高精度排版。

数据

SceneV是由数据驱动显示的。图纸和图元支持任意数据。

• 指图元可绑定的数据源与字段，通过数据驱动内容与样式变化。
• 支持静态数据、实时数据与字段映射，常见用于文本数值、颜色、可见性等属性。
• 详细绑定方法可参考数据接入文档中的数据绑定。

内置属性

基于“约定优于配置”原则，Meta2d.js引擎会有一些内置属性名，例如id表示唯一标识、name表示图元名称、text表示文本、color表示颜色等。 内置属性有固定含义，影响显示效果。不同的图元，或全部支持或部分支持内置属性，取决于图元自身定义。推荐自定义图形库时，保持内置属性的规范性。

业务数据

又叫自定义数据。非内置属性以外的属性数据，我们定义为业务数据。业务数据可能不会显示，主要用于业务数据存储或参与业务条件计算。

进度

任意封闭图元，都有进度。例如：矩形、圆、svg、封闭连线、进度容器等

鹰眼地图

• 画布整体的缩略图（总览），用于快速定位与导航。

• 通过拖拽视口框定位到目标区域，适合在超大画布中快速移动与查找元素。

• 显示当前视口范围，便于把控全局布局。

  

放大镜

• 局部放大查看工具，便于检查细节与进行微调。

• 常配合缩放/平移快捷键使用；可在高倍缩放下对齐锚点、精确修改样式。

• 适合在像素级或细节密集区域进行操作。

  

右键菜单

鼠标右键或平板三指触摸显示右键菜单。更多请参考右键菜单

快捷键

鼠标右键或平板三指触摸显示右键菜单。更多请参考快捷键