## 如何在 HTML5 Canvas 中實現平滑的縮放到遊標功能？

保持滑鼠遊標周圍的縮放焦點

在HTML5 中導航影像時，圍繞滑鼠遊標進行縮放（如Google 地圖中所示）可增加直覺的用戶體驗。但計算此移動可能會令人困惑。

方法：

向遊標縮放：

• 翻譯： 將畫布上下文移動遊標偏移。
• 縮放： 依所需係數縮放。
• 反向翻譯： 向後移動遊標偏移的相反值。

計算：

給定影像位置和尺寸，以及相對於畫布中心的遊標座標：

• 將遊標位置轉換為變換後的畫布上下文：dx = (cursorX - canvasCenterX) * 比例； dy = (cursorY - canvasCenterY) * 比例;
• 翻譯：ctx.translate(dx, dy);
• 比例：ctx.translate(dx, dy);
• 比例：ctx. scale(factor, Factor);

反向翻譯：ctx.translate(-dx, -dy);

演示：

訪問提供的演示鏈接：http://phrogz.net/tmp/canvas_zoom_to_cursor.html .

此範例具有拖曳、點選縮放、Shift-點選縮放和滾輪縮放的功能。

注意：

目前 Safari 的縮放速度可能與 Chrome 或 Firefox 不同。

以上是## 如何在 HTML5 Canvas 中實現平滑的縮放到遊標功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！