基本组成

一张图表主要由:节点和连线组成,通过在画布上添加节点和连线完成。被添加的节点和连线都称为画布上的元素。
1567152286520-8c234edc-ce68-4dd3-9be6-19513705830a (1).png

层:

这里的层,主要是为了提升性能的逻辑层;与ps里的层无关。

1)离屏层:包含所有绘图数据,是最稳定的图层。
2)选中层:选中节点或连线的图层,主要由控制点组成,用于缩放和旋转。
3)动画层:主要用于演示动画。
4)悬浮层:主要用于箭头鼠标交互事件,比如锚点和连线过程。

节点:

由 边框、文本、图标等 组成。
边框上有:

  • 锚点 - 节点之间连线的起始点

    1. ![image.png](https://cdn.nlark.com/yuque/0/2019/png/179380/1567153475802-b7ce74f2-3393-4f1d-9da0-2edd1b07b38b.png#height=324&id=ZBVhR&name=image.png&originHeight=405&originWidth=365&originalType=binary&ratio=1&size=32802&status=done&style=none&width=292)

    连线:

    由起点、终点、起点箭头和终点箭头组成。
    连线有:贝塞尔曲线、多段折线、直线、脑图曲线4种类型。

    属性

    节点、连线所拥有的绘画属性和自定义数据。

image.png

画布坐标系

2D坐标轴

同canvas原生的坐标轴。
image.png

3D坐标轴

image.png