Leafer ​

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

版本号 ​

当前的版本号，默认为 1.0.0-rc.27。

import { version } from 'leafer-ui'

console.log(version)

关键属性 ​

app: App ｜ Leafer ​

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

isApp: boolean ​

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

width: number ​

获取/修改画布宽度。

height: number ​

获取/修改画布高度。

pixelRatio: number ​

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

fill: string ​

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

hittable: boolean ​

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

hitChildren: boolean ​

子元素是否响应交互事件，默认为 true。

config: ILeaferConfig ​

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

canvas: ILeaferCanvas ​

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

获取真实的画布对象:

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 ​

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

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 ​

应用是否运行中。

FPS：number ​

实时渲染帧率，默认为 60 帧。

layoutLocked: boolean ​

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

cursorPoint：IPointData ​

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

clientBounds：IBoundsData ​

当前应用在浏览器窗口中的位置（client 坐标）及宽高。

另可使用 getWorldPointByClient() 方法转换浏览器原生事件坐标到应用中。

视口属性 ​

zoomLayer：Group ​

应用的缩放平移层（viewport 视口）， 默认为 Leafer 自身，可指定子元素。

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

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

静态属性 ​

list: Leafer[] ​

当前创建的所有 Leafer 实例。

关键方法 ​

resize ( size: IScreenSizeData) ​

重置画布大小。

waitInit (item: function, bind?: object ) ​

应用初始化（完成 init 各种管理器）后时执行 item 函数，可通过参数 bind 绑定 item 函数 的 this 对象。

已完成则立即执行。

waitReady ( item: function, bind?: object ) ​

应用准备就绪（完成首次布局）时执行 item 函数，可通过参数 bind 绑定 item 函数 的 this 对象。

已完成则立即执行。

waitViewReady ( item: function, bind?: object ) ​

应用视图准备就绪（完成首次渲染）时执行 item 函数，可通过参数 bind 绑定 item 函数 的 this 对象。

已完成则立即执行。

waitViewCompleted ( item: function, bind?: object ) ​

应用视图加载完成（画布内的图片加载并渲染完成）时执行 item 函数，可通过参数 bind 绑定 item 函数 的 this 对象。

已完成则立即执行。

forceRender ( bounds?: IBoundsData ) ​

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

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

updateCursor ( cursor?: ICursorType ) ​

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

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

start ( ) ​

启动/重启应用。

import { Leafer } from 'leafer-ui'

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

// async create leafs ...

leafer.start()

stop ( ) ​

停止应用。

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

clear ( ) ​

清空所有子元素（移除 + 销毁）。

destroy ( ) ​

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

辅助方法 ​

getWorldPointByClient ( clientPoint: IClientPointData, update?: boolean ):IPointData ​

获取在应用中的 世界坐标（传入一个浏览器窗口的 client 坐标 转换），update 表示是否强制更新画布的 clientBounds（一般会自动更新）。

可用于转换浏览器原生事件坐标（自带 clientX / clientY 坐标属性）到应用中。

interface IClientPointData {
  clientX: number
  clientY: number
}

布局方法 ​

lockLayout ( ) ​

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

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

unlockLayout ( ) ​

示例 ​

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

leafer.lockLayout()

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

leafer.unlockLayout()

配置 ​

应用配置 ​

视口 ​

视窗交互 ​

监听事件 ​

LeaferEvent ​

ChildEvent ​

PropertyEvent ​

WatchEvent ​

LayoutEvent ​

RenderEvent ​

KeyEvent ​

ResizeEvent ​

继承 ​

Group ​

示例 ​

监听浏览器 unload 事件自动销毁 ​

import { ImageManager, Leafer } from 'leafer-ui'

// chrome 刷新页面时不会销毁实例，需要主动销毁
window.addEventListener('unload', () => {
    const { list } = Leafer
    list.forEach(leafer => (leafer as Leafer).destroy(true))
    list.destroy()
    ImageManager.destroy()
})

API ​

Leafer ​