详细介绍：基于跨平台的svg组件编写一个svg编辑器

duxapp 提供了一套跨平台的 SVG 编辑器组件，支持在多种环境中创建和编辑 SVG 图形。该编辑器包含以下核心功能：

• 插入图片
• 绘制自由路径
• 添加文本
• 创建基本形状（矩形、圆形、线条等）
• 对元素进行移动、缩放和旋转操作

快速开始

import { chooseMedia } from '@/duxapp/utils/net/util'
import {
Header,
TopView,
Column,
SvgEditor,
SvgEditorController,
useSvgEditorController,
px
} from '@/duxui'
export default function SvgEditorExample() {
// 获取编辑器控制器
const context = useSvgEditorController()
return (
{/* 编辑器画布 */}
{/* 编辑器控制面板 */}
)
}
// 选择图片的回调函数
const selectImage = async () => {
const res = await chooseMedia('image', { count: 1 })
return res[0].path
}

核心组件说明

SvgEditor 组件

编辑器主画布，接收以下主要属性：

• defaultValue: 初始SVG内容

• onChange: 内容变更回调

• mode: 当前编辑模式（path/text/ellipse/line/rect）

• 各形状的样式属性（pathProps/textProps等）

SvgEditorController 组件

提供可视化操作界面，主要属性：

• selectImage: 图片选择回调函数

• 继承自Column组件的布局属性

useSvgEditorController Hook

用于获取编辑器状态和控制方法：

const { editor, controller
} = useSvgEditorController()

返回的两个属性分别用于绑定 SvgEditor 组件 和 SvgEditorController 组件

最后

编写这个组件主要目的是为了检验跨平台的Svg组件的功能完整性，同时将源码开放，供大家使用或者学习参考

开发文档
GitHub