一、说说这件事

你们有没有遇到过PPT里一堆图形叠在一起，点进去点不到哪儿，页面就卡住的情况？ 那不是我说的，我亲身经历过。 我给同事们Zuo演示时那个“图形太多卡壳”的问题成了我们讨论的热点。 后来我瞄了一眼网上的各种解决方案——SVG、Canvas、WebGL——但dou不是那么合适。 于是我决定自己搞一个专门针对 1 万个图形的国产 2D 引擎。

其实这东西不算新，它根本就是把老技术搬上现代化的架构。 就像把你家老旧电视改装成智Neng机，只不过这个“电视”是渲染层。

咱就是说把画布拆成几层：背景层、静态层、动态层。 背景层永远不会变；静态层里装几百个装饰性图形；动态层才是真正可拖拽或交互的对象。

然后用脏矩形策略：只重绘那些变化了的小块，而不是整个画面。

import { Leafer, Rect, Group } from 'leafer-ui'
const app = new Leafer
const bgLayer = new Group
bgLayer.add)
app.add
const staticLayer = new Group
for  {
  staticLayer.add)
}
app.add
const dynamicLayer = new Group
const dragRect = new Rect
dynamicLayer.add
app.add

kan，这样写，放上万级图形也Neng保持60fps。

LeaferJS 的底层还是 Canvas 2D API，但它通过分层和脏矩形大幅优化了重绘次数。 对比手写原生代码，你会发现：

#1：分离静态与动态

#2：只geng新需要刷新的区域

为什么百度不收录？

A：因为这篇文章太专业啦，关键词太少，又没有外链。 要想让搜索引擎抓取到，就得多写点通俗易懂的内容，再加上社交媒体转发。不用担心，我帮你调好 SEO 基础：

Slogan 简洁易记。

META 描述友好。

BUT 别忘了Ru果你在Zuo白板、大屏展示或者网络拓扑图，千万别再用普通 Canvas 一次性渲染所有节点。 LeaferJS Yi经在一些大型项目里跑过不光是 Demo，而是真正上线商用版本 v1.x。

A：有啊！官方有钉钉群和微信群，回复速度比国外库快不少。 B：你Ke以把自己的案例贴进去，那边有人会给你反馈和建议。咱说实话，多交流才是王道。

Ru果你觉得我又啰嗦又跳跃，那正是我的风格。毕竟技术讨论Zui怕的是条条框框，而我们要的是自由发挥。

LeaferJS 在“图形编辑Neng力”和“渲染性Neng”之间找到了一个不错的平衡点，同时包体积Zui小，让你的 PPT 或者白板跑得geng顺畅。

Ru果这篇文章帮到了你，就点赞转发吧！也欢迎在评论区分享你的经验和遇到的问题。我可是一直在等着听大家聊聊 Canvas 性Neng优化呢！ 😄 PS：记得留个空格，让后面插入geng多精彩内容~ 哈哈，说实话，下次再来聊聊 WebGL 的可Neng性吧！