Group
创建 Group。用于组合多个子元素,自身没有填充/描边样式,可以定位、不断嵌套。
实际宽高随子元素变化,不能设置,可以通过 bounds 获取实际宽高信息。
关键属性
children: UI
[]
子元素。
辅助属性
zIndex: number
子元素可以通过设置 zIndex 控制自身在 父 Group 中的层叠顺序, 默认为 0。
关键方法
add ( child: UI
| UI
[])
添加子元素,可同时添加多个子元素 add ( [child, child, ...] )。
remove ( child: UI
,destroy?: boolean
)
移除指定的子元素, destroy 为是否同时销毁移除的子元素。
remove ( )
移除当前元素。
destroy ( )
移除 + 销毁当前元素,同时会销毁所有子元素。
辅助方法
addAt ( child: UI
| UI
[], index: number
)
添加子元素在指定位置。
addBefore ( child: UI
| UI
[], before: UI
)
添加子元素在指定的元素前面。
addAfter ( child: UI
| UI
[], after: UI
)
添加子元素在指定的元素后面。
clone ( ):UI
克隆当前元素。
批量操作
addMany ( child: UI
, childUI
, ... )
添加多个子元素,推荐使用 add ( [child, child, ...] ) 代替。
clear ( )
清空所有子元素(移除 + 销毁)。
继承
UI
示例
通过 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)
使用 tag 对象创建
ts
import { Leafer } from 'leafer-ui'
const leafer = new Leafer({ view: window })
leafer.add({
tag: 'Rect', // 必须要有类名tag
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79'
})
使用条件移除
支持所有 find() 条件参数 。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = Rect.one({ id: 'book', fill: '#32cd79' }, 100, 100, 200, 200)
const rect2 = Rect.one({ fill: 'blue' }, 300, 100, 200, 200)
leafer.addMany(rect, rect2)
setTimeout(() => {
// 移除 id 为 book 的元素
leafer.remove('#book') // 等同于 leafer.find('#book').forEach(item => item.remove())
}, 2000)