LeaferJS UI 项目中使用图形编辑器插件的注意事项

在 LeaferJS UI 项目中，开发者有时会遇到无法直接使用 Editor 类的问题。本文将详细解释这一现象的原因及解决方案。

问题背景

LeaferJS UI 是一个强大的图形渲染库，其核心功能并不包含图形编辑器功能。编辑器功能是以插件形式提供的，需要单独引入。

核心概念

1. LeaferJS UI 核心库：提供基础的图形渲染能力，包括画布、图层、基本图形等核心功能。
2. 图形编辑器插件：提供交互式编辑功能，如选择、移动、旋转、缩放等操作。

解决方案

要在项目中使用图形编辑器功能，需要按照以下步骤操作：

1. 首先确保已正确引入 LeaferJS UI 核心库
2. 然后额外引入图形编辑器插件
3. 在代码中初始化编辑器实例

实现示例

// 引入核心库
const { App, Frame, Rect } = LeaferUI;

// 引入编辑器插件
const { Editor } = LeaferUIEditor; // 注意这里使用了不同的命名空间

const app = new App({
    view: window,
    fill: '#333',
    tree: { type: 'design' },
    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());

注意事项

1. 编辑器插件需要单独引入，不是核心库的一部分
2. 确保编辑器插件的版本与核心库版本兼容
3. 编辑器功能通常需要配合可编辑的图形元素使用（设置 editable: true）

通过理解 LeaferJS UI 的模块化设计思想，开发者可以更灵活地根据项目需求选择所需功能模块，避免引入不必要的代码。