web-dev-qa-db-ja.com

マウスの位置を中心とした画像ズーム

現在のマウス位置で画像をズームするために、Fabric.jsを使用してスクリプトを作成しています。ある程度の進歩はありましたが、どこかにエラーがあります。

ケース1：マウスを一点に保ち、マウスホイールでズームします。

結果：完全に機能し、画像はその特定のピクセルでズームします。

ケース2：1つの位置で少しズームインし（マウスホイールで3〜5回）、マウスを新しい位置に移動してそこでズームインします。

結果：最初のポイントでは正常に機能しますが、別のポイントに移動してズームした後、画像の位置が正しくありません。

私のコードはこのフィドルにあります：

https://jsfiddle.net/gauravsoni/y3w0yx2m/1/

画像の配置ロジックに問題があると思われます。

imgInstance.set({top:imgInstance.getTop()-newMousY,left:imgInstance.getLeft()-newMousX});

何が問題なのですか？

javascripthtmlcanvasgraphicsfabricjs
13
Gaurav_soni

このパズルを解くための鍵は、画像がどのように拡大されるかを理解することです。 1.2のズーム率を使用している場合、画像は20％大きくなります。変数factorに1.2を割り当て、次のようにします。

_image.setScaleX(image.getScaleX() * factor);
image.setScaleY(image.getScaleY() * factor);
_

画像を拡大している間、画像の左上隅は同じ場所にとどまります。次に、マウスカーソルの下のポイントについて考えます。カーソルの上下のすべてのピクセルが20％大きくなりました。これにより、カーソルの下のポイントが右下に20％移動します。その間、カーソルは同じ位置にあります。

カーソルの下のポイントの変位を補正するために、ポイントがカーソルの下に戻るように画像を移動します。ポイントが上下に移動しました。画像を同じ距離だけ上下に移動します。

ズーム操作の前に画像がキャンバス内で移動された可能性があるため、画像内のカーソルの水平位置はズーム前はcurrentMouseX - image.getLeft()であり、垂直位置も同様です。

ズーム後の変位の計算方法は次のとおりです。

_var dx = (currentMouseX - image.getLeft()) * (factor - 1),
    dy = (currentMouseY - image.getTop()) * (factor - 1);
_

最後に、ポイントをカーソルの下に戻すことで、変位を補正します。

_image.setLeft(image.getLeft() - dx);
image.setTop(image.getTop() - dy);
_

この計算をデモに統合し、次のフィドルを作成しました。

https://jsfiddle.net/fgLmyxw4/

ズームアウト操作も実装しました。

35
Michael Laszlo