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
