图形编辑器

图形编辑器是一个有意思的例子，它采用了 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: '#333',  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: '#333' })   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