【实战】983- 一个可自由拖拽的组件实现思路

以你之姓@ 2022-10-05 15:51 185阅读 0赞

![9a9b67656a366548088ca646cff4a4f6.png][]

作者：LeapFE

https://segmentfault.com/a/1190000039754124

最近的项目中遇到一个需求，在页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片，项目中引用了两个现有的插件，对插件进行解读之后略有心得，与大家分享一下。

## 自由拖拽缩放的节点 —— react-rnd ##

说到拖拽，我们的第一反应当然是监听鼠标事件来修改 `dom` 元素的位置，而缩放的话，则是在对元素边界进行操作时重新修正元素的 `position` 和 `width`、`height` 属性。这部分就不予过多的赘述，有兴趣的朋友可以参考下 react-rnd 这个插件，它引用了 react-draggable 和 react-resizeable 两个插件来实现元素的拖拽和缩放。

此时我们理论上已经实现了 `dom` 元素的拖拽和缩放，但是在添加了 svg 图片之后我们很快发现，由于外层的拖拽是由 `document.addEventListener` 来实现的，但是我们在 `mouseDown` 的时候，鼠标点击的位置实际上是 `svg` 内的 `document`。

![271d18544d76b84662bd41f0e23a9c7e.png][]

那么这个时候应该怎么处理呢？ 最简单的思路： 把 `svg` 的 `document` 取出来，放到父级的 `document` 里面。

## 自由的 svg —— react-svg ##

有了把 `svg` 的 `document` 取出来的思路，我们很容易能找到一个插件：react-svg，它的实现思路与我们上面提到的完全一致，此处贴上它的核心代码供各位查看：

![376844f9bc73f3a9df68bfb474299662.png][]

此时我们发现，我们添加的 svg 图片已经可以自由的拖拽和缩放了。另外由于 react-svg 还开放了一个属性 `beforeInjection`，我们可以通过这个属性来在 `svg` 挂载之前修改它的属性，如 `stroke`、`stroke-width`、`fill` 等，因此我们可以更加灵活得处理我们的 svg 图片。

## svg 的缩放 —— preserveAspectRatio、vector-effect ##

我们很快又发现一个问题，`svg` 的缩放默认是等比的，也就是说当我们横向拉长图片的时候，它并不会变大，只会横向偏移居中。

![dbf8c11c514fe733185a5a374c141f1c.gif][]这个时候我们就要用到 `svg` 自带的一个属性：`preserveAspectRatio`，用来表示是否强制进行统一缩放，当设置为 `none` 的时候，svg 图片不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。如下图。其他类型强制缩放可参考 MDN。

![58f6125157f31833c3ff3c136effd072.gif][]现在我们的 `svg` 终于可以自由缩放了，但是很快我们又发现，把一个 `svg` 放大之后，它的线条宽度也跟着变宽了，那么有没有什么属性来保持线条宽度不变呢？答案是有的，`vector-effect`，但是这个属性只对部分 `svg` 元素（ `<circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> <tspan>, <use>`）生效，而它的属性有以下几个：

`none` 该值指定不应用矢量效果，即，使用默认的渲染行为，即首先用指定的绘画填充形状的几何形状，然后使用指定的绘画描边轮廓。

`non-scaling-stroke` 该值修改了笔触的方式。通常，笔触涉及在当前用户坐标系中计算形状路径的笔触轮廓，并用笔触颜料（颜色或渐变）填充轮廓。该值的最终视觉效果是笔触宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

`non-scaling-size` 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，该用户坐标系的比例也不会更改。但是，它没有指定抑制旋转和偏斜。同样，它也不指定用户坐标系的原点。由于此值抑制了用户坐标系的缩放，因此它还具有 `non-scaling-stroke` 的特性。

`non-rotation` 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。

`fixed-position` 该值指定元素及其后代使用的特殊用户坐标系。尽管从宿主坐标空间进行任何转换更改，用户坐标系的位置都是固定的。但是，它没有指定抑制旋转，偏斜和缩放。当同时指定了该矢量效果和 `transform` 属性， `transform` 属性将因该矢量效果而被消耗。

当我们设置`vector-effect="non-scaling-stroke"`后，我们的`svg`终于看起来正常了~

![5e282bb9b9da2c2aeb101175f7b851de.gif][]

## 尾声 ##

以上就是我们在做给页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片时总结的一些东西，希望对各位有所帮助。另外我们还有一个没有解决的问题，如果`path`的内容是通过类似同心圆的方式来绘制图形的时候，我们并没有什么好的方法来保证缩放时候线条宽度的变化

![ff35df88baa7d5b074bc3723c296f286.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![0eeac18eca87f5f3cf8beafad9824ce6.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[9a9b67656a366548088ca646cff4a4f6.png]: /images/20221005/f141d403aaa441cda70799e1011e8e66.png
[271d18544d76b84662bd41f0e23a9c7e.png]: /images/20221005/689f0c3f5eaa45fe802ddaee536cc6ba.png
[376844f9bc73f3a9df68bfb474299662.png]: /images/20221005/3418c024ecd943f69f3d19bab4984867.png
[dbf8c11c514fe733185a5a374c141f1c.gif]: /images/20221005/aaaa2d3435cd437fb376cd85db47d874.png
[58f6125157f31833c3ff3c136effd072.gif]: /images/20221005/7033b90ab54b42d599c18e7838125449.png
[5e282bb9b9da2c2aeb101175f7b851de.gif]: /images/20221005/84b1f35d4713414480eda697ce06a56d.png
[ff35df88baa7d5b074bc3723c296f286.gif]: /images/20221005/909a18df3480404cb47dc07bbe005563.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[0eeac18eca87f5f3cf8beafad9824ce6.gif]: /images/20221005/6af69386c8b14d9e90c53324e6b97b82.png