创建应用

应用默认自带窗口交互功能。

创建自动布局的应用

当画布的父节点尺寸改变后会自动 resize， 了解自动布局。

import { Leafer } from 'leafer-ui'

const leafer = new Leafer({ view: window })

// 等同于 { view: window, top:0, right: 0, bottom: 0, left: 0 }

创建固定宽高的应用

import { Leafer } from 'leafer-ui'

const leafer = new Leafer({
  view: 'id', // 支持 window 、div、canvas 标签， 可使用id字符串
  width: 600,
  height: 600,
})

创建多层结构的应用

将不同更新频率的内容进行分层渲染，可以大大提高性能。

addLeafer() 会复制、覆盖 App 的配置。

import { App } from 'leafer-ui'

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

const background = app.addLeafer({ hittable: false, usePartRender: false }) // 背景层，用于绘制网格等
const leafer = app.addLeafer() // 内容层
const stroke = app.addLeafer({ hittable: false }) // 描边层，用于绘制经常变化的hover、select描边效果

// hittable: 是否响应碰撞事件（交互事件）
// usePartRender: 是否开启局部渲染