在jQuery中裁剪\縮放工具的幾何計算

Question

我在jQuery中編寫了一個新的裁剪\縮放工具，我用簡單的幾何體打了一面牆。請看看：

http://jsfiddle.net/opherv/74Jep/33/

它的工作方式是這樣的：圖像進行裁剪\放大擱置在「dragcontainer」（黃色背景），即視口（黑色邊框的矩形）內坐鎮內線。該視口將具有「溢出：隱藏」，因此將只顯示圖像的一部分。

用戶有兩個控件 - 一個用於拖動圖像以將其定位在視口內，另一個用於從原始圖像中縮小圖像。

它可以正常工作，但在縮放時調整圖像位置時出現問題，因此放大\縮小看起來是正確的。

我想要什麼： 放大時，圖像應該用視作爲註冊點的中心改變的規模，而不是「滑」向兩側。

更多信息：

出現這種情況是由於通過瀏覽器進行縮放使用圖像的左上角的註冊點的事實。黃色dragcontainer正確縮放，但它的大小並沒有線性變化的事實真的讓我困惑，當試圖解決這個問題。我被迫依靠一個非常醜陋的黑客來檢查圖像是否離開了dragcontainer，如果是這樣，將它返回到適當位置，而不是正確計算它。

我會喜歡它，如果有人可以砸他的兩分錢，並詳細說明什麼應該正確的方式來計算圖像的頂部\左側的位置，同時縮放，使其「看起來是正確的」。

Answer 1

您可以在每次縮放之前和之後找到圖像寬度的差異，然後根據放大或縮小將圖像的一半移動到左側或右側。

對於高度和頂部/底部也可以做同樣的事情。

希望這可以幫助 - 這可能是一個更簡單的方法，這是我的第一個想法。如果別的跳到介意生病回來

Answer 2

可能是這個插件會幫你，好像你在找什麼：http://www.tmatthew.net/jwindowcrop