Leafer

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

版本号

当前的版本号，默认为 1.0.9。

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

可结合 RenderEvent.END 事件 drawImage() 到另一张小 canvas 上，实现高性能的鸟瞰图。

视口属性（viewport）

zoomLayer：Group

缩放平移视图层， 默认为 Leafer 自身，可 单独指定缩放层。

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

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

状态属性

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() 方法转换浏览器原生事件坐标到应用中。

辅助属性

zIndex: number

App 结构下，可以通过设置 zIndex 控制自身在 App 中的层叠顺序, 默认为 0。

静态属性

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 ( )

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

辅助方法

updateClientBounds ( )

强制更新画布的 clientBounds（一般会自动更新），如 view 使用了 transform 属性移动需要调用此方法手动更新。

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

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

getPagePointByClient ( clientPoint: IClientPointData, update?: boolean ):IPointData

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

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

interface IClientPointData {
  clientX: number
  clientY: number
}

布局方法

lockLayout ( )

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

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

TIP

可通过 layoutLocked 检查是否锁定。

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

示例

单独指定缩放层

默认将 leafer 自身作为平移缩放层(viewport 视口)，可单独指定一个 Group 作为平移缩放层。

import { Leafer, Group, Rect } from 'leafer-ui'

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

const group = new Group() 
leafer.add(group)

leafer.zoomLayer = group

// fixed layer
leafer.add(new Rect({ fill: '#FF4B4B', draggable: true }))

// zoom / move layer
group.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))

监听浏览器 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()
})