如何使用 processing.js 在画布外查看 mouseReleased() 事件答案

【问题标题】：how to see mouseReleased() event outside canvas using processing.js如何使用 processing.js 在画布外查看 mouseReleased() 事件
【发布时间】：2015-05-16 09:51:11
【问题描述】：

我想在处理中用鼠标在屏幕上拖动一个对象。我将鼠标放在对象上时将acquired 设置为true，将鼠标放在对象上时设置为false，因此：

void mousePressed() {
  if (overThing()) {
    acquired = true;
  }
}

void mouseReleased() {
  acquired = false;
}

然后我在update()中查询acquired，如果是true，则拖动对象。

void update() {
  \\ other stuff...
  if (acquired) {
    \\ drag thing code ...
  }
}

这一切都在处理中正常工作。 mouseReleased() 无论我在活动窗口内部还是外部释放鼠标都会被调用。

但是，当我使用 processing.js (v1.4.8) 将代码移动到 Chrome 时，如果我在外部释放鼠标，mouseReleased() 将被调用不画布（无论鼠标是否仍在网页上，还是在浏览器窗口之外）。因此，当我将（现在未单击的）鼠标返回到画布时，对象仍然被拖动。

我尝试在update() 中包含mousePressed 的测试，但在这些情况下也会返回true。

对我需要做些什么以使鼠标状态更改在在 processing.js 中可见的画布上有什么帮助吗？

【问题讨论】：

标签： mouseevent processing processing.js

【解决方案1】：

我不具体了解处理，但在小部件外部释放鼠标按钮是 GUI 开发中的常见问题。

我怀疑您无法知道鼠标在小部件外部释放的确切时间，但您有两个选择：

按照@Kevin 的建议，将acquired = false 设置为mouseOut()。
我假设 Processing 中有某种类型的 mouseEntered() 方法，以及知道当前是否按下鼠标按钮的某种方式（全局变量或传递给 mouseEntered() 的事件对象）。可以捕获鼠标输入事件，检查鼠标是否被释放，然后设置acquired = false。

像这样：

void mouseEntered() {
  if (mouse button is pressed) {
    acquired = false;
  }
}

编辑：从您的 cmets @Susan 看来，processing.js 中似乎存在一个错误，如果在画布外释放鼠标按钮，则 mousePressed 未设置为 false。指出这是一个错误的一件事是the mouse movement example on the processing website 也显示了这种行为。

根据您对该网站的控制程度以及您想要付出多少努力，您可以通过编写一些 javascript（与您的处理代码分开）来自己修复错误：

在页面<body>上定义一个mouseUp()事件，以捕捉页面上的所有鼠标释放事件。
在mouseUp() 事件中，检查该事件是否来自您的处理控件。（可能有一个事件对象传递给mouseUp() 函数，您可能需要为处理控件提供一个 ID 来识别它）
如果事件不是来自您的处理控件，那么您自己在处理控件上触发mouseUp 事件。这应该（希望！）在您的处理代码中触发鼠标事件。
我不确定在处理您发送的事件时，Processing 会对鼠标 (x,y) 位置超出其控制范围产生什么影响。您可能想在事件对象上设置一个标志（假设您可以向事件对象添加额外的数据）来表示“不要使用此事件的 (x,y) 位置 - 它不在控制范围内”。

Edit2：这比我想象的要容易！这是用于检测在处理画布之外释放鼠标并将 mouseReleased 事件发送到画布的 JavaScript 代码。我已经在 Processing 网站的鼠标移动示例中对其进行了测试，它修复了这个错误。它使用 jQuery（尽管它可以被重写为不使用 jQuery），并且它假设您的处理画布的 ID 为“processingCanvas”：

$(':not(processingCanvas)').mouseup(function(){
  Processing.getInstanceById('processingCanvas').mouseReleased();
});

要使用此代码，请将其包含在页面中的任何位置（在 JavaScript 文件或

Processing 对象允许 JavaScript 调用在 Processing 代码中定义的任何函数。这里我用它来调用 Processing 的内置 mouseReleased() 函数，但是如果你想调用一个自定义函数来以不同的方式处理 mouse-released-outside 状态，那么你可以。

【讨论】：

谢谢亚当。但是当我将鼠标放回画布上时，它会显示mousePressed == true，无论它是否已从画布上释放出来。好像底层系统没有收到事件。
好的 - 我现在明白了 - 我认为这是 processing.js 中的一个错误 - 我已经用可能的解决方法更新了我的答案。
Edit2 非常完美！谢谢。

【解决方案2】：

您应该使用mouseOut() 函数来检测鼠标何时离开草图：

void mouseOut() {
  acquired = false;
}

更多信息请参考here。

【讨论】：

谢谢。但我想在mouseReleased 上将acquired 设置为false，而不是在鼠标离开画布时。因此，如果我不从画布上释放鼠标，当我将鼠标放回画布上时，对象会继续被拖动。有没有办法做到这一点？（当我将鼠标放回画布上时，它会显示mousePressed == true，无论它是否已从画布上释放。）