如何使用 Canvas 模仿 Google 地图缩放行为：围绕鼠标光标缩放？

围绕鼠标光标缩放画布

使用滚轮缩放图像是 Web 应用程序中的常见功能。在本例中，目标是模仿 Google 地图的行为，其中缩放发生在鼠标光标周围。

问题

挑战在于计算必要的移动来实现这种缩放效果。给定图像的左上角坐标、宽度、高度以及鼠标光标相对于画布中心的 x 和 y 坐标，我们如何确定缩放变换？

解决方案

该解决方案涉及使用画布上下文的三个步骤：

1. 翻译：将上下文原点移动到鼠标光标的位置，以围绕它进行缩放。
2. 缩放： 按所需比例放大或缩小。
3. 平移（反向）：将原点移回原始位置。

以下 JavaScript 代码实现了这些步骤：

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

演示和附加说明

可以在此处找到此技术的工作演示：http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

该演示支持拖动、点击放大、shift点击缩小和滚轮缩放。值得注意的是，Safari 的缩放行为比 Chrome 和 Firefox 等其他浏览器更快。

以上是如何使用 Canvas 模仿 Google 地图缩放行为：围绕鼠标光标缩放？的详细内容。更多信息请关注PHP中文网其他相关文章！