V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
LeaferJS
V2EX  ›  分享创造

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

  •  
  •   LeaferJS · 2023-07-11 19:19:09 +08:00 · 1048 次点击
    这是一个创建于 497 天前的主题,其中的信息可能已经有所发展或是发生改变。

    感谢之前朋友 @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 都能满足你的需求,应用场景相当丰富!

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

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

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

    核心优势

    极速创建,百万级图形

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

    创建速度对比

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

    极致性能,极低资源占用

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

    内存占用对比

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

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

    功能

    完善的文档,持续进化

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

    功能

    使命与愿景

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

    我们的热情,让一切成为可能

    LeaferJS 的诞生并非一帆风顺。在开发过程中,我们面临了诸多技术挑战,付出了巨大的代价,并多次徘徊在失败的边缘。然而,正是我们对图形行业的热爱和对使命的追求,推动我们不断向前探索,克服重重困难,战胜一个又一个挑战。最终,我们成功地将 LeaferJS 引擎带到了大家面前。

    开启创意之旅

    现在,你可以借助 LeaferJS 引擎开启你的创意之旅了! LeaferJS 的发布不仅仅是一个引擎的诞生,更是一个激动人心的时刻。我们相信,通过 LeaferJS ,你将拥有超越想象的创作能力,并为数字化产品开发带来全新的可能性。

    让我们一起开创一个充满创意和创新的未来,让 LeaferJS 成为你创造美好数字世界的重要伙伴!

    请访问我们的官方网站,了解更多关于 LeaferJS 的信息,并体验其卓越的性能。

    www.leaferjs.com

    5 条回复    2023-10-10 15:02:20 +08:00
    wqnmlgbzml
        1
    wqnmlgbzml  
       2023-07-12 11:07:52 +08:00
    不错不错,虽然我自己也写了一个 canvas 绘图小库,可也仅仅是自己在用,不敢公开出来,主要是写得太烂了哈。
    Linvas
        2
    Linvas  
       2023-07-12 13:26:50 +08:00
    弄用于地图吗?接入 openstreetmap 或者 geoserver 之类的?
    LeaferJS
        3
    LeaferJS  
    OP
       2023-07-12 15:16:30 +08:00
    @ywx620 哈哈哈,开源会起到督促进步的作用
    LeaferJS
        4
    LeaferJS  
    OP
       2023-07-12 15:19:15 +08:00
    @Linvas 应该是可以的,绘图、界面相关的都可以,不同业务场景需要自己做一些功能的封装用起来才会简单些,我们后面也会联合开发者,做很多增强功能的封装给大家选用
    xinyu391
        5
    xinyu391  
       2023-10-10 15:02:20 +08:00
    很好奇,这类 js 库,底层是 js/ts 代码吗?
    绘图浏览器除了提供 canvas ,webgl ,webgpu 还有啥?
    速度怎么能差异这么大
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1756 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:43 · PVG 00:43 · LAX 08:43 · JFK 11:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.