processing - 处理中的绝对鼠标位置

Question

这是我在处理论坛(到目前为止我还没有得到答案)上发表的帖子的复制粘贴，我想我不妨在这里试试。

处理是一种非常酷的绘制东西的方式，特别是对于网页。仅供引用 http://processing.org

嘿，我是处理新手，我正在用它来制作一个无闪存网站，所以我几乎是在 Canvas 上画画。

我的鼠标位置有问题，虽然坐标，在绘制时，将左上角视为位置 0,0；实际的鼠标坐标将 0,0 视为浏览器窗口的左上角。

所以我的问题是， Canvas 在一个居中的网页上运行，每当浏览器改变大小时， Canvas 内鼠标的坐标也会改变。

有没有办法让鼠标相对于 Canvas 的坐标？这样我就可以更改浏览器窗口的大小，并且鼠标坐标的左上角始终为 0,0？

所以这就是问题所在，我不知道有多少人在 stackoverflow 中遇到过这个问题，但我希望有人能帮助我:)

提前感谢堆栈溢出社区。

Answer 1

我对处理不熟悉，但是你不能只计算浏览器窗口左上角和 Canvas 左上角的差异吗？
即(使用jquery)

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

然后你可以做这样的事情:

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

您应该将 #canvas 替换为 Canvas 区域的 css 选择器。

还要注意 window 是全局对象，我在这里使用它来处理可能的范围问题。