Question

我想要在Processing中用鼠标在屏幕上拖动一个对象。我在鼠标按下对象时将acquired设置为true，然后在鼠标向上设置为false，因此：

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

void mouseReleased() {
  acquired = false;
}

然后我在acquired中查询update()，并拖动对象true。

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

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

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

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

我需要做些什么才能使用鼠标状态更改在之外使用processing.js显示画布？

Answer 1

我没有具体了解Processing，但在窗口小部件外发布鼠标按钮是GUI开发中的常见问题。

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

在acquired = false中设置mouseOut()，正如@Kevin建议的那样。
我假设Processing中有一些类型的mouseEntered（）方法，还有一些方法可以知道鼠标按钮当前是否被按下（全局变量或传递给mouseEntered()的事件对象）。您可以捕获鼠标输入事件，检查鼠标是否已被释放，然后设置acquired = false。

像这样：

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

编辑：根据您的评论@Susan，似乎在processing.js中存在错误，如果在画布外释放鼠标按钮，则mousePressed不会设置为false。指出这是一个错误的一件事是the mouse movement example on the processing website也表明了这种行为。

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

在页面mouseUp()上定义<body>事件，以捕获页面上的所有鼠标释放事件。
在mouseUp()事件中，检查事件是否来自您的Processing控件。（可能有一个事件对象传递给mouseUp()函数，您可能必须为您的Processing控件提供一个ID来识别它。）
如果事件不是来自您的Processing控件，则在Processing控件上自行触发mouseUp事件。这应该（希望！）在处理代码中触发鼠标事件。
我不确定当处理发送的事件时，处理将使鼠标（x，y）位置超出其控制范围。您可能希望在事件对象上设置一个标志（假设您可以向事件对象添加额外的数据），并说“不要使用此事件的（x，y）位置 - 它＆＃39;控制之外＆＃34;。

编辑2：这比我想象的要容易！以下是用于检测在Processing画布外部发布的鼠标并将mouseReleased事件发送到画布的JavaScript代码。我已经在Processing网站上的鼠标移动示例中对其进行了测试，并修复了该错误。它使用jQuery（虽然它可以重写为不使用jQuery），它假设你的Processing画布有ID＆＃34; processingCanvas＆＃34;：

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

要使用此代码，请将其包含在您网页的任意位置（在JavaScript文件或＆lt; script＆gt;标记中），并确保在此代码之前包含jQuery库。

Processing对象允许JavaScript调用Processing代码中定义的任何函数。在这里，我使用它来调用处理内置的mouseReleased（）函数，但是如果你想调用自定义函数以不同的方式处理鼠标释放外部状态，那么你可以。

Answer 2

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

void mouseOut() {
  acquired = false;
}

参考here中的详细信息。

如何使用processing.js查看canvas之外的mouseReleased（）事件

2 个答案: