Wie zoome ich eine Leinwand in HTML5 auf die Mauszeigerposition?

Eine Leinwand auf den Mauszeiger zoomen

Beim Erstellen einer interaktiven HTML5- Bei Projekten mit Zoom ist die Ausrichtung des Zooms an der Position des Cursors für ein benutzerfreundliches Erlebnis von entscheidender Bedeutung. Dieser Artikel soll Sie durch die Berechnungen führen, die zur Implementierung dieser Funktionalität erforderlich sind.

Problem:

Wie können wir eine Leinwand relativ zur Cursorposition zoomen, ähnlich wie bei Google? Karten?

Verfügbare Variablen:

• Bildkoordinaten (x, y)
• Bildabmessungen (Breite, Höhe)
• Cursorkoordinaten relativ zur Leinwandmitte (cursor_x, Cursor_y)

Lösung:

1. Leinwand übersetzen: Verschieben Sie den Leinwandkontext basierend auf dem Versatz des Cursors, sodass Sie um den Cursor herum zoomen können.
2. Leinwand skalieren: Passen Sie den Skalierungsfaktor zum Vergrößern oder Verkleinern an.
3. Zurück übersetzen: Bringen Sie den Canvas-Kontext an seine ursprüngliche Position zurück und kompensieren Sie die ursprüngliche Übersetzung.

Hier ist das Code-Snippet:

<code class="javascript">ctx.translate(cursor_x, cursor_y);
ctx.scale(factor, factor);
ctx.translate(-cursor_x, -cursor_y);</code>

Beispiel in Aktion:

Besuchen Sie http://phrogz.net/tmp/canvas_zoom_to_cursor.html für eine Live-Demonstration. Es unterstützt das Ziehen und Zoomen mit Mausklicks und dem Scrollrad.

Hinweis:

• Für ein genaues Zoomen transformieren Sie die Cursorposition vom Bildschirmbereich in den transformierten Canvas-Kontext.
• Derzeit unterscheidet sich das Zoomverhalten von Safari von dem anderer Browser, was zu übermäßigem Zoomen führt.

Das obige ist der detaillierte Inhalt vonWie zoome ich eine Leinwand in HTML5 auf die Mauszeigerposition?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!