基于跨平台的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 (<TopView><Header title='SVG编辑器' /><Column grow className='m-3 bg-white'>{/* 编辑器画布 */}<SvgEditorwidth='100%' height='100%'{...context.editor}/></Column>{/* 编辑器控制面板 */}<SvgEditorController{...context.controller}selectImage={selectImage}className='m-3 bg-white r-1'style={{ height: px(100), marginTop: 0 }}/></TopView>)
}// 选择图片的回调函数
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