局部渲染
应用通过局部渲染来提高画布重绘的效率,当页面中有数万个元素的时候,只更新变化的区域。
计算变化区域
局部渲染计算变化区域依赖于元素的 renderBounds, 至少确保元素是有基础的 boxBounds,针对自定义图形可以重写__updateBoxBounds()
方法定义元素的 boxBounds
。
关闭局部渲染
某些情况下画布区域始终会全部渲染,如白板应用中缩放的背景网格层,每次计算 boxBounds
比较麻烦,这个时候可以关闭局部渲染,省去计算。
ts
import { Leafer, Rect, Debug } from 'leafer-ui'
const leafer = new Leafer({
view: window,
usePartRender: false
})
Debug.showRepaint = true
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)