Skip to content

Leafer

创建 Leafer 应用,了解初始化 应用配置视窗交互

关键属性

app: App | Leafer

App 实例, 如果不存在则是自身。

isApp: boolean

是否为 App 实例, 默认为 false。

width: number

获取/修改画布宽度。

height: number

获取/修改画布高度。

pixelRatio: number

获取/修改画布像素比, 默认使用当前设备像素比(普通屏为 1,高清屏为 2,超高清屏为 3)。

fill: string

获取/修改画布背景颜色。

hittable: boolean

获取/修改是否响应交互事件,默认为 true。

config: ILeaferConfig

应用的配置对象,部分配置运行中可以修改,立即生效。

canvas: ILeaferCanvas

可以适配不同平台的画布封装对象。

获取真实的画布对象:

ts
import { Leafer } from 'leafer-ui'

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

const canvas = leafer.canvas.view
const context = leafer.canvas.context

console.log('canvas', canvas) // HTMLCanvasElement
console.log('2d context', context) // CanvasRenderingContext2D

状态属性

created: boolean

应用及子元素创建完成(完成首次创建)。

ready: boolean

应用是否准备就绪(完成首次布局)。

viewReady: boolean

应用视图是否准备就绪(完成首次渲染)。

ts
import { Leafer, LeaferEvent } from 'leafer-ui'

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

leafer.on(LeaferEvent.READY, function () {
    // 应用准备就绪
})

leafer.on(LeaferEvent.VIEW_READY, function () {
    // 视图准备就绪
})

viewCompleted: boolean

应用视图加载完成(画布内的图片加载并渲染完成),会随时会变化。

running: boolean

应用是否运行中。

layoutLocked: boolean

布局是否锁定, 可通过 unlockLayout() 解锁。

cursorPoint:IPointData

当前光标的位置 - 世界坐标

辅助属性

zoomLayer:Group

应用的缩放平移层, 默认为 Leafer 自身,可指定子元素。

关键方法

resize ( size: IScreenSizeData)

重置画布大小。

waitReady ( item: function )

应用准备就绪(完成首次布局)时执行 item 函数。

已完成则立即执行。

waitViewReady ( item: function )

应用视图准备就绪(完成首次渲染)时执行 item 函数。

已完成则立即执行。

waitViewCompleted ( item: function )

应用视图加载完成(画布内的图片加载并渲染完成)时执行 item 函数。

已完成则立即执行。

forceRender ( bounds?: IBoundsData )

强制渲染,默认重渲染整个画布。

支持传入一个 bounds 进行局部重渲染, 可以打开 显示重绘区域 查看重绘情况。

updateCursor ( cursor?: ICursorType )

更新光标样式,默认更新当前 hover 元素的 cursor 样式 (注意按下鼠标后的光标样式会始终保持,直到抬起鼠标)。

可传入 cursor 样式直接设置,不过后续 hover 操作仍会被覆盖此样式,建议设置在元素上。

start ( )

启动/重启应用。

ts
import { Leafer } from 'leafer-ui'

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

// async create leafs ...

leafer.start()

stop ( )

停止应用。

将停止渲染、布局,仍会收集元素变化数据待用,可通过 start() 重启。

clear ( )

清空所有子元素(移除 + 销毁)。

destroy ( )

销毁应用,不会立即执行,采用异步销毁。

布局方法

lockLayout ( )

锁定布局, 锁定前会自动 updateLayout() 一次。

锁定后,元素的数据变化会暂时收集,但不会更新布局,等待解锁后再进行更新。

TIP

可通过 layoutLocked 检查是否锁定。

unlockLayout ( )

解锁布局。

示例

通过锁定可以避免多次重复布局,列表越大,性能优化效果越明显。

ts
leafer.lockLayout()

list.forEach((target) => {
  // 拦截多次布局: rotateOf会产生布局数据修改,getInnerPoint发现布局有变化,会再请求布局
  target.rotateOf(target.getInnerPoint(worldOrigin), rotation)
})

leafer.unlockLayout()

监听事件

LeaferEvent

ChildEvent

PropertyEvent

WatchEvent

LayoutEvent

RenderEvent

KeyEvent

ResizeEvent

继承

Group

API

Leafer

Released under the MIT License.