图形编辑器

图形编辑器是一个有意思的例子，它采用了 App 结构。可移动、缩放、旋转、倾斜，支持多选、框选、打组、锁定、层级，可配置样式，支持自定义 编辑工具、 内部编辑器。

注意事项

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

editor

// #App结构 - 图形编辑器 [editor]
import { App, Frame, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({
    view: window,
    fill: '#F2F2F2',
    editor: {},  //  配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层
})

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

实现原理

// #App结构 - 图形编辑器 [实现原理]
import { App, Leafer, Frame, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({ view: window, fill: '#F2F2F2' }) 

app.add(app.tree = new Leafer({ type: 'design' })) // 添加 tree 层
app.add(app.sky = new Leafer())  // 添加 sky 层

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作 //

恭喜 🎉

你已完成 常用场景插件 的了解，接下来将学习几个重要的进阶知识。

下一步

创建 App

在前端环境中使用

Vue

React

在服务端渲染中使用

Nuxt.js

VitePress

Next.js