笔记&收藏&学习

Appearance

本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com

写过原生 Canvas 的朋友都懂：

  • API 低级到怀疑人生——画个带圆角的矩形就要 20 行起步，缩放、拖拽、层级管理全靠自己实现。

  • 节点一多直接 PPT——超过 5000 个元素，页面卡成幻灯片。

于是，我们一边掉头发，一边默念：“有没有一款库，写得少、跑得快、文档还是中文？”

什么是 LeaferJS ​

LeaferJS 是一款高性能、模块化、开源的 Canvas 2D 渲染引擎，专注于提供高性能、可交互、可缩放矢量图形的绘图能力。

它采用场景图（Scene Graph）架构，支持响应式布局、事件系统、动画、滤镜、遮罩、路径、图像、文本、滚动视图、缩放、拖拽、节点嵌套、分组等丰富功能。

LeaferJS 的核心优势 ​

高效绘图 ​

  • 生成图片、短视频、印刷品：支持导出 PNG、JPEG、PDF、SVG 等多种格式，满足印刷级品质需求。

  • Flex 自动布局、中心绘制：内置 Flex 布局，支持中心绘制，后端可批量生成图片。

  • 渐变、内外阴影、裁剪、遮罩、擦除：支持线性渐变、径向渐变、内外阴影、裁剪、遮罩、擦除等高级绘图功能。

UI 交互 ​

  • 开发小游戏、互动应用、组态软件：支持跨平台交互事件、手势，CSS 交互状态、光标。

  • 动画、状态、过渡、精灵：支持帧动画、状态过渡、精灵图、箭头、连线等交互元素。

图形编辑 ​

  • 开发裁剪、图片、图形编辑器：提供丰富的图形编辑功能，高可定制。

  • 标尺、视窗控制、滚动条：支持标尺、视窗控制、滚动条等编辑器必备功能。

性能巨兽 ​

LeaferJS 最最核心的一点就是性能至上，和目前市面上比较流行的 Canvas 库对比：

如何快速上手 ​

# 1. 创建项目npm create leafer@latest my-canvascd my-canvasnpm inpm run dev
// 2. 写代码（index.ts）import { Leafer, Rect } from'leafer-ui'const leafer = new Leafer({ view: window })const rect = new Rect({    x: 100,    y: 100,    width: 200,    height: 200,    fill: '#32cd79',    cornerRadius: [50, 80, 0, 80],    draggable: true})leafer.add(rect)

浏览器访问 http://localhost:5173——圆角矩形已可拖拽！

想加 1 万个？直接 for 循环，依旧丝滑。

使用场景 ​

  • 在线设计工具——海报、名片、电商 banner，导出 4K PDF 秒级完成。

  • 数据可视化——物联网组态、拓扑图、百万点折线图，放大 20 倍依旧清晰。

  • 在线白板——教学、会议、脑图，无限画布 + 实时协作。

  • 无代码搭建——拖拽生成页面，JSON 一键转 Canvas 应用。

  • 小游戏 / 动画——跑酷、拼图、营销活动，帧率稳 60，包体小一半。

优秀案例展示 ​

基于 Leafer + vue3 实现画板。

  • Github 地址：https://github.com/WHSnhcZDYRZC/drawingBoard

fly-cut 在线视频剪辑工具。

  • Github 地址：https://github.com/x007xyz/flycut

基于 LeaferJS 的贪吃蛇小游戏。

  • Github 地址：https://github.com/yh4922/leafer-greedy-snake

一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能，基于 leafer.js 的开源版。

  • Github 地址：https://github.com/more-strive/tuhigh

更多优秀案例，可以移步官网

  • 官网地址：https://www.leaferjs.com/

让 “国产” 成为“首选” ​

LeaferJS 不是又一个 “国产替代”，而是直接把 Canvas 的性能与体验拉到 Next Level。
它让开发者第一次敢在提案里写：“前端百万节点实时交互，没问题。”
如果你受够了原生 Canvas 的笨拙，也踩腻了国外库的深坑，不妨试试 LeaferJS

  • LeaferJS 官网地址：https://www.leaferjs.com/