大家好，我是前端西瓜哥。這次簡單看看 SVGEdit 的架構。

SVGEdit 的版本為 7.2.0。

SVGEdit 一款非常老牌的 SVG 圖形編輯器，用于編輯處理 SVG，start 數(shù)目前是 5.8k。

它的優(yōu)點在于經(jīng)過多年的開發(fā)，完成度高，較為成熟，功能相當豐富。

1. 有豐富的工具：選擇工具、鉛筆工具、鋼筆工具（三階貝塞爾）、直線、各種圖形、圖片、文字等；
2. 畫布縮放、圖形縮放旋轉、編組、復制粘貼、層級排布修改、對齊；
3. 網(wǎng)格線、標尺、圖層管理、導入導出 SVG；
4. 歷史記錄，支持撤銷重做（編輯器的基本功能）等等。

缺點是幾乎不維護了，提交很少，大概一個月一提交，最新版 7.2.0 也是 22 年 8 月的時候了。

UI 比較簡陋，很簡單就能看到一些 UI bug。

如果要找一個 UI 好看的，可以看看開源項目 ：Method-Draw，這個 UI 好看很多。它 fork 了 SVG-Edit 并做了一些改造。Method-Draw 標榜簡單易用，所以有意去掉了 SVGEdit 的一些高級功能，比如圖層。

技術棧

Web Component + SVG + Rollup + i18next

UI 使用了 Web Component，瀏覽器原生支持的組件方案。

作為一款 SVG 編輯器，選擇 SVG 沒有毛病，這樣渲染效果就完全交給瀏覽器，不需要根據(jù)標準去實現(xiàn)渲染效果，自己專心寫編輯器的業(yè)務邏輯即可。

沒有用 TypeScript，因為是很老的項目，當時 TypeScript 尚未大行其道。如果要做新項目，建議還是上 TypeScript，大型復雜軟件還是很需要類型系統(tǒng)的。

打包用了 Rollup。國際化用了 i18next。

模塊設計

UI 層對應 Editor 類，該類繼承了 EditorStartup 類，后者做一些初始化操作。

編輯器內核對應 SvgCanvas 類。

SvgCanvas 感覺太多讀寫屬性的方法（getXx 和 setXx）了，學 Java 學的?？梢猿閹讉€小類把耦合性強的方法封裝起來。

有插件機制，插件對象通過 addExtension 方法注入到 SvgCanvas.extensions 對象。

可以看到注冊了 grid（網(wǎng)格）、markers（標尺）之類的插件。

關于 UI 層和內核層的通信，UI 層改數(shù)據(jù)，會直接改內核層，然后再改 UI 層。

這里的 zoom 有兩個數(shù)據(jù)源，可能會出現(xiàn)改了一個忘記改另一個的情況。建議只使用一個內核層數(shù)據(jù)源，改這個數(shù)據(jù)源后通過事件通知 UI 層或其他層做數(shù)據(jù)同步。多數(shù)據(jù)源是壞文明。

渲染方案

渲染方案是 SVG。

SVG 編輯器用 SVG，相當合理。

對于圖形樹的實現(xiàn)、圖形拾?。c選）、圖形渲染，SVGEdit 都交給瀏覽器都去實現(xiàn)。

SVG 對一般前端開發(fā)是非常好上手的，不需要太多圖形知識，本質就是一個有層級的 DOM 元素樹，前端同學再熟悉不過了，只是元素專門用來描述圖形。

但因為遠離底層，不方便做一些渲染優(yōu)化和緩存，圖形多的時候很卡，不適合做高性能圖形編輯器。

靈活性也較差，比如一個 0.5 線寬的直線還把畫布縮小了，根本就點不中好不好，希望點擊區(qū)域可以外擴一些，或想點中一個設置為不可見的圖形點擊區(qū)域。這個做不了。

當然一個可以考慮的方案是 SVG 只是單純做渲染，圖形拾取自己實現(xiàn)。

但 SVG 有一個強大的優(yōu)點：方便做功能擴展，進行二次開發(fā)。

比如你要在圖形編輯器里加一個新的模塊，比如倒計時、一個表單組件，網(wǎng)上找到輪子集成進去會很方便。因為 SVG 里面可以嵌入 DOM 元素，DOM 元素里也可以嵌入 SVG。

UI 層

UI 層原本是基于 jQuery UI 的，但后面丟棄 jQuery 改用 Web Component 進行了重構。

順帶一提，有個叫做 jPicker 的基于 jQuery 的拾色器插件，也做了魔改，去掉對 jQuery 的依賴。

它沒有用 React、Vue 這些 UI 框架，而是選擇 Web Component，我認為這是一個糟糕的決策。

Web Component 雖然被 瀏覽器原生支持，但并不是主流，生態(tài)一般，輪子不如 React 和 Vue 豐富。

我們繼續(xù)看代碼。

以左側欄 LeftPanel 為例，HTML 為：

這里的 se-button 就是一個 Web Component 組件，里面有局部樣式和交互邏輯，類似 React 和 Vue。

