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 方法添加

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 属性添加

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 对象创建

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() 条件参数 。

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)