## Wie erreicht man eine reibungslose Zoom-to-Cursor-Funktionalität in HTML5 Canvas?

Beibehalten des Zoomfokus um den Mauszeiger herum

Beim Navigieren in Bildern in HTML5 sorgt das Zoomen um den Mauszeiger, wie in Google Maps, für ein intuitives Benutzererlebnis. Die Berechnung dieser Bewegung kann jedoch verwirrend sein.

Ansatz:

Zum Zoomen in Richtung des Cursors:

• Übersetzen:Verschieben Sie den Leinwandkontext um der Cursor-Versatz.
• Skalieren:Zoom um einen gewünschten Faktor.
• Umgekehrte Übersetzung:Rückwärtsverschiebung um das Gegenteil des Cursor-Versatzes.

Berechnung:

Angesichts der Bildposition und -abmessungen sowie der Cursorkoordinaten relativ zur Leinwandmitte:

• Konvertieren Sie die Cursorposition in die transformierte Leinwand Kontext: dx = (cursorX - canvasCenterX) * scale; dy = (cursorY - canvasCenterY) * scale;
• Übersetzen: ctx.translate(dx, dy);
• Scale: ctx.scale(factor, Factor);
• Rückwärtsübersetzen: ctx.translate(-dx, -dy);

Demonstration:

Besuchen Sie den bereitgestellten Demo-Link: http://phrogz.net/tmp/canvas_zoom_to_cursor.html .

Dieses Beispiel umfasst Ziehen, Klicken zum Zoomen, Umschalt-Klicken zum Zoomen und Zoomen mit dem Scrollrad.

Hinweis:

Derzeit die Zoomgeschwindigkeit von Safari kann von Chrome oder Firefox abweichen.

Das obige ist der detaillierte Inhalt von## Wie erreicht man eine reibungslose Zoom-to-Cursor-Funktionalität in HTML5 Canvas?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!