創作內容

1 GP

關於很無聊的 「根據滑鼠在圖片上的位置縮放」

作者:小宋喵│2020-09-10 19:52:49│巴幣:1,000│人氣:228
在縮放的時候,若不進行處理,會於原地放大(以左上角為原點),在一些場合這樣做會降低操作方便度,如左圖。這時候有些人會採取以中心為原點放大,而在追求直覺性操作的時候,會採取以「以滑鼠為中心放大」

縮放前方塊寬width,縮放前方塊高height,縮放前方塊座標xy,倍率scale(scale > 1)
縮放後方塊寬WIDTH,縮放後方塊高HEIGHT,縮放後方塊座標XY
從以不做處理直接放大來說,小方塊與大方塊的間距為 (scale-1)*width,也就是WIDTH-width
若要以中心來放大的話,它的具體操作會像大方塊調整自己的位置,使兩個方塊的中心一致,那麼要如何知道大方塊要偏移多少才會在中心呢?

根據觀察的結果,可以知道大小方塊的間距縮為本來的1/2,而我們需要的偏移量就會是(原座標-間距/2)

那麼換到以滑鼠為中心呢?

我們需要先知道:滑鼠在圖片上在小方塊中畫出的十字,上下、左右的比例為何,以中心來說上:下 = 1:1,左:右 = 1:1,因為他們佔的長度一致

而滑鼠在小方塊上就不一樣了,所以我們要算出他們的比例。但是我們只需要知道上與左的即可,因為座標是基於左上角
如圖,從小方塊的xy座標到滑鼠位置即為左線段與上線段的長度,拿這個再除以小方塊寬高就可以獲得比例
獲得比例後再去乘以兩方塊都於左上時的間距,即可獲得偏移量,最後將小方塊xy減去偏移量就可實現以滑鼠在圖片上的位置放大

那麼縮小呢?只要將小方塊xy加上偏移量就好。
偏移量化簡後可以獲得這個公式:

以上 大概4這樣
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4912114
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

1喜歡★www5911 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:小宋日常~~ v(≧∀≦... 後一篇:小宋日常~~ v(≧∀≦...

追蹤私訊切換新版閱覽

作品資料夾

xzp83502在線巴哈們
果果日記小屋 歡迎進來參觀 謝謝^^看更多我要大聲說昨天23:10


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】