【SDU Chart Team - Core】画布层次结构

画布层次结构

画布的层次结构主要需要基于SVG的层次结构，但相比纯树形结构，做出了一些简化。

二级层次结构

画布

最外层的<svg>表示画布，元素的坐标系也就是画布坐标系；关于画布的扩展、视角的移动缩放也都基于这个元素。

为了方便管理，引入一系列组元素作为其第二级的结构，这些结构被称为域，拥有明确的分工。

预定义域

定义了一些需要预渲染的内容，其中的内容参与到部分组件的绘制，，是一个组元素<defs>。这些内容包括任何SVG元素，主要有表现箭头的<marker>、表现渐变的<linearGradient>和<radialGradient>、滤镜<filter>等。

这些预定义元素内部的树形结构任意，但在预定域内是并列的集合关系。

组件图形域

实际绘制组件的区域，是一个组元素<g>。里面的组件在组件图形域内是列表关系。列表的排列顺序决定了组件的绘制层级：绘制靠前的组件被组织在尾部，绘制靠后的组件被组织在头部。

组件最外层是<g>，这个元素用于处理旋转。<g>的内部是各种图形元素，可以呈现图形，用于处理形状和位置。这些图形元素可以是树形结构的。

前端域

前端独立管理的区域，是多个组元素<g>，每个都有各自的作用。其中的内容为UI相关装饰性内容，如轮廓、关键点的显示、锚点的显示等等。后端只提供初始化，并保证不参与对这些区域的管理。

绘制层级

上述层次结构中各部分的顺序体现了它们在绘制中的层级关系。

顺序靠前的处于绘制层级的底层。其中组件图形域还可以细分：组件列表的排列顺序决定了组件的绘制层级。