Ich schreibe ein Skript mit Fabric.js, um ein Bild an der aktuellen Mausposition zu vergrößern. Ich habe einige Fortschritte gemacht, aber irgendwo ist ein Fehler.
Fall 1 : Halten Sie die Maus an einem Punkt und zoomen Sie mit dem Mausrad.
Ergebnis: Perfekt funktioniert, Bild zoomt auf diesen bestimmten Pixel.
Fall 2: Zoom ein wenig an einer Position (3-5 mal mit dem Mausrad), dann 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 nicht korrekt.
Mein Code ist in dieser Geige:
Ich vermute, dass etwas mit der Bildpositionierungslogik nicht stimmt:
%Vor%Was läuft falsch?
Der Schlüssel zum Lösen dieses Rätsels 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 der Variablen factor 1.2 zu und machen folgendes:
Die obere linke Ecke des Bildes bleibt an derselben Stelle, 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, bewegen 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 der Zeichenfläche verschoben wurde. Daher ist die horizontale Position des Cursors im Bild currentMouseX - image.getLeft() vor dem Zoomen und ebenso für die vertikale Position.
So berechnen wir die Verschiebung nach dem Zoomen:
%Vor%Schließlich kompensieren wir die Verschiebung durch Verschieben des Punktes unter dem Cursor:
%Vor%Ich habe diese Berechnung in deine Demo integriert und folgende Fiddle gemacht:
Ich habe auch den Zoom-out-Vorgang implementiert.
Tags und Links javascript html canvas graphics fabricjs