分享一個自由拖拽組件的實現(xiàn)思路

最近的項目中遇到一個需求，在頁面上添加一個可以自由拖拽、縮放、編輯顏色的 svg 圖片，項目中引用了兩個現(xiàn)有的插件，對插件進行解讀之后略有心得，與大家分享一下。

自由拖拽縮放的節(jié)點 —— react-rnd

說到拖拽，我們的第一反應當然是監(jiān)聽鼠標事件來修改 dom 元素的位置，而縮放的話，則是在對元素邊界進行操作時重新修正元素的 position 和 width、height 屬性。這部分就不予過多的贅述，有興趣的朋友可以參考下 react-rnd 這個插件，它引用了 react-draggable 和 react-resizeable 兩個插件來實現(xiàn)元素的拖拽和縮放。

此時我們理論上已經(jīng)實現(xiàn)了 dom 元素的拖拽和縮放，但是在添加了 svg 圖片之后我們很快發(fā)現(xiàn)，由于外層的拖拽是由 document.addEventListener 來實現(xiàn)的，但是我們在 mouseDown 的時候，鼠標點擊的位置實際上是 svg 內(nèi)的 document。

自由的 svg —— react-svg

有了把 svg 的 document 取出來的思路，我們很容易能找到一個插件：react-svg，它的實現(xiàn)思路與我們上面提到的完全一致，此處貼上它的核心代碼供各位查看：

svg 的縮放 —— preserveAspectRatio、vector-effect

我們很快又發(fā)現(xiàn)一個問題，svg 的縮放默認是等比的，也就是說當我們橫向拉長圖片的時候，它并不會變大，只會橫向偏移居中。

none 該值指定不應用矢量效果，即，使用默認的渲染行為，即首先用指定的繪畫填充形狀的幾何形狀，然后使用指定的繪畫描邊輪廓。

non-scaling-stroke 該值修改了筆觸的方式。通常，筆觸涉及在當前用戶坐標系中計算形狀路徑的筆觸輪廓，并用筆觸顏料（顏色或漸變）填充輪廓。該值的最終視覺效果是筆觸寬度不依賴于元素的變換（包括非均勻縮放和剪切變換）和縮放級別。

non-scaling-size 該值指定元素及其后代使用的特殊用戶坐標系。盡管從宿主坐標空間進行任何轉(zhuǎn)換更改，該用戶坐標系的比例也不會更改。但是，它沒有指定抑制旋轉(zhuǎn)和偏斜。同樣，它也不指定用戶坐標系的原點。由于此值抑制了用戶坐標系的縮放，因此它還具有 non-scaling-stroke 的特性。

non-rotation 該值指定元素及其后代使用的特殊用戶坐標系。盡管從宿主坐標空間發(fā)生任何變換更改，該用戶坐標系的旋轉(zhuǎn)和傾斜仍被抑制。但是，它沒有指定抑制縮放。同樣，它也沒有指定用戶坐標系的原點。

fixed-position 該值指定元素及其后代使用的特殊用戶坐標系。盡管從宿主坐標空間進行任何轉(zhuǎn)換更改，用戶坐標系的位置都是固定的。但是，它沒有指定抑制旋轉(zhuǎn)，偏斜和縮放。當同時指定了該矢量效果和 transform 屬性， transform 屬性將因該矢量效果而被消耗。

當我們設置vector-effect="non-scaling-stroke"后，我們的svg終于看起來正常了~

尾聲

以上就是我們在做給頁面上添加一個可以自由拖拽、縮放、編輯顏色的 svg 圖片時總結(jié)的一些東西，希望對各位有所幫助。另外我們還有一個沒有解決的問題，如果path的內(nèi)容是通過類似同心圓的方式來繪制圖形的時候，我們并沒有什么好的方法來保證縮放時候線條寬度的變化

歡迎自薦投稿到《前端技術(shù)江湖》，如果你覺得這篇內(nèi)容對你挺有啟發(fā)，記得點個 「在看」哦