包围盒(边界模型)
图中是基于元素 box 坐标系 由内到外形成的各种包围盒(边界)。
边界类型
content
内容边界: 填充内容的边界,不包含 padding,一般用于Text 。
box
基准边界: 包含 padding,以此为基准向内、向外延伸边界。
stroke
笔触边界: 基准边界 + stroke,可响应交互事件的边界。
margin
外部边界: 基准边界 + margin。
render
渲染边界: 笔触边界 + 阴影等。
坐标系边界
内部坐标系边界
以元素自身为起点(0,0),由元素的宽高、路径形成的内部边界。
本地坐标系边界
以父元素为起点(0,0),将内部边界与 localTransform 相乘而来,会受元素的 x、y、scaleX、scaleY、rotation 影响。
已提供了获取方法。
世界坐标系边界
以画布左上角为起点(0,0),将内部边界与 worldTransform 相乘而来,会受元素及中间层级元素的 x、y、scaleX、scaleY、rotation 影响。
应用示例
bounds
恭喜 🎉
你已完成快速入门知识的学习,可以开始用 LeaferJS 来探索产品开发了~
可继续阅读
🍉 了解应用、元素、属性方法、事件、类库的使用。
🍊 了解让你事半功倍的官方、社区 插件。