图形编辑器

图形编辑器是一个有意思的例子，它采用了 App 结构，可以点击操作下面的图形看看。

注意事项

需安装 图形编辑器插件 才能使用， 或直接安装 leafer-editor（已集成了图形编辑器相关插件）。

手动创建

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

自动创建

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

下一步

自动布局