成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

全局縮放情況下的局部不縮放解決方案

lidashuang / 1668人閱讀

摘要:然后有個需求就是當(dāng)節(jié)點縮放之后,不能隨著整體進(jìn)行縮放保持原來大小,這么處理會讓放大效果看的清楚一點實現(xiàn)方案整體縮放的同時對其中的節(jié)點再做多帶帶的縮放變幻處理,以抵消掉整體縮放帶來的放大效果,從而視覺看上去沒有被放大。

需求

d3.zoom() 來在整個group(g)元素上做縮放操作,這本來沒什么。
然后有個需求就是當(dāng)節(jié)點縮放>100%之后,不能隨著整體進(jìn)行縮放(保持原來大小,這么處理會讓放大效果看的清楚一點)

實現(xiàn)方案

整體縮放的同時對其中的節(jié)點再做多帶帶的縮放變幻處理,以抵消掉整體縮放帶來的放大效果,從而視覺看上去沒有被放大。

主要遇到的問題

坐標(biāo)位置的處理,縮放會引起平移translate和縮放scale值的變化

svg元素縮放和普通html 元素縮放不一樣

后續(xù)在拖拽的時候 需要再處理坐標(biāo)位置

方案問題

其實這并不是什么好的解決方案,只是對于這個需求(講道理一般縮放都整體縮放就可以了),基于現(xiàn)在的布局方式最容易嘗試解決。
帶來的弊端就是
整體放大(在g.container做放大處理) 對單個節(jié)點反向縮放 需要比較多的反向計算,鏈路放大變粗則通過設(shè)置實際stroke-width變細(xì)來抵消。

知識點

svg transform知識點

縮放之后 計算實際位置的坐標(biāo)問題(getCTM())

參考

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/81506.html

相關(guān)文章

  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了,我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    wangbinke 評論0 收藏0
  • rem, vw, 還是...? 各憑本事的移動端適配方案

    摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了,我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...

    tianren124 評論0 收藏0
  • 從前端界面開發(fā)談微信小程序體驗

    本文由云+社區(qū)發(fā)表作者介紹:練小習(xí),2011年加入搜狐,負(fù)責(zé)搜狐相冊的產(chǎn)品策劃與前端開發(fā)。2015年后加入騰訊 ISUX (社交用戶體驗設(shè)計部),目前主要負(fù)責(zé)騰訊云的UI開發(fā)工作,專注于人機(jī)交互,有豐富的UI開發(fā)經(jīng)驗。 這段時間有幸加入了一個關(guān)于微信小程序的項目開發(fā)組,從無到有的根據(jù)文檔自行學(xué)習(xí)了小程序的開發(fā)過程,前面已經(jīng)有幾位前輩的文章珠玉在前,我這里就先從前端界面的開發(fā)方面談一談小程序以及我...

    NoraXie 評論0 收藏0
  • 用Vue開發(fā)仿旅游站webapp項目總結(jié) (上)

    摘要:寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注開發(fā)仿旅游站項目總結(jié)下溫馨提示此文章,僅是做完項目后的個人覺得可以總結(jié)下來的操作思路,接觸不久的朋友應(yīng)該會有收獲。 寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容... 全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧...下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注 => Vue開發(fā)仿旅游站we...

    church 評論0 收藏0
  • 用Vue開發(fā)仿旅游站webapp項目總結(jié) (上)

    摘要:寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注開發(fā)仿旅游站項目總結(jié)下溫馨提示此文章,僅是做完項目后的個人覺得可以總結(jié)下來的操作思路,接觸不久的朋友應(yīng)該會有收獲。 寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容... 全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧...下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注 => Vue開發(fā)仿旅游站we...

    masturbator 評論0 收藏0

發(fā)表評論

0條評論

lidashuang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<