国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

lidashuang / 1663人閱讀

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

需求

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

實(shí)現(xiàn)方案

整體縮放的同時(shí)對(duì)其中的節(jié)點(diǎn)再做多帶帶的縮放變幻處理，以抵消掉整體縮放帶來(lái)的放大效果，從而視覺(jué)看上去沒(méi)有被放大。

主要遇到的問(wèn)題

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

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

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

方案問(wèn)題

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

知識(shí)點(diǎn)

svg transform知識(shí)點(diǎn)

縮放之后 計(jì)算實(shí)際位置的坐標(biāo)問(wèn)題(getCTM())

參考

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/81506.html

相關(guān)文章

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

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

    wangbinke 評(píng)論0 收藏0

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

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

    tianren124 評(píng)論0 收藏0

  • 從前端界面開(kāi)發(fā)談微信小程序體驗(yàn)

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

    NoraXie 評(píng)論0 收藏0

  • 用Vue開(kāi)發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）

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

    church 評(píng)論0 收藏0

  • 用Vue開(kāi)發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）

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

    masturbator 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<