leafer-ui
Web 版 ｜ Worker 版 ｜ Node 版 ｜ 小程序版
如果您仅需绘图功能，推荐更轻量的 leafer-draw。
安装
在 Web 环境中运行。
sh
npm install leafer-uish
pnpm add leafer-uish
yarn add leafer-uish
bun add leafer-ui浏览器
html
<script src="https://unpkg.com/leafer-ui@1.0.0-rc.27/dist/web.min.js"></script>
<script>
const { Leafer } = LeaferUI
// ...
</script>html
<script src="https://unpkg.com/leafer-ui@1.0.0-rc.27/dist/web.js"></script>
<script>
const { Leafer } = LeaferUI
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@1.0.0-rc.27/dist/web.module.min.js'
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@1.0.0-rc.27/dist/web.module.js'
// ...
</script>https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm
浏览器环境
需要支持 ES2015 语法。
浏览器
Chrome >= 51
Firefox >= 53
Safari >= 10
Edge >= 79
Opera >= 36
IE 不支持
安装体验环境
我们提供了一个可选的 体验环境，方便大家体验官网示例、阅读源代码。
sh
git clone https://github.com/leaferjs/LeaferJS.git --recurse-submodules
cd LeaferJS
npm install
npm run startsh
git pull --recurse-submodules将在本地创建一个 LeaferJS 项目，并自动下载 leafer、leafer-ui、leafer-draw、leafer-in 子仓库到 src 目录。
安装启动完成后，可在浏览器中访问：localhost:10101
重要提示
复制官网示例代码到 index.ts 中，可以实时查看运行效果。
开始体验
创建一个交互应用，可以缩放平移视图、拖拽矩形。
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',
draggable: true
})
leafer.add(rect)html
<!DOCTYPE html>
<html>
<head>
<title>Demo | Leafer UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://unpkg.com/leafer-ui@1.0.0-rc.27/dist/web.min.js"></script>
</head>
<body></body>
<script>
// 注意 Image、PointerEvent 等会和 浏览器自带的全局变量冲突，需要加上 LeaferUI 前缀访问
// 如: var image = new LeaferUI.image
// 或使用自运行函数 (function(){ ...代码 })(), 防止覆盖全局变量
var leafer = new LeaferUI.Leafer({ view: window })
var rect = new LeaferUI.Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
draggable: true,
})
leafer.add(rect)
</script>
</html>