分享我自己开发的 LeaferJS：开源、性能强悍的 2D 图形库

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 530 天前的主题，其中的信息可能已经有所发展或是发生改变。

感谢之前朋友 @superliwei 在这里帮我分享过一次，得到了挺多 star, 我自己再来分享一下完整版~

另外一件值得高兴的事分享给大家：今天突然用户告诉我，LeaferJS 被 [开源中国] 首页置顶推荐了，我一看还真是，感动的连平时不太发朋友圈的我也发了一条表示感谢，也许是默默 2 年的耕耘终于有懂的人看到了吧。

网站封面

我们非常高兴地向大家宣布，历时 2 年开发的 LeaferJS 引擎正式面世！

欢迎来到 LeaferJS 的世界，一个激发创造力、开启无限可能的引擎！在这里，数字化产品开发不再是一项艰难的任务，而是一个令人愉悦的探索之旅。感谢所有参与其中、提供支持的小伙伴们，正是因为你们的协助，我们才能够骄傲的向大家呈现出这款与众不同的图形渲染引擎。

应用场景

LeaferJS 是一款绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎，具备瞬间创建 100 万个图形的超强能力，可结合 AI 进行绘图，生成界面。同时，LeaferJS 还为跨平台开发提供了统一而丰富的交互事件，马上会支持小程序、Node.js 。

LeaferJS 提供了一项全新的服务，你可以利用它开发与绘图、UI 界面相关的任何技术和产品。它提供了开箱即用的功能，能帮助你快速开发在线图形、图像、文字等数字化产品，不论是 Photoshop 、Figma 、Miro 、InVision 、Canva 、Notion 还是 Webflow 的类似产品，LeaferJS 都能满足你的需求，应用场景相当丰富！

包括但不限于以下应用场景：

在线设计和在线白板工具
在线图形编辑器和创作工具
在线文档浏览和创作工具
数据可视化和图表绘制工具
网站和应用程序的界面开发
无代码平台的界面生成工具
制作互动游戏和动画效果

最重要的是，LeaferJS 完全免费开源，而且易学易用，让你可以快速掌握它的强大功能。

核心优势

极速创建，百万级图形

LeaferJS 引擎突破了行业常规，实现了百万级图形的运行能力。创建速度更是惊人，短短的 1.5 秒内，可以创建出 100 万个可交互矩形，相比同类引擎，LeaferJS 具备了 10 倍以上的创建速度提升，甚至远远超越了 HTML5 本身。

创建速度对比

正如马斯克超级高铁计划将高铁速度推向新境界一样，LeaferJS 引擎突破了图形行业的速度极限，为开发者创造出惊人的图形效果提供了无限可能。

极致性能，极低资源占用

LeaferJS 追求极致的性能。创建 100 万个可交互的矩形仅占用 350MB 内存，远低于同类引擎。此外，LeaferJS 的代码量极少，经过 gzip 压缩后仅为 42KB ，是同类引擎中最为精简的之一。

内存占用对比

丰富表现力，简洁易用的 API

LeaferJS 引擎拥有丰富的表现力，包括各种渐变、图案填充、内外阴影、模糊、遮罩、裁剪、路径转换等特性。我们经过反复推敲和打磨，提供了简洁易用的 API ，让开发者能够用最少的代码实现功能。

完善的文档，持续进化

我们为 LeaferJS 提供了易于学习和使用的文档，每个重要功能都有详细的代码示例和显示效果。我们致力于保证产品主要功能的稳定性，并已经进行了全面的自动化测试工作。虽然 LeaferJS 仍在不断进化中，但我们相信它已经具备了启动你的项目的能力。

使命与愿景

我们致力于通过 LeaferJS 实现一套简洁、开放、现代化的 UI 绘图语言标准，为数字化产品开发提供跨平台、轻量化、高性能的运行时。我们希望不同的软件之间能够沟通、协作、共享绘图数据与数字界面，通过不断革新的图形技术和配套支持，吸引更多的开发者加入使用，建立起一个开放的生态环境，沟通有无，以推动行业的快速发展，并诞生出更多有创意的技术和产品。