AI 能帮你写代码，但做图形应用，没必要每次都从 Canvas 底层开始。

LeaferJS 把图形绘制、布局、交互、动画和编辑等常用能力做好了。借助 LeaferJS Skills，你可以让 AI 参考现成的 API 和插件，帮你开发无限画布、流程图、图形编辑器等应用，而不是反复实现底层功能。

即使没有编程基础，也可以尝试通过自然语言让 AI 协助创作；有开发经验的用户，则可以在已有能力上继续扩展。目标不只是生成一张效果图，而是做出能交互、能编辑、能继续开发的应用。 具体效果取决于所用 AI 工具和实际需求。

LeaferJS 从 2021 年春天 开始研发，至今五年多。我们一直希望把复杂的图形开发变得简单，让大家把时间花在自己的产品上，而不是重复造轮子。

LeaferJS 基于 MIT 协议开源，免费可商用。 大多数常见需求可以从开源引擎与生态插件开始；需要更高性能或专业编辑工具时，再按需选择 PxGrow。

AI 上手 · 开发文档 · GitHub

先看 LeaferJS 能做什么

想做什么	LeaferJS 提供什么
无限画布、在线白板、流程图、AI视频分镜	画布缩放与平移、拖拽、连线、滚动条
图形编辑器、设计工具	选中与框选、移动、缩放、旋转、编组、自定义编辑工具
可视化应用、工业组态、数字孪生	图形、文本、图片、自动布局、事件、状态和样式
动画、小游戏、视频创作	关键帧与路径动画、视频、GIF、精灵元素
跨端图形处理	Web、Web Worker、Node.js、微信小程序

这些能力可以组合使用。下面列出具体功能，并附上对应的文档或插件入口。

完整功能表

以下功能依据 2026 年 11 月 12 日 的功能清单整理。包含引擎、生态插件和 PxGrow 可选扩展，共 126 项，部分功能需要单独安装插件。

1. 运行环境

让同一套图形能力用在网页、后台绘制和不同平台。

功能	能力说明
Web	在浏览器中运行，构建网页图形应用
Web Worker 渲染	在 Worker 中渲染，减少对网页主线程的占用
Node.js 渲染	在服务端绘制图形、生成图片
小程序（微信）	支持微信小程序，需留意平台本身的限制
多产品形态	一套图形能力，可用于绘图、编辑器和游戏等产品
统一核心 API	跨端使用统一的核心接口，便于开发可复用的插件与产品
底层渲染可插拔	核心逻辑与渲染实现分离，为未来接入 WebGL、WebGPU、Skia 等技术留出空间（不代表目前已支持）

2. 布局与渲染

决定图形放在哪里，以及画面变化时如何高效更新。

功能	能力说明
绝对 & 相对布局	自由设置元素位置，或相对其他元素定位
方位 & 边缘布局	相对父级或指定元素，按方向和边缘定位
自动布局（Flex）	像 Flex 一样自动排列元素，减少手动计算位置
锚点布局	围绕指定中心点绘制图形，不受宽高变化影响
原点布局	统一设置旋转、缩放和位移的参考点
局部布局与渲染	只更新发生变化的区域，减少不必要的计算和绘制
坐标体系	支持本地、世界等坐标系，并提供坐标转换方法
包围盒体系	获取不同坐标空间中的图形边界，用于布局、碰撞等计算
元素包围盒变化事件	监听元素边界在不同坐标系中的变化
布局生命周期事件	在布局的不同阶段执行自定义逻辑
分层渲染	按内容更新频率分层绘制，并支持事件穿透图层
渲染生命周期事件	在渲染的不同阶段执行自定义逻辑

3. 场景树与元素

从基础图形到视频、连线，再到数据保存和导出。

