全局缩放情况下的局部不缩放解决方案

lidashuang 发布于2019-08-20 14:16 / 1627人阅读

摘要：然后有个需求就是当节点缩放之后，不能随着整体进行缩放保持原来大小，这么处理会让放大效果看的清楚一点实现方案整体缩放的同时对其中的节点再做多带带的缩放变幻处理，以抵消掉整体缩放带来的放大效果，从而视觉看上去没有被放大。

需求

d3.zoom() 来在整个group(g)元素上做缩放操作，这本来没什么。
然后有个需求就是当节点缩放>100%之后，不能随着整体进行缩放(保持原来大小，这么处理会让放大效果看的清楚一点)

实现方案

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

主要遇到的问题

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

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

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

方案问题

其实这并不是什么好的解决方案，只是对于这个需求(讲道理一般缩放都整体缩放就可以了)，基于现在的布局方式最容易尝试解决。
带来的弊端就是
整体放大(在g.container做放大处理) 对单个节点反向缩放需要比较多的反向计算，链路放大变粗则通过设置实际stroke-width变细来抵消。

知识点

svg transform知识点

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

参考

get screen position of D3 Nodes after transform?
svg元素上的transform

云服务器 GPU云服务器切割缩放鼠标缩放缩放效果图片缩放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81506.html

rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

wangbinke 2019-08-29 16:56 评论0 收藏0
rem, vw, 还是...? 各凭本事的移动端适配方案

摘要：另一种就是不缩放，对等问题单独引入处理方案。彩蛋部分相信大多数同学也是有想法在实际开发中把融入到现有的移动端适配方案中的。前言 2018年最后的法定假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页面的终端适配和再...

tianren124 2019-08-23 12:21 评论0 收藏0
从前端界面开发谈微信小程序体验

本文由云+社区发表作者介绍：练小习，2011年加入搜狐，负责搜狐相册的产品策划与前端开发。2015年后加入腾讯 ISUX (社交用户体验设计部)，目前主要负责腾讯云的UI开发工作，专注于人机交互，有丰富的UI开发经验。这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我...

NoraXie 2019-08-23 14:23 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（上）

摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...

church 2019-08-23 13:11 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（上）

摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...

masturbator 2019-08-29 17:16 评论0 收藏0