如何使用 processing.js 在 canvas 之外查看 mouseReleased() 事件

Question

我有一个对象，我想在处理中用鼠标在屏幕上拖动。我将 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() 会被调用，无论我是在活动 window 内部还是外部释放鼠标。

但是，当我使用 processing.js (v1.4.8) 将代码移动到 Chrome 时，mouseReleased() 是 而不是 我在canvas外释放鼠标（不管鼠标还在网页上，还是在浏览器外window）。因此，当我 return 将（现在未单击的）鼠标移动到 canvas 时，对象仍然被拖来拖去。

我尝试在 update() 中包括 mousePressed 的测试，但在这种情况下，return 也包括 true。

关于我需要做什么来改变鼠标状态的任何帮助在之外 canvas 可见 processing.js?

Answer 1

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

void mouseOut() {
  acquired = false;
}

参考资料中的更多信息 here。

Answer 2

我不太了解 Processing，但在小部件外部释放鼠标按钮是 GUI 开发中的一个常见问题。

我怀疑你无法知道鼠标在widget外释放的准确时间，但你有两个选择：

按照@Kevin 的建议在mouseOut() 中设置acquired = false。
我假设在 Processing 中有某种类型的 mouseEntered() 方法，还有一些知道当前是否按下鼠标按钮的方法（全局变量或传递给 mouseEntered()).可以捕捉鼠标进入事件，判断鼠标是否松开，然后设置acquired = false。

像这样：

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

编辑： 从你的评论来看，@Susan，processing.js 中似乎有一个错误，如果鼠标按钮是canvas 外发布。指出这是一个错误的一件事是 the mouse movement example on the processing website 也显示了这种行为。

根据您对正在发生的网站的控制程度以及您想付出的努力，您可以通过编写一些 javascript（与您的处理代码分开）来自行修复错误):

在页面 <body> 上定义一个 mouseUp() 事件，以捕获页面上所有的鼠标释放事件。
在mouseUp()事件中，检查事件是否来自您的Processing控件。（可能有一个事件对象传递给 mouseUp() 函数，您可能必须为您的 Processing 控件提供一个 ID 以识别它）
如果事件不是来自您的 Processing 控件，则您自己在 Processing 控件上触发一个 mouseUp 事件。这应该（希望如此！）在您的处理代码中触发鼠标事件。
我不确定在处理您发送给它的事件时，Processing 会对鼠标 (x,y) 位置超出其控制范围做出怎样的处理。你可能想在事件对象上设置一个标志（假设你可以向事件对象添加额外的数据）说 "don't use the (x,y) position of this event - it's outside the control".

Edit2: 比我想象的要容易！这是 JavaScript 代码，用于检测鼠标在处理 canvas 之外被释放，并将 mouseReleased 事件发送到 canvas。我已经在 Processing 网站的鼠标移动示例上对其进行了测试，并修复了该错误。它使用 jQuery（虽然它可以重写为不使用 jQuery），并且假定您的 Processing canvas 具有 ID "processingCanvas":

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

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

如何使用 processing.js 在 canvas 之外查看 mouseReleased() 事件

how to see mouseReleased() event outside canvas using processing.js

processing

mouseevent

processing.js