HTML5 中如何将画布缩放至鼠标光标位置？

将画布缩放到鼠标光标

创建交互式 HTML5 时在涉及缩放的项目中，将缩放与光标位置对齐对于用户友好的体验至关重要。本文旨在指导您完成实现此功能所需的计算。

问题：

我们如何相对于光标位置缩放画布，类似于 Google地图？

可用变量：

• 图像坐标（x, y）
• 图像尺寸（宽度、高度）
• 相对于画布中心的光标坐标（cursor_x，cursor_y）

解决方案：

1. 平移画布：根据光标的偏移量移动画布上下文，从而允许围绕光标进行缩放。
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/tmp/canvas_zoom_to_cursor.html 进行现场演示。支持通过鼠标点击和滚轮进行拖动和缩放。

注意：

• 为了准确缩放，请将光标位置从屏幕空间变换到变换后的位置。 canvas 上下文。
• 目前，Safari 的缩放行为与其他浏览器不同，导致过度缩放。

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