SVG-Edit 扩展开发完全指南

前言

SVG-Edit 是一款功能强大的基于浏览器的 SVG 编辑器，其扩展机制允许开发者在不修改核心代码的情况下扩展编辑器的功能。本文将全面介绍如何为 SVG-Edit 开发自定义扩展。

扩展加载机制

SVG-Edit 提供了三种灵活的扩展加载方式：

1. HTML 直接引入：通过 <script> 标签在 HTML 文件中直接引入扩展
2. 配置加载：使用 setConfig 方法动态加载扩展
3. URL 参数指定：通过 URL 参数指定需要加载的扩展

对于需要修改扩展加载行为的场景，可以通过修改 svgedit-config-iife.js 文件实现。但出于模块化考虑，建议优先使用扩展机制。

扩展基本结构

一个标准的 SVG-Edit 扩展采用以下结构：

export default {
  name: 'extensionname',  // 扩展唯一标识符
  init (_methods) {       // 初始化函数
    return extensionData   // 返回扩展功能对象
  }
}

关键组件解析

1. name 属性：扩展的唯一标识符，可省略（此时使用文件名作为标识）
2. init 方法：核心初始化函数，接收 SVGCanvas 提供的方法和变量
3. 返回值：包含扩展功能的对象，决定了扩展的具体行为

实战示例：Hello World 扩展

让我们通过一个简单的 Hello World 扩展来理解扩展开发：

export default {
  name: 'helloworld',
  init () {
    return {
      svgicons: 'extensions/helloworld-icon.xml',  // 图标资源
      buttons: [ { /* 按钮配置 */ } ],            // 工具栏按钮
      mouseDown () { /* 鼠标按下事件 */ },       // 事件处理
      mouseUp (_opts) { /* 鼠标释放事件 */ }      // 事件处理
    }
  }
}

这个扩展实现了：

• 在左侧面板添加模式按钮
• 点击画布时显示 "Hello world" 消息

国际化支持

SVG-Edit 扩展支持多语言国际化，相关文件存储在 editor/extensions/ext-locale/<ext name>/ 目录下。

国际化实现方式

1. 使用内置方法：

   async init() {
     const localeStrings = await this.importLocale();
     // 使用本地化字符串
   }
   

2. 自定义实现：

   import { importSetGlobalDefault } from '../external/dynamic-import-polyfill/importModule.js';
   
   const url = `${svgEditor.curConfig.extPath}ext-locale/myext/zh.js`;
   const localeStrings = await importSetGlobalDefault(url, {
     global: 'svgEditorExtensionLocale_myext_zh'
   });
   

界面元素开发

1. 按钮开发

按钮可以出现在：

• 左侧模式面板
• 顶部上下文面板（根据选择变化）

按钮配置示例：

buttons: [{
  id: 'my_button',
  icon: 'path/to/icon',
  type: 'mode',
  title: '按钮提示文字',
  events: {
    click: function() { /* 点击处理 */ }
  }
}]

2. SVG 图标开发

推荐使用 SVG 格式图标，优势包括：

• 矢量缩放不失真
• 多尺寸适配
• 样式可定制

图标文件结构示例：

<svg>
  <g id="icon1">
    <!-- 图标1的SVG路径 -->
  </g>
  <g id="icon2">
    <!-- 图标2的SVG路径 -->
  </g>
</svg>

3. 上下文工具开发

上下文工具在特定元素被选中时显示在顶部工具栏：

context_tools: {
  // 当选择<rect>元素时显示的工具
  rect: ['tool1', 'tool2'],
  // 全局上下文工具
  global: ['global_tool']
}

可用资源与事件

1. SVGCanvas API

扩展中可以访问丰富的 SVGCanvas 方法和属性，包括：

• 画布操作
• 元素选择与修改
• 历史记录管理
• 工具状态控制

2. 编辑器事件

扩展可以响应多种编辑器事件：

• 画布点击/拖动
• 元素选择变化
• 工具模式切换
• 历史状态变化

开发最佳实践

1. 模块化设计：保持扩展功能独立，避免与其他扩展冲突
2. 性能优化：避免频繁的DOM操作，合理使用事件委托
3. 错误处理：妥善处理边界情况和异常状态
4. 文档完善：为扩展提供清晰的文档和使用说明
5. 兼容性考虑：确保扩展在不同浏览器环境下正常工作

通过本文的介绍，您应该已经掌握了 SVG-Edit 扩展开发的核心概念和技术要点。无论是简单的功能增强还是复杂的专业工具开发，SVG-Edit 的扩展机制都能提供强大的支持。