Skip to content

包围盒(边界模型)

图中是基于元素 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 来探索产品开发了~


可继续阅读

🍉 了解应用、元素、属性方法、事件、类库的使用。

🍊 了解让你事半功倍的官方、社区 插件

在前端环境中使用

Vue

React

在服务端渲染中使用

Nuxt.js

VitePress

Next.js

Released under the MIT License.