Skip to content

图形编辑器

用于编辑操作图形,提供了丰富的功能和 样式配置, 可移动、缩放、旋转、倾斜,支持多选、框选、打组、 双击进组,锁定、层级。支持自定义 编辑工具内部编辑器

适用平台

web 版、小程序版。暂时与有 around 属性的元素不能混用。

后面计划会增加精细化的属性编辑器,如编辑圆角、形状、路径等

安装插件

需要安装编辑器插件才能使用,点此访问 Github 仓库

sh
npm install @leafer-in/editor
sh
pnpm add @leafer-in/editor
sh
bun add @leafer-in/editor

浏览器

通过全局变量 LeaferIN.editor 访问插件内部功能。

html
<script src="https://unpkg.com/@leafer-in/editor@1.0.0-rc.22/dist/editor.min.js"></script>
<script>
  const { Editor } = LeaferIN.editor
</script>
html
<script src="https://unpkg.com/@leafer-in/editor@1.0.0-rc.22/dist/editor.js"></script>
<script>
  const { Editor } = LeaferIN.editor
</script>

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

开始体验

  1. 点击选中元素, 支持多选、框选。

  2. 将光标移动至控制点或边上,拖动可缩放元素。

  3. 将光标移动至控制点外沿,出现方向光标,拖动可旋转元素。

按住Ctrl / Command 键,将光标移动至四条边上,拖动可倾斜元素。

注意事项

编辑器必须在 App 中使用, 通过传入 editor 配置,可实现自动创建 app.editor 实例及 app.tree, app.sky 分层结构,并自动将 editor 添加到 sky 层中。

ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'

const app = new App({ 
    view: window,
    editor: {}
})

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))
ts
import { App, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor'

const app = new App({ view: window }) 

app.tree = app.addLeafer()
app.sky = app.addLeafer({ type: 'draw', usePartRender: false })

app.editor = new Editor()
app.sky.add(app.editor)

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

下一步

Editor 元素

Released under the MIT License.