Bild zoom zentriert auf Mausposition

Question

Ich schreibe ein Skript mit Fabric.js, um ein Bild an der aktuellen Mausposition zu vergrößern. Ich habe Fortschritte gemacht, aber irgendwo ist ein Fehler.

Fall 1: die Maus an einem Punkt halten und mit dem Mausrad zoomen.

Ergebnis: Funktioniert perfekt, Bild zoomt bei diesem bestimmten Pixel.

Fall 2: Zoomen Sie ein wenig an einer Position (3-5 Mal mit dem Mausrad), bewegen Sie die Maus an eine neue Position und zoomen Sie hinein.

Ergebnis: Funktioniert gut für den ersten Punkt, aber nach dem Verschieben zu einem anderen Punkt und Zoomen ist die Bildposition falsch.

ist mein Code in dieser Geige:

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

Ich vermute, es ist etwas falsch mit dem Bild Positionierlogik ist:

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

Was nicht in Ordnung ist?

Answer 1

Der Schlüssel zum Lösen dieses Puzzles ist zu verstehen, wie das Bild vergrößert wird. Wenn wir einen Zoomfaktor von 1,2 verwenden, wird das Bild 20% größer. Wir weisen 1.2 auf die Variable factor und wie folgt vor:

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

Die obere linke Ecke des Bildes an der gleichen Stelle bleibt, während das Bild vergrößert wird. Betrachten Sie nun den Punkt unter dem Mauszeiger. Jedes Pixel über und links vom Cursor wurde um 20% größer. Dies verschiebt den Punkt unter dem Cursor um 20% nach unten und nach rechts. Der Cursor befindet sich in der gleichen Position.

Um die Verschiebung des Punktes unter dem Cursor zu kompensieren, verschieben wir das Bild so, dass der Punkt wieder unter den Cursor gelangt. Der Punkt ging nach unten und nach rechts; Wir bewegen das Bild nach oben und links um die gleiche Entfernung.

Beachten Sie, dass das Bild möglicherweise vor dem Zoomen in die Zeichenfläche verschoben wurde, sodass die horizontale Position des Cursors im Bild currentMouseX - image.getLeft() vor dem Zoomen und ebenso für die vertikale Position ist.

Dies ist, wie wir die Verschiebung nach dem Zoomen berechnen:

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

Schließlich haben wir durch Bewegen der Punkt wieder unter dem Cursor für die Verschiebung kompensieren:

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

ich diese Berechnung integriert in Ihre Demo und machte folgende Geige:

https://jsfiddle.net/sbpag9fr/3/

Ich habe auch den Zoom-out-Vorgang implementiert.