功能	能力说明
场景树管理	用 Group、Frame、Box 等容器组织和嵌套元素
多类型元素支持	支持图形、文本、图片、路径、折线和曲线等元素
Frame、Box容器	带外观的容器元素，使用方式类似 HTML div
图形容器	图片、椭圆、路径等元素也能嵌套子元素
Pen 元素自由绘画	自由绘制矢量路径，支持 Canvas 2D 路径绘制方法
路径优先模式	把图形转为 SVG 路径数据，便于进一步编辑
箭头元素	创建可自定义头尾和样式的矢量箭头
连线元素	自动连接图形元素，用于流程图和节点工作流
Video 视频元素	在图形元素内播放视频
GIF 动图播放	在图形元素内播放 GIF 动图
Robot 精灵元素	通过序列帧和雪碧图播放角色动作
Canvas 元素	把 Canvas 绘制与像素操作放入场景树，参与变换和组合
HTML 富文本	将 HTML 内容渲染到画布，显示丰富的文本样式
HTML 节点挂载	在画布中嵌入 HTML 节点，用于表单、视频等组件（实际发布状态以插件文档为准）
自定义元素	按产品需要扩展自己的元素类型
保持位置换组	把元素移入其他容器时，保持画面中的位置不变
元素查询	按标识、类型或条件查找元素
属性变化事件	监听属性变化，获取变化前后的值
图片按需加载	图片进入视口后再加载，减少初始请求
JSON 导入导出	把图形保存成 JSON，并在需要时恢复
高清图片导出	导出画布或单个元素，可设置尺寸和清晰度
SVG 导入导出	在图形对象与 SVG 之间转换，复用矢量素材

4. 文本与排版

在画布中显示、排版和编辑文字。

功能	能力说明
自动换行与文本对齐	设置多行文本、自动换行、行高和对齐方式
文本溢出与自定义省略	限制文字显示范围，并自定义省略内容
段落排版	设置缩进、段落间距和两端对齐
文本背景框	给文字添加背景、圆角、描边与阴影
文字编辑	直接在画布中编辑文字
路径文本	让文字沿路径排列，制作圆形或弧形文字
多层文字特效	叠加多层描边、阴影和渐变效果
富文本渲染与编辑	按字符设置样式，并编辑富文本内容

5. 外观与样式

为图形添加颜色、描边、阴影、遮罩等效果。

功能	能力说明
填充	为图形填充颜色、渐变或图片图案
描边	为图形添加边线
内、中、外描边	选择描边位于路径内部、居中还是外部
四边独立描边	分别设置矩形四条边的描边宽度
固定大小	缩放画布时，让指定元素保持屏幕显示大小
固定线宽	缩放画布时，让线宽保持不变
外阴影	为图形添加外阴影
内阴影	为图形添加内阴影
Box 阴影	类似 CSS box-shadow，只在图形外部显示阴影
固定阴影	缩放画布时，让阴影保持原有显示大小
多个填充、描边、阴影	一个元素可叠加多层填充、描边和内外阴影
路径圆角	给折线与曲线连接处添加圆角
滤镜与特效	支持模糊、亮度、对比度等滤镜效果
图片滤镜	实时调整图片的色彩和效果，可自定义滤镜
高级渐变	支持线性、径向、锥形渐变等效果，可用于开发渐变控制工具
图案填充	通过 clip、cover、fit、repeat 等方式填充图片图案
固定平铺图案	缩放画布时，让平铺图案保持屏幕显示大小
平铺图案间距	设置重复图案之间的间距
平铺图案交错	让图案按横向或纵向交错排列
组透明度（无叠加）	把整组元素作为一个整体设置透明度，避免重叠处重复叠加
突出显示元素	突出显示指定元素，同时淡化其他元素
遮罩与裁剪	用形状或图像裁剪内容，支持类似剪贴蒙版的效果
擦除功能	按路径或图片擦除图形的部分内容
混合模式	支持 multiply、screen 等图层混合效果
子混合模式	分别为填充、描边、阴影设置混合模式
像素对齐	减少图形边缘因像素位置造成的模糊

6. 交互

让画布里的图形响应点击、拖动、手势等操作。

