处理中的绝对鼠标位置

Question

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

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

我是处理新手，我用它来制作无闪光网站，所以我几乎是在画布上画画。

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

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

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

Answer 1

我对处理不熟悉，但是你不能只计算浏览器窗口左上角和画布左上角之间的差异吗？
ie（使用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;

你应该用画布区域的css选择器替换#canvas。

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

Answer 2

它比 Flash 更糟糕（处理草图是 Java 小程序 - Java 不太常见，资源密集程度更高，加载速度也很慢。）

处理确实不是为了创建网页而设计的。对于网站而言， ，有 processing.js，Processing 的 Javascript 端口。

snake 示例 访问鼠标。 由于它是 Javascript，并且画布是一个 div，所以坐标应该比 Java （它存在于它自己的 VM 世界中）更理智一些，但我可能是错的..

Answer 3

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

只需在屏幕中央、左上角和右下角绘制一个红点即可。 要求用户单击它们并检索坐标。 然后，您就知道屏幕的角在哪里了。