我正在处理这个"简单的";问题持续了几个小时都没有成功,尽管我尝试了很多方法来解决它,使用SO.中建议的各种解决方案
我的问题如下:
我在画布上有一个点,当我点击它时,我的应用程序会做一些事情,通过将鼠标点击坐标与点的存储位置进行比较来识别该点。
在使用鼠标滚轮放大该点后,我再次单击该点,但鼠标坐标不再适合该点的存储位置。
我需要在缩放之前将鼠标坐标转换为它的坐标,这样我就可以与存储的位置进行比较,或者将存储的位置转换为新的画布,这样它就可以与鼠标的坐标进行比较。任何解决方案我都可以。
我知道以下数据:
";比例尺;值,
画布的大小(顶部、左侧、宽度、高度(,
画布的新原点(左上(
我想要一个使用java脚本的解决方案。
一旦我理解了这个概念,它就很简单了。
-
缩放后保存新的画布原点(在JS中,它调用ctx.translate((和ctx.scale((,其中ctx是画布上下文。
-
当需要计算鼠标在旧坐标系中的位置时,必须将画布的移动原点加回来,并乘以比例因子。
seat.x=(-new_org.x+posx(/刻度;seat.y=(-new_org.y+posy(/刻度;
其中pos是计算的鼠标指针
pos.x = event.clientX - .getBoundingClientRect().left;
pos.y = event.clientY - .getBoundingClientRect().top;