如何在 HTML5 中將畫布上下文縮放到滑鼠遊標？

將畫布上下文縮放到滑鼠遊標

在涉及使用滾輪縮放影像的HTML5 畫布專案中，您可能會遇到以下挑戰向遊標縮放，類似Google 地圖中的功能。為了達到這個效果，需要進行一連串的計算。

計算運動

1. 確定畫布上下文轉換：

   • 以光標偏移🎜>以光標偏移量平移畫布上下文（pt.x、pt.y）。
   • 使用縮放上下文縮放因子（因子）。
   • 將上下文翻譯迴遊標偏移量的負數。

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. 轉換遊標位置：

   • 遊標的空間為變換後的畫布上下文座標以進行精確縮放。

範例示範

造訪以下連結以查看工作範例，其中包括：

畫布圖片縮放至遊標處

• 支援拖曳
• 點擊放大，Shift+點擊縮小
• 滾輪縮放

示範：

示範：

注意： 在Safari 中，縮放行為可能與Chrome 或Firefox 不同。

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