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.