Skip to content

渲染周期

从创建元素到完成渲染会经历数据变化、请求渲染、布局、渲染等一系列过程,从而形成一次完整的渲染生命周期。


生命周期


示例

生命周期中的不同状态会通过 ChildEventPropertyEventWatchEventLayoutEventRenderEvent等事件进行通知,你也可以通过 Leafer 实例监听这些事件实现自己的产品逻辑。

监听渲染事件

ts
import { Leafer, Rect, RenderEvent } from 'leafer-ui'

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

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(RenderEvent.BEFORE, function () {
    // render before (Layout has ended)
})

下一步

坐标体系

Released under the MIT License.