App
创建 App 应用（可选），了解初始化 应用配置、视窗交互。
负责组织多个 Leafer 实例 分层 协同工作，提高渲染性能，同时继承 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 })
快速创建
ts
import { App, Rect } from 'leafer-ui'
const app = new App({ view: window })