LeaferJS – 好用的Canvas引擎

LeaferJS（官网：https://www.leaferjs.com/）是一款专为图形交互与编辑设计的Canvas引擎，官方称其为“AI时代的无限画布引擎”，可用于开发类似Figma、Miro等产品。它支持高效绘图、UI交互、图形编辑等场景，并提供了丰富的API和插件生态。

核心性能

LeaferJS强调高性能，官网展示了基准测试：在2K屏笔记本上，Chrome V143.0环境，创建100万个可交互矩形仅需1.28秒，内存占用320MB；拖拽10万个矩形时帧率可达60帧/秒（对比SVG为4帧/秒）。这些数据表明它适合处理大规模图形场景。

主要功能

• 布局与渲染：支持绝对/相对布局、Flex自动布局、锚点布局，以及局部渲染和分层渲染，提升性能。
• 交互与事件：支持事件捕获、冒泡、穿透，以及手势识别、拖拽、光标管理、视口缩放等。
• 图形编辑：内置基础变换、多选框选、编组、双击进组、锁定、层级管理、文字编辑、标尺吸附等编辑器特性。
• 动画与状态：提供CSS风格过渡、精灵帧动画、路径动画、交互状态等。

适用场景

官网指出，LeaferJS适用于AI无限画布、AI设计工具、图形编辑、小游戏、互动应用、工业可视化、生成图片与短视频等。还列出了案例，如像素跳动（科普动画）、Gzm Design（开源海报设计器）、Nano Banana（AI图像编辑）等。

许可与生态

LeaferJS基于MIT协议，免费开源，核心引擎和基础插件开放。官方提供PxGrow商业插件，用于解决工业级复杂问题。开发者可通过GitHub提交Issue或参与社区。