处理时的绝对鼠标位置

Question

这是我在处理论坛上制作的帖子的复制粘贴（到目前为止我还没有得到答案）我想也可以试试这里。

处理是一种非常酷的绘制方式，特别是对于网页。仅作为参考http://processing.org

嘿，我是处理新手，我正在使用它制作一个无闪烁的网站，所以我几乎画在画布上。

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

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

有没有办法让鼠标的坐标相对于画布？这样我可以改变浏览器窗口的大小，左上角对于鼠标坐标总是0,0？

所以这就是问题所在，我不知道stackoverflow中有多少ppl经历过这个，但我希望有人可以帮助我：）

提前感谢堆栈溢出社区。

Answer 1

我不熟悉处理，但你不能只计算浏览器窗口左上角和画布左上角之间的差异吗？ 即（使用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替换为画布区域的css选择器。

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

Answer 2

处理实际上不是用于创建网页..它比网站的Flash更糟糕（处理草图是Java小程序 - Java不太常见，资源密集程度更高，加载速度慢...... ）

也就是说，有processing.js，一个处理的Javascript端口。

snake example访问鼠标。由于它是Javascript，并且画布是div，因此坐标应该比Java（它存在于它自己的VM世界中）更加理智，但我可能是错的......

Answer 3

您可以在使用前要求用户校准系统。这不是问题的答案，而是解决问题的方法。

只需在屏幕中央画一个红点，左上角和右边的僵局。要求用户单击它们，并检索坐标。然后，你知道屏幕的角落在哪里。