Skip to content

leafer-ui

在 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/dist/web.min.js"></script>
<script>
  const { Leafer } = LeaferUI
  // ...
</script>
html
<script src="https://unpkg.com/leafer-ui@1.0.0/dist/web.js"></script>
<script>
  const { Leafer } = LeaferUI
  // ...
</script>
html
<script type="module">
  import { Leafer } from 'https://unpkg.com/leafer-ui@1.0.0/dist/web.module.min.js'
  // ...
</script>
html
<script type="module">
  import { Leafer } from 'https://unpkg.com/leafer-ui@1.0.0/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 不支持

体验环境

想直接运行官网示例代码,可以 安装体验环境

开始体验

创建一个交互应用,可以缩放平移视图、拖拽矩形。

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)
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.28/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',
      cornerRadius: [50, 80, 0, 80],
      draggable: true,
    })

    leafer.add(rect)
  </script>
</html>

下一步

体验性能

Released under the MIT License.