Wie zoomt man in HTML5 einen Canvas-Kontext auf den Mauszeiger?

Zoomen des Canvas-Kontexts auf den Mauszeiger

Bei einem HTML5-Canvas-Projekt, bei dem das Zoomen von Bildern mithilfe des Scrollrads erforderlich ist, kann es sein, dass Sie auf die Herausforderung stoßen Zoomen in Richtung des Cursors, ähnlich der Funktionalität in Google Maps. Um diesen Effekt zu erzielen, ist eine Reihe von Berechnungen erforderlich.

Berechnung der Bewegungen

1. Bestimmung der Canvas-Kontexttransformation:

   • Übersetzen Sie den Canvas-Kontext um den Versatz des Cursors (pt.x, pt.y).
   • Skalieren Sie den Kontext mit ein Zoomfaktor (Faktor).
   • Übersetze den Kontext um das Negativ des Cursor-Versatzes zurück.

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. Transformation der Cursorposition:

   • Die Koordinaten des Bildschirmbereichs des Cursors müssen für ein genaues Zoomen in die Koordinaten des transformierten Leinwandkontexts umgewandelt werden.

Beispieldemonstration

Besuchen Sie den folgenden Link für ein funktionierendes Beispiel, das Folgendes enthält:

• Leinwand Bild zoomt zum Cursor
• Drag-Unterstützung
• Zum Vergrößern klicken, Umschalt-Klick zum Verkleinern
• Scrollrad-Zoom

Demo: http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Hinweis: In Safari kann sich das Zoomverhalten von Chrome oder Firefox unterscheiden.

Das obige ist der detaillierte Inhalt vonWie zoomt man in HTML5 einen Canvas-Kontext auf den Mauszeiger?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!