jQuery で新しいクロップ\ズーム ツールを作成していますが、単純なジオメトリで壁にぶつかりました。ご覧ください：
http://jsfiddle.net/opherv/74Jep/33/
動作方法は次のとおりです。トリミング\ズームされる画像は、ビューポート（黒い境界の長方形）内にある「ドラッグコンテナ」（黄色の背景）内にあります。ビューポートには「overflow: hidden」が表示されるため、画像の一部のみが表示されます。
ユーザーには 2 つのコントロールがあります。1 つは画像をドラッグしてビューポート内に配置するためのもので、もう 1 つは元の画像からズームアウトするためのものです。
問題なく動作しますが、ズームイン/ズームアウトが正しく見えるように、ズーム中に画像の位置を調整するのに問題があります。
私が欲しいもの： ズームすると、ビューポートの中心を登録点として使用して画像の縮尺を変更し、横に「滑る」べきではありません。
より詳しい情報：
これは、ブラウザによって行われるスケーリングが画像の左上を登録点として使用するために発生します。黄色のドラッグ コンテナは適切にスケーリングされていますが、これを解決しようとすると、そのサイズが直線的に変化しないという事実に本当に戸惑いました。画像がドラッグコンテナを離れたかどうかを確認するために、本当に醜いハックに頼らざるを得ませんでした。
誰かが彼の 2 セントをチップして、ズーム中にドラッグコンテナ内の画像の左上の位置を計算して「正しく見える」ようにする適切な方法を詳しく説明していただければ幸いです。