Leafer UI

Appearance

App ​

创建 App 应用（可选），了解初始化 应用配置、视窗交互。

负责组织多个 Leafer 实例 分层 协同工作，提高渲染性能，同时继承 Leafer 的部分功能和事件。

TIP

此时 Leafer 相当于一个子 Group 元素，交互事件可以在多个 Leafer 间穿透。

注意: App 不接收子元素的数据变化事件，请在对应的 Leafer 实例上监听。

关键属性 ​

isApp: boolean ​

是否为 App 实例， 默认为 true 。

children: Leafer[] ​

Leafer 实例的子对象。

多层属性 ​

为了方便大家记忆、统一结构，我们采用现实世界的方式为不同层进行命名， 支持 自动创建。

ground?: Leafer ​

地面层（背景层）。

位于最底部的 Leafer 实例，一般用于渲染背景内容。

tree: Leafer ​

树结构（内容层）。

位于中间的 Leafer 实例。

sky: Leafer ​

天空层 (变化层)。

位于最顶部的 Leafer 实例，一般用来渲染频繁变化的动画、交互线框、编辑器等。

当然你也可以在这个基础上增加自定义层。

预留属性 ​

editor: IEditor ​

图形编辑器实例，需安装 图形编辑器 。

视口属性 ​

zoomLayer：Group ​

应用的缩放平移层（viewport 视口）， 默认使用 app.tree.zoomLayer 作为缩放平移层。

可以手动修改它的 x、y、scale、scaleX、scaleY 属性进行缩放平移视图。

通过 视图插件 / 滚动条插件 可以便捷控制视图，支持 fit 视图、聚集到指定元素。

关键方法 ​

add ( leafer: Leafer) ​

添加一个 Leafer 实例。

addLeafer ( config?:ILeaferConfig) ​

快速创建并添加一个 Leafer 实例。

配置 ​

应用配置 ​

视口 ​

视窗交互 ​

示例 ​

自动创建 ​

创建 ground、tree、sky 层。

ts
import { App, Rect } from 'leafer-ui'

const app = new App({ 
    view: window,
    ground: { type: 'draw' },
    tree: {},
    sky: { type: 'draw' }
})

const background = new Rect({ width: 800, height: 600, fill: 'gray' })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
const border = new Rect({ x: 200, y: 200, stroke: 'blue', draggable: true })

app.ground.add(background)
app.tree.add(rect)
app.sky.add(border)

只创建 tree、sky 层。

ts
import { App, Rect } from 'leafer-ui'

const app = new App({  
    view: window,
    tree: {},
    sky: { type: 'draw', usePartRender: false }
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
const border = new Rect({ x: 200, y: 200, stroke: 'blue', draggable: true })

app.tree.add(rect)
app.sky.add(border)

原始创建 ​

ts
import { App, Leafer, Rect } from 'leafer-ui'

const app = new App({ view: window }) 

app.ground = new Leafer({ type: 'draw' })
app.tree = new Leafer()
app.sky = new Leafer({ type: 'draw' })

app.add(app.ground)
app.add(app.tree)
app.add(app.sky)

const background = new Rect({ width: 800, height: 600, fill: 'gray' })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
const border = new Rect({ x: 200, y: 200, stroke: 'blue', draggable: true })

app.ground.add(background)
app.tree.add(rect)
app.sky.add(border)

快速创建 ​

ts
import { App, Rect } from 'leafer-ui'

const app = new App({ view: window }) 

app.ground = app.addLeafer({ type: 'draw' })
app.tree = app.addLeafer()
app.sky = app.addLeafer({ type: 'draw' })

const background = new Rect({ width: 800, height: 600, fill: 'gray' })
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
const border = new Rect({ x: 200, y: 200, stroke: 'blue', draggable: true })

app.ground.add(background)
app.tree.add(rect)
app.sky.add(border)

继承 ​

Leafer ​

API ​

App ​

Released under the MIT License.

Copyright © 2023 Chao (Leafer) Wan