网站首页 > 技术文章 正文
最近的项目中遇到一个需求,在页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片,项目中引用了两个现有的插件,对插件进行解读之后略有心得,与大家分享一下。
自由拖拽缩放的节点 —— react-rnd
说到拖拽,我们的第一反应当然是监听鼠标事件来修改 dom 元素的位置,而缩放的话,则是在对元素边界进行操作时重新修正元素的 position 和 width、height 属性。这部分就不予过多的赘述,有兴趣的朋友可以参考下 react-rnd 这个插件,它引用了 react-draggable 和 react-resizeable 两个插件来实现元素的拖拽和缩放。
此时我们理论上已经实现了 dom 元素的拖拽和缩放,但是在添加了 svg 图片之后我们很快发现,由于外层的拖拽是由 document.addEventListener 来实现的,但是我们在 mouseDown 的时候,鼠标点击的位置实际上是 svg 内的 document。
avatar
那么这个时候应该怎么处理呢?最简单的思路:把 svg 的 document 取出来,放到父级的 document 里面。
自由的 svg —— react-svg
有了把 svg 的 document 取出来的思路,我们很容易能找到一个插件:react-svg,它的实现思路与我们上面提到的完全一致,此处贴上它的核心代码供各位查看:
此时我们发现,我们添加的 svg 图片已经可以自由的拖拽和缩放了。另外由于 react-svg 还开放了一个属性 beforeInjection,我们可以通过这个属性来在 svg 挂载之前修改它的属性,如 stroke、stroke-width、fill 等,因此我们可以更加灵活得处理我们的 svg 图片。
svg 的缩放 —— preserveAspectRatio、vector-effect
我们很快又发现一个问题,svg 的缩放默认是等比的,也就是说当我们横向拉长图片的时候,它并不会变大,只会横向偏移居中。
这个时候我们就要用到 svg 自带的一个属性:preserveAspectRatio,用来表示是否强制进行统一缩放,当设置为 none 的时候,svg 图片不会进行强制统一缩放,如果需要,会缩放指定元素的图形内容,使元素的边界完全匹配视图矩形。如下图。其他类型强制缩放可参考 MDN。
现在我们的 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终于看起来正常了~
尾声
以上就是我们在做给页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片时总结的一些东西,希望对各位有所帮助。
作者:曹文亮
https://segmentfault.com/a/1190000039754124
- 上一篇: 看完就懂的前端拖拽那些事
- 下一篇: 拖拽、双击用得好,青铜也能变王者
猜你喜欢
- 2024-11-21 前端里的拖拖拽拽
- 2024-11-21 轻松教你搞定组件的拖拽,缩放,多控制点伸缩和拖拽数据上报
- 2024-11-21 Axure实现移动端可拖动Banner
- 2024-11-21 Axure教程:页面拖动效果
- 2024-11-21 B端拖动排序的多种场景及交互
- 2024-11-21 前端【拖拽功能】实现及原理
- 2024-11-21 拖拽、双击用得好,青铜也能变王者
- 2024-11-21 看完就懂的前端拖拽那些事
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)