Skip to content

leafer-editor ​

在 Web 环境中运行。

基于 leafer-ui,集成了 图形编辑器、视图控制 、滚动条、箭头、HTML 插件,适用于在线图形编辑的场景。

安装 ​

sh
npm install leafer-editor
sh
pnpm add leafer-editor
sh
yarn add leafer-editor
sh
bun add leafer-editor

浏览器引入 ​

html
<script src="https://unpkg.com/leafer-editor@1.0.0/dist/web.min.js"></script>
<script>
  const { Leafer, Editor, Arrow } = LeaferUI
  // ...
</script>
html
<script src="https://unpkg.com/leafer-editor@1.0.0/dist/web.js"></script>
<script>
  const { Leafer, Editor, Arrow } = LeaferUI
  // ...
</script>
html
<script type="module">
  import {
    Leafer,
    Editor,
    Arrow,
  } from 'https://unpkg.com/leafer-editor@1.0.0/dist/web.module.min.js'
  // ...
</script>
html
<script type="module">
  import {
    Leafer,
    Editor,
    Arrow,
  } from 'https://unpkg.com/leafer-editor@1.0.0/dist/web.module.js'
  // ...
</script>

https://unpkg.com 无法访问时,可替换为 https://cdn.jsdelivr.net/npm

使用 ​

使用方式、全局变量和 leafer-ui 一致, 只需改下包名,即可运行官网示例代码。

开始体验 ​

试试下面的图形编辑示例,不用再单独引入插件包。

ts
import { App, Rect } from 'leafer-editor'

const app = new App({
    view: window,
    editor: {} // 会自动创建 editor实例、tree层、sky层
})

app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100))
app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100))

Released under the MIT License.