全局樣式文件是 svgedit.css。

LeftPanel 類初始化后會調用 init 方法。

該方法會：

1. 讀取前面的 HTML 創(chuàng)建一個 template 元素，然后添加 DOM 樹中。

2. 給一些 DOM 元素綁定了事件響應函數(shù)。

$id 這些是工具類方法。

下面代碼的作用是，給選擇工具按鈕綁定方法，該方法更改編輯器的模式為選擇模式。

LeftPanel 的 init 方法是在 EditorStartUp 類（這個是 Editor 的父類）的 init 方法中被調用的。

圖形拾取

點選 圖形的圖形拾取是交給瀏覽器，監(jiān)聽鼠標按下事件的方式，讀取 mouseEvent.target。

因為可能有組的存在，所以會不斷地讀 parentNode 找最頂層的 group 元素，直到當前 group 結束。

框選 會在點中空白區(qū)域出現(xiàn)，并將當前模式（currentMode）臨時切換為 multiselect。

期間產(chǎn)生的選區(qū)矩形元素保存在 svgCanvas.rubberBox 屬性中。

拖拽修改選區(qū)矩形寬高時，會遞歸 SVG 樹，計算它們的 bbox，判斷是否和選區(qū)矩形相交。將相交的圖形放到 selectedElements 屬性中。

工具管理

切換工具使用 SvgCanvas.setMode('line') 的方式。

不同工具都有各自實現(xiàn)的事件響應函數(shù)，當用戶進行鼠標操作時，會執(zhí)行 mouseDownEvent、mouseMoveEvent、mouseUpEvent，會根據(jù) mode 執(zhí)行不同的工具的方法。

鋼筆工具對應 svgCanvas.pathActions 屬性，對應 pathActionsMethod 方法，沒有用類，而是用了閉包的方式進行邏輯封裝。

圖形工具的邏輯倒沒有抽一個對象出來，直接寫在 ouseDownEvent、mouseMoveEvent、mouseUpEvent 里。

操作的歷史記錄

我以前的文章說過，歷史記錄需要維護一個撤銷棧和一個重做棧。

兩個棧等價于一個數(shù)組或雙向鏈表中，加上一個指針，該指針指向多個命令中的當前命令。

撤銷就是把指向往左移動，重做往右移，新操作則把指針后面的命令丟掉，然后把這個新的操作加到數(shù)組中，并將指針后移。

SVGEdit 的歷史命令都保存在 UndoManager 類的 undoStack 數(shù)組中，并用 undoStackPointer 指針指向最新命令的位置。

SVGEdit 使用了 patch（打補丁）的方式記錄歷史操作，沒有使用圖形樹快照的方式。

下面是移動一個矩形產(chǎn)生的操作命令，它記錄了修改圖形屬性的命令，記錄了一個元素修改前后的屬性。

這里有個特殊的 BatchCommand 批量命令對象，它的 stack 數(shù)組記錄了一次性要操作的子命令。

其實就是 宏命令。宏命令的作用是將多個命令組合在一起批量執(zhí)行，以實現(xiàn)一步執(zhí)行多個操作。

各種命令類保存在 svgCanvas.history 中。

簡評

UI 框架應該選擇 React 或 Vue。

這樣項目才會有更多人使用，作為一款比較古早的編輯器才可能煥發(fā)第二春。

最好是 Vue3，國內很多中小廠在用，那里的程序員不喜歡造輪子，這樣他們就會用你這個編輯器，然后社區(qū)繁榮，贏。當然最好 React 和 Vue 都做。

SVGEdit 丟掉 jQuery 用 Web Component，我不是很理解，外國比較流行這個？這樣很難集成進公司的項目中，不利于發(fā)展。

不要使用單例。

我看不少地方用了單例，單例模式有個問題，如果頁面需要同時有多個編輯器實例，比如做兩張圖紙對比功能。

那它們就會因為單例的對象共享導致沖突，比如改了編輯器 A 的設置屬性會同時改了編輯器 B 的，這不是我們想要的。

類的面向對象風格是比較好的解法，每個對象都要創(chuàng)建一個新的實例，就不會沖突了。

較多的 UI bug。

選中一個元素就能復現(xiàn)，此外 UI 也不好看。

監(jiān)聽鼠標事件應該放到 document 下。

放到 SVG 的容器或 SVG 上其實并不是很好的做法，當光標移到這些元素外時，監(jiān)聽就消失了，綁定到 doucment 下即使光標移動到瀏覽器外都能監(jiān)聽。

結尾

SVGEdit 支持的功能很多，但 UI 比較復古，小 bug 有點多的樣子。

但如果你要做 SVG 編輯器，與其從零開始，不如基于 SVGEdit 做去二次開發(fā)。

我是前端西瓜哥，關注我，學習更多圖形編輯器知識。文章來源地址http://www.zghlxwxcb.cn/news/detail-771210.html

到了這里，關于老牌開源 SVG 編輯器 SVGEdit 是如何架構的？的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！