在調整大小和移動圖像時更改原點

Question

我正在嘗試製作圖像縮放器和裁剪器，但在從所需的位置調整大小時遇到​​問題。

目前，您可以調整大小（只需更改一個<img>元素的高度+）並在圖像周圍移動（抵消<img>元素的頂部和左邊距）。問題是一旦你移動它並再次調整大小，它就會從圖像的中心進行調整。我希望它調整相對於裁剪窗口的中心。

這裏是我目前有（頂部）和它應該是什麼樣子的（底部）的圖像： http://i.imgur.com/eAE4IEF.jpg

我一直無法弄清楚如何調整它的數學，然後移動它所以原點不在圖像的中心，而是在紅色窗口的中央。

我將不勝感激任何幫助。

Answer 1

這實際上是通過給定比例因子來縮放圖像內部的單個點（裁剪框的中心），該比例因子包括將該點的每個座標乘以該因子。

new_center_x = old_center_x * new_image_width/old_image_width 
new_center_y = old_center_y * new_image_height/old_image_height 

http://jsfiddle.net/jDXHz/5/

然後，您可以轉移雙方的形象和包裝盒背面由新老位置之間的差異以保持框固定的，而它周圍的圖像尺度。