一、开源项目简介

LeaferJS 是一款好用的 Canvas 引擎，革新的开发体验，可用于高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。

提供了丰富的 UI 绘图元素，和开箱即用的功能，如自动布局、图形编辑、SVG 导出等，方便与 PS、 Figma、Sketch 等产品进行对接。并为跨平台开发提供了统一的交互事件，如拖拽、旋转、缩放手势等。

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

LeaferJS 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。

让不同的软件之间能够沟通、协作、共享绘图数据，让数字化产品开发可以更快、更简单。

通过不断革新的图形渲染技术、配套支持， 吸引更多的开发者加入使用，建立起一个开放的生态环境，沟通有无，互相从中受益，推动行业的快速发展，并诞生出更多有创意的技术和产品。

我们的目标不仅是让它成为前沿的 2D 和未来的 3D 引擎技术，还希望它能够为开发者带来极致的开发体验，助力开发者快速构建 AI 时代的网页、应用、设计、游戏和动画等可视化生产力工具（如下一代 local-first 的 Figma、Miro、Notion、Unity、Adobe、Canva、Webflow 等）。这是一段漫长而又充满乐趣的旅程，我们正在年复一年、坚定地向这个目标持续前进，可以通过 开发计划 了解更多信息。

特性

易学易用

基于Javascript、Canvas API构建，提供容易上手的API和文档。

现代化

简洁、开放、现代化的 UI 绘图框架，并提供跨平台、轻量化、高性能的运行时

表现力丰富

丰富的图形表现，能够实现各种绚丽多彩的效果，可媲美当前主流的设计软件。

场景包

高效绘图场景，推荐安装更轻量的 leafer-draw （49KB min+gzip）。

游戏开发场景，推荐安装更省心的 leafer-game，已集成了游戏相关插件。

图形编辑场景，推荐安装更省心的 leafer-editor，已集成了图形编辑器相关插件。

五、技术选型

leafer-ui

在 Web 环境中运行。

安装

确保你已安装了 Node.js。

npm install leafer-ui

易学易用

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',
 draggable: true
})

leafer.add(rect)

浏览器环境

需要支持 ES2015 语法。

浏览器
Chrome >= 51
Firefox >= 53
Safari >= 10
Edge >= 79
Opera >= 36
IE 不支持

更多内容请查看 LeaferJS 官网文档