leafer-editor

在 Web 环境中运行。

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

安装

npm

npm install leafer-editor

pnpm

pnpm add leafer-editor

yarn

yarn add leafer-editor

bun

bun add leafer-editor

同时我们提供了 Playground 环境 和 create-leafer 命令行工具，方便大家直接体验官网示例。

通过 script 标签引入

web.min

<script src="https://unpkg.com/leafer-editor@1.0.9/dist/web.min.js"></script>
<script>
  const { Leafer, Editor, Arrow } = LeaferUI
  // ...
</script>

web

<script src="https://unpkg.com/leafer-editor@1.0.9/dist/web.js"></script>
<script>
  const { Leafer, Editor, Arrow } = LeaferUI
  // ...
</script>

module.min

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

module

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

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

使用

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

create-leafer 命令行工具

直接创建 Vue + Leafer 项目

在项目中 快速集成 Leafer

在项目中 安装、升级插件

Playground 环境

想直接运行官网示例代码，可以使用 Playground 环境 。

开始体验

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

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))