Group
创建 Group。用于将元素进行打组,自身没有样式,可以不断嵌套。
实际宽高随子元素变化,不能设置,可以通过 bounds 获取实际宽高信息。
关键属性
children: UI
[]
子元素。
辅助属性
zIndex: number
子元素可以通过设置 zIndex 控制自身在 父 Group 中的层叠顺序, 默认为 0。
关键方法
add ( child: UI
)
添加子元素。
remove ( child: UI
,destroy?: boolean
)
移除指定的子元素, destroy 为是否同时销毁移除的子元素。
remove ( )
移除当前元素。
destroy ( )
移除 + 销毁当前元素,同时会销毁所有子元素。
辅助方法
addAt ( child: UI
, index: number
)
在指定位置添加子元素。
addBefore ( child: UI
, before: UI
)
在指定元素前面添加子元素。
addAfter ( child: UI
, after: UI
)
在指定元素后面添加子元素。
clone ( ):UI
克隆当前元素。
批量操作
addMany ( child: UI
, childUI
, ... )
添加多个子元素。
clear ( )
清空所有子元素(移除 + 销毁)。
继承
UI
API
Group
示例
通过 add 方法添加
ts
import { Leafer, Group, Rect, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 200,
height: 200,
fill: '#32cd79',
draggable: true
})
const ellipse = new Ellipse({
x: 50,
y: 50,
width: 100,
height: 100,
innerRadius: 0.5,
fill: "white"
})
const group = new Group({
x: 100,
y: 100
})
group.add(rect)
group.add(ellipse)
leafer.add(group)
通过 children 属性添加
ts
import { Leafer, Group, Rect, Ellipse } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
width: 200,
height: 200,
fill: '#32cd79',
draggable: true
})
const ellipse = new Ellipse({
x: 50,
y: 50,
width: 100,
height: 100,
innerRadius: 0.5,
fill: "white"
})
const group = new Group({
x: 100,
y: 100,
children: [rect, ellipse]
})
leafer.add(group)