围绕鼠标光标缩放画布
使用滚轮缩放图像是 Web 应用程序中的常见功能。在本例中,目标是模仿 Google 地图的行为,其中缩放发生在鼠标光标周围。
问题
挑战在于计算必要的移动来实现这种缩放效果。给定图像的左上角坐标、宽度、高度以及鼠标光标相对于画布中心的 x 和 y 坐标,我们如何确定缩放变换?
解决方案
该解决方案涉及使用画布上下文的三个步骤:
以下 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中文网其他相关文章!