HTML5 中如何將畫布縮放至滑鼠遊標位置？

將畫布縮放到滑鼠遊標

建立互動式HTML5 時在涉及縮放的項目中，將縮放與遊標位置對齊對於用戶友好的體驗至關重要。本文旨在指導您完成實現此功能所需的計算。

問題：

我們如何相對於遊標位置縮放畫布，類似於 Google地圖？

可用變數：

• 影像座標（x, y）
• 影像尺寸（寬度、高度）
• 影像尺寸（寬度、高度）

相對於畫布中心的遊標座標（cursor_x，cursor_y）

解：
2. 平移畫布：
3. 平移畫布：

縮放畫布：

調整比例因子以放大或縮小。

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

向後翻譯： 將畫布上下文回到其原始位置，補償初始翻譯。

以下是程式碼片段：

範例操作：

• 造訪http://phrogz.net/sor/canvas_zoom .html 進行現場示範。支援透過滑鼠點擊和滾輪進行拖曳和縮放。
• 注意：

為了準確縮放，請將遊標位置從螢幕空間轉換到變換後的位置。 canvas 上下文。 目前，Safari 的縮放行為與其他瀏覽器不同，導致過度縮放。

以上是HTML5 中如何將畫布縮放至滑鼠遊標位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！