在縮放的時候,若不進行處理,會於原地放大(以左上角為原點),在一些場合這樣做會降低操作方便度,如左圖。這時候有些人會採取以中心為原點放大,而在追求直覺性操作的時候,會採取以「以滑鼠為中心放大」
縮放前方塊寬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這樣