功能	能力说明
事件捕获	事件先从根元素向目标元素传递
事件冒泡	事件从目标元素逐级传递给父元素
事件穿透	获取当前目标下方被遮挡的元素
高级事件响应	分别控制填充、描边、子元素的事件响应，支持像素、路径及自定义命中检测
手势交互	识别平移、缩放、旋转等手势
拖拽与滑动	支持拖动元素，以及 Drop、Swipe 等动作
光标与指针管理	为画布元素直接设置鼠标光标样式
坐标拾取元素	通过指定坐标找到对应的画布元素
限制拖拽范围	限制元素可以拖动的区域
缩放平移视口	缩放、平移画布，并统一处理滚轮和手势输入
视图缩放菜单	放大、缩小、适应宽高，或聚焦指定元素和区域
滚动条	为无限画布提供横向、纵向滚动条
Box 内容滚动条	滚动 Box、Frame 容器内的内容

7. 动画与状态

让元素动起来，也能根据交互状态切换外观。

功能	能力说明
基础动画功能	通过缓动函数和过渡实现基础动画
CSS 风格过渡动画	属性变化时自动平滑过渡，类似 CSS transition
渐变过渡动画	让渐变颜色平滑变化
高级动画功能	支持延时、循环、seek、事件，以及关键帧和路径动画
精灵帧动画	逐帧播放图片，制作角色动作或特效
文本打字机 / Count 动画	让文字逐字出现，或让数字递增显示
虚线动画	让虚线产生流动效果，可表示数据流向或流程方向
交互状态	为 hover、press、focus、selected、disabled 等状态设置不同样式
自定义状态	定义自己的状态，并在不同状态间切换
运动路径	让元素沿路径移动，或实现路径描边、生长动画
后台动画运行	扩展后台渲染调度；切换标签页后仍受浏览器限制

8. 编辑器功能

实现图形编辑器常见的选择、变换、编组等操作。

功能	能力说明
基础变换编辑	移动、缩放、旋转和倾斜元素
Resize 原始尺寸	直接修改元素宽高、路径或文字大小，而不只是缩放比例
多选与框选	同时选择多个元素，或通过框选批量选择
编组与解组	把元素编成组，或拆开已有分组
双击进组编辑	双击进入分组内部，编辑其中的元素
元素锁定	锁定元素，避免被误选或修改
编辑器层级管理	调整元素前后层级关系
自定义编辑工具	按需要开发自己的编辑工具
自定义内部编辑器	扩展元素内部的专用编辑界面
标尺功能	显示坐标刻度和尺寸参考，帮助精确排版
辅助线与吸附	使用辅助线和自动吸附，对齐元素更方便

PxGrow：让开源走得更远

LeaferJS 会继续坚持 MIT 开源、免费可商用。为了让项目能够长期研发和维护，我们推出了 PxGrow，提供可选的性能加速与专业图形编辑插件，并通过商业化支持 LeaferJS 的持续发展。

开源引擎可以独立使用。 如果项目对性能或专业编辑有更高要求，再按需选择 PxGrow。

功能	能力说明
Viewport Lighter	加快大量元素场景中的画布缩放
Image Lighter	优化大尺寸图片的缩放与移动显示
Vector Lighter	减少复杂矢量与阴影的重复绘制
Regions Lighter	让不同动画区域独立更新，减少无关重绘
Clipper	在画布中可视化裁剪图片
Tiler	可视化编辑图片的平铺效果
Path Editor	可视化编辑矢量路径、节点和曲线
Gradient Editor	在画布中直接编辑渐变颜色和位置
Linker Editor	可视化创建和调整元素间的连线
Shape Editor	通过交互控件调整图形形状
Points Editor	直接调整图形节点的位置和分布
Mask Editor	可视化编辑遮罩和内容的显示关系
Motion Editor	可视化调整运动元素的效果
Ruler	提供画布标尺与参考线，帮助精确定位
Path Node	为路径类编辑器提供通用节点组件
Flow Editor	可视化编辑自动布局的结构和排列

一起继续创造

从 2021 年到现在，我们一直在做同一件事：让图形开发更简单。

AI 让更多人有机会把想法变成软件，LeaferJS 会继续把渲染、交互、编辑这些基础能力做好。希望更多人能用它做出自己真正需要的工具。

用 AI 开始创作 · 查看示例与文档 · 为 LeaferJS 点亮 Star