leafer-ui

在 Web 环境中运行。

同时我们提供了一个 体验环境，方便大家体验官网示例、阅读源代码。

安装

npm

npm install leafer-ui

pnpm

pnpm add leafer-ui

yarn

yarn add leafer-ui

bun

bun add leafer-ui

浏览器引入

web.minwebmodule.minmodule

<script src="https://unpkg.com/leafer-ui@1.0.0/dist/web.min.js"></script>
<script>
  const { Leafer } = LeaferUI
  // ...
</script>

<script src="https://unpkg.com/leafer-ui@1.0.0/dist/web.js"></script>
<script>
  const { Leafer } = LeaferUI
  // ...
</script>

<script type="module">
  import { Leafer } from 'https://unpkg.com/leafer-ui@1.0.0/dist/web.module.min.js'
  // ...
</script>

<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 语法。

体验环境

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

开始体验

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

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)