Wie ahme ich das Zoomverhalten von Google Maps mit Canvas nach: Zoomen um den Mauszeiger herum?

Leinwand um den Mauszeiger zoomen

Das Zoomen von Bildern mit dem Scrollrad ist eine häufige Funktion in Webanwendungen. In diesem Fall besteht das Ziel darin, das Verhalten von Google Maps nachzuahmen, bei dem um den Mauszeiger gezoomt wird.

Problem

Die Herausforderung besteht in der Berechnung der notwendigen Bewegungen um diesen Zoomeffekt zu erzielen. Wie bestimmen wir anhand der Koordinaten der oberen linken Ecke des Bildes, der Breite, Höhe und der X- und Y-Koordinaten des Mauszeigers relativ zur Leinwandmitte die Zoomtransformationen?

Lösung

Die Lösung umfasst drei Schritte unter Verwendung des Canvas-Kontexts:

1. Übersetzen: Verschieben Sie den Kontextursprung an die Position des Mauszeigers, um den Zoom darauf zu zentrieren.
2. Skalieren:Vergrößern oder verkleinern um den gewünschten Faktor.
3. Übersetzen (umgekehrt):Bewegen Sie den Ursprung zurück in seine ursprüngliche Position.

Der folgende JavaScript-Code implementiert diese Schritte:

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

Demo und zusätzliche Hinweise

Eine funktionierende Demonstration dieser Technik finden Sie hier: http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

Die Demo unterstützt Ziehen, Klicken zum Vergrößern, Umschalt-Klicken zum Verkleinern und Scrollrad-Zoom. Es ist erwähnenswert, dass Safari ein schnelleres Zoomverhalten aufweist als andere Browser wie Chrome und Firefox.

Das obige ist der detaillierte Inhalt vonWie ahme ich das Zoomverhalten von Google Maps mit Canvas nach: Zoomen um den Mauszeiger herum?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!