Skip to content

leafer-ui

Web 版  |  Worker 版  |  Node 版  |  小程序版

如果您仅需绘图功能,推荐更轻量的 leafer-draw

安装

在 Web 环境中运行。

sh
npm install leafer-ui
sh
pnpm add leafer-ui
sh
yarn add leafer-ui
sh
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 start
sh
git pull --recurse-submodules

将在本地创建一个 LeaferJS 项目,并自动下载 leaferleafer-uileafer-drawleafer-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>

下一步

体验性能

Released under the MIT License.