App 结构
针对在线图形编辑等复杂应用,我们提供了 App 结构, App 负责组织多个 Leafer 实例分层 协同工作 (将不同更新频率的内容进行分层独立渲染),以提高渲染性能。
统一结构
为了方便大家记忆和沟通,我们以现实世界的方式为常用的 Leafer 层进行拟物化命名。
ground?: Leafer
地面层 (背景层),位于最底部的 Leafer 实例,一般用于渲染背景、网格内容(可选)。
tree: Leafer
树结构 (内容层),位于中间的 Leafer 实例。
sky: Leafer
天空层 (变化层),位于最顶部的 Leafer 实例,一般用来渲染频繁变化的动画、编辑器等。
ts
import { App, Rect } from 'leafer-ui'
const app = new App({
view: window,
ground: { type: 'draw' }, // 可选
tree: {},
sky: { type: 'draw', usePartRender: false }
})
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, 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', usePartRender: false })
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', usePartRender: false })
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)
当然你也可以手动创建,完全自定义结构,或在这个基础上增加 自定义层都可以。