Skip to content

边界模型

图中是基于内部坐标系由内到外形成的边界。

盒子模型

边界类型

content

内容边界: 填充内容的边界,不包含 padding,一般用于Text

box

基准边界: 包含 padding,以此为基准向内、向外延伸边界。

stroke

笔触边界: 基准边界 + stroke,可响应交互事件的边界。

margin

外部边界: 基准边界 + margin。

render

渲染边界: 笔触边界 + 阴影等。

坐标系边界

内部坐标系边界

以元素自身为起点(0,0),由元素的宽高、路径形成的内部边界。

已提供了 获取属性获取方法,type 参数传入边界类型,relative 参数传入内部坐标系 inner 即可获取。

本地坐标系边界

以父元素为起点(0,0),将内部边界与 localTransform 相乘而来,会受元素的 x、y、scaleX、scaleY、rotation 影响。

已提供了获取方法,type 参数传入边界类型,relative 参数传入本地坐标系 local 即可获取。

世界坐标系边界

以画布左上角为起点(0,0),将内部边界与 worldTransform 相乘而来,会受元素及中间层级元素的 x、y、scaleX、scaleY、rotation 影响。

已提供了 获取属性获取方法,type 参数传入边界类型,relative 参数传入世界坐标系 world 即可获取。

应用场景

bounds

下一步

渲染周期

Released under the MIT License.