处理中的绝对鼠标位置

Question

这是我在处理论坛上发布的帖子的副本贴（目前为止还没有答案），我想我也可以在这里尝试。

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

嘿，我是新来处理，我用它来做一个无闪光的网站，所以我几乎画在画布上。

我遇到了鼠标位置的问题，虽然绘图时的坐标考虑左上角位置为0,0;实际的鼠标坐标认为0,0是浏览器窗口的左上角。

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

有什么办法可以使鼠标相对于画布的坐标？这样我可以改变浏览器窗口的大小，左上角的鼠标坐标始终为0,0。

所以这就是问题所在，我不知道有多少脂肪酶在这里计算器与此是有经验的，但我希望有人可以帮助我:)

感谢堆栈溢出社区提前。

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; 

你应该用CSS选择器为您的画布区域更换#canvas。

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

Answer 2

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

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

Answer 3

处理真的不打算创建网页..这比闪存的网站恶化（处理草图是Java小应用程序 - Java的是不常见的，更为资源密集型和缓慢的加载..）

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

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