渲染程序概念

在开始构建自定义渲染程序之前,了解构成渲染程序的不同组件以及块如何拆分为行和元素会很有帮助。

渲染程序组件

渲染程序由几个不同的组件组成。每个组件都有一个唯一的作业,以最大限度地提高代码重用和可扩展性。

渲染程序

渲染程序是一个工厂类,用于将所有其他组件捆绑在一起。

常量提供程序

常量提供程序是所有其他组件使用的一系列数字和形状,以及内置字段。

渲染信息

渲染信息会根据块的定义决定该块的布局方式,然后创建可测量值和有关块的数据的集合,供抽屉用于创建 SVG 路径。

路径对象

path 对象包含位于 dom 中且构成块的 SVG 元素。

抽屉式导航栏

抽屉式导航栏(如“one-who-draws”中所示)会根据渲染信息构建 SVG 路径,并将其应用于路径对象

屏蔽可衡量项

可衡量元素是一个矩形,表示某个块的区域。可衡量值是指“渲染信息”用于定义代码块布局的内容。

一些可衡量的内容还包括额外数据(例如它们所表示的视觉元素)或渲染信息可用于确定如何布局块的辅助方法。

不同的渲染程序可能会创建自定义测量结果来更改这些数据或辅助方法。

行是元素元素分隔符的水平集合。

一个重复块,其中各行被勾勒出去。

行分隔符

行分隔符是指两行之间的空白垂直空间。

重复块,其中行分隔符以蓝色突出显示

元素

元素表示块上的可视内容。包括字段图标、连接等。

包含轮廓元素的重复块

元素分隔符

元素分隔符是一行元素之间的空白空间。

一个重复块,其中元素间隔条以粉色突出显示