使用java脚本缩放后,找到一个点的旧位置



我正在处理这个"简单的";问题持续了几个小时都没有成功,尽管我尝试了很多方法来解决它,使用SO.中建议的各种解决方案

我的问题如下:

我在画布上有一个点,当我点击它时,我的应用程序会做一些事情,通过将鼠标点击坐标与点的存储位置进行比较来识别该点。

在使用鼠标滚轮放大该点后,我再次单击该点,但鼠标坐标不再适合该点的存储位置。

我需要在缩放之前将鼠标坐标转换为它的坐标,这样我就可以与存储的位置进行比较,或者将存储的位置转换为新的画布,这样它就可以与鼠标的坐标进行比较。任何解决方案我都可以。

我知道以下数据:

";比例尺;值,

画布的大小(顶部、左侧、宽度、高度(,

画布的新原点(左上(

我想要一个使用java脚本的解决方案。

一旦我理解了这个概念,它就很简单了。

  1. 缩放后保存新的画布原点(在JS中,它调用ctx.translate((和ctx.scale((,其中ctx是画布上下文。

  2. 当需要计算鼠标在旧坐标系中的位置时,必须将画布的移动原点加回来,并乘以比例因子。

    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;

最新更新