Heim > Web-Frontend > js-Tutorial > Wie ahme ich das Zoomverhalten von Google Maps mit Canvas nach: Zoomen um den Mauszeiger herum?

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

Patricia Arquette
Freigeben: 2024-10-25 00:38:02
Original
356 Leute haben es durchsucht

How to Mimic Google Maps Zoom Behavior with Canvas: Zooming Around the Mouse Cursor?

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);
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage