博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
全局缩放情况下的局部不缩放解决方案
阅读量:5869 次
发布时间:2019-06-19

本文共 446 字,大约阅读时间需要 1 分钟。

需求

clipboard.png

d3.zoom() 来在整个group(g)元素上做缩放操作,这本来没什么。

然后有个需求就是当节点缩放>100%之后,不能随着整体进行缩放(保持原来大小,这么处理会让放大效果看的清楚一点)

实现方案

整体缩放的同时对其中的节点再做单独的缩放变幻处理,以抵消掉整体缩放带来的放大效果,从而视觉看上去没有被放大。

clipboard.png

主要遇到的问题

  • 坐标位置的处理,缩放会引起平移translate和缩放scale值的变化

  • svg元素缩放和普通html 元素缩放不一样

  • 后续在拖拽的时候 需要再处理坐标位置

方案问题

其实这并不是什么好的解决方案,只是对于这个需求(讲道理一般缩放都整体缩放就可以了),基于现在的布局方式最容易尝试解决。

带来的弊端就是
整体放大(在g.container做放大处理) 对单个节点反向缩放 需要比较多的反向计算,链路放大变粗则通过设置实际stroke-width变细来抵消。

知识点

  • svg transform知识点

  • 缩放之后 计算实际位置的坐标问题(getCTM())

参考

转载地址:http://paxnx.baihongyu.com/

你可能感兴趣的文章
grep 零宽断言
查看>>
被神话的大数据——从大数据(big data)到深度数据(deep data)思维转变
查看>>
修改校准申请遇到的问题
查看>>
python大佬养成计划----win下对数据库的操作
查看>>
监控软件zabbix之安装
查看>>
Exchange Server 2016 独立部署/共存部署 (七)—— DAG功能测试
查看>>
Linux 进程中 Stop, Park, Freeze【转】
查看>>
Spark修炼之道(基础篇)——Linux大数据开发基础:第九节:Shell编程入门(一)...
查看>>
Duplicate Symbol链接错误的原因总结和解决方法[转]
查看>>
适配器模式
查看>>
建立低权限的ftp帐号
查看>>
htpasswd
查看>>
微软整合实验(七):布署Exchange2010 Mailbox高可用(DAG)
查看>>
spring定时器----JobDetailBean
查看>>
我的友情链接
查看>>
XP下如何删除附件中的游戏组件
查看>>
我的友情链接
查看>>
emma的几个不足之处
查看>>
Java工具类——UUIDUtils
查看>>
使用Node搭建reactSSR服务端渲染架构
查看>>