局部渲染

引擎通过局部渲染来提高画布重绘的效率，当页面中有数万个元素的时候，只更新变化的区域。

变化前和变化后的元素 渲染边界（包围盒） 组成了变化区域。

关闭局部渲染

当无法判断元素包围盒，如编辑框、背景网格的 Leafer 层，这个时候可以关闭局部渲染。

App

// #应用与引擎配置 - 关闭局部渲染 [App]
import { App, Rect, Debug } from 'leafer-ui'

const app = new App({
    view: window,
    tree: { usePartRender: false }
})

Debug.showRepaint = true

app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

Leafer

// #应用与引擎配置 - 关闭局部渲染 [Leafer]
import { Leafer, Rect, Debug } from 'leafer-ui'

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

Debug.showRepaint = true

leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

关闭局部布局

当场景中的大部分元素都为动态元素时，可以关闭局部布局，防止大量收集元素变化影响性能。

如这种场景：https://benchmark.leaferjs.com/leafer/?scene=dynamic

App

// #应用与引擎配置 - 关闭局部布局 [App]
import { App, Rect, Debug } from 'leafer-ui'

const app = new App({
    view: window,
    tree: { usePartLayout: false }
})

Debug.showRepaint = true

app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

Leafer

// #应用与引擎配置 - 关闭局部布局 [Leafer]
import { Leafer, Rect, Debug } from 'leafer-ui'

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

Debug.showRepaint = true

leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

下一步

接下来将带你了解几个重要的 生命周期，就算完成入门的学习了。

生命周期

在前端环境中使用

Vue

React

在服务端渲染中使用

Nuxt.js

VitePress

Next.js