Skip to content

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)

Released under the MIT License.