如何在 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+点击缩小
• 滚轮缩放

演示： http://phrogz.net/tmp/canvas_zoom_to_cursor.html

注意： 在 Safari 中，缩放行为可能与 Chrome 或 Firefox 不同。

以上是如何在 HTML5 中将画布上下文缩放到鼠标光标？的详细内容。更多信息请关注PHP中文网其他相关文章！