如何使用 Canvas 模仿 Google 地圖縮放行為：圍繞滑鼠遊標縮放？

圍繞滑鼠遊標縮放畫布

使用滾輪縮放影像是 Web 應用程式中的常見功能。在本例中，目標是模仿 Google 地圖的行為，其中縮放發生在滑鼠遊標周圍。

問題

挑戰在於計算必要的移動來實現這種縮放效果。給定圖像的左上角座標、寬度、高度以及滑鼠遊標相對於畫布中心的 x 和 y 座標，我們如何確定縮放變換？

解決方案

解決方案涉及使用畫布上下文的三個步驟：

1. 翻譯：
2. 翻譯：將上下文原點移動到滑鼠遊標的位置，以圍繞它進行縮放。
3. 縮放： 以所需比例放大或縮小。

平移（反向）：

將原點移回原始位置。

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

以下JavaScript 程式碼實現了這些步驟：

示範和附加說明

可以在此處找到此技術的工作示範：http ://phrogz.net/tmp/canvas_zoom_to_cursor.html此示範支援拖曳、點選放大、shift點選縮小和滾輪縮放。值得注意的是，Safari 的縮放行為比 Chrome 和 Firefox 等其他瀏覽器更快。

以上是如何使用 Canvas 模仿 Google 地圖縮放行為：圍繞滑鼠遊標縮放？的詳細內容。更多資訊請關注PHP中文網其他相關文章！