图形编辑器
图形编辑器是一个有意思的例子,它采用了 App 结构,可以点击操作下面的图形看看。
注意事项
需安装 图形编辑器插件 才能使用。
ts
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))
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))