Question

我有一个普遍的问题（我知道我应该提出具有问题的特定代码，但在我的情况下，问题是更一般的问题）。

在处理中，假设我做了一个椭圆：

ellipse(30, 30, 10, 10);

现在，有没有办法获得这个椭圆在画布上的像素？原因是有一种方法可以创建用户与鼠标的交互（例如）。因此，当有人在椭圆上点击鼠标时，会发生一些事情。

我想把所有东西变成对象并使用构造函数以某种方式存储形状的位置，但这说起来容易做起来难，尤其是对于更复杂的形状。这就是我感兴趣的东西。计算椭圆的位置是一回事，但更复杂的形状呢？有没有图书馆？

Answer 1

使用数学公式比使用鼠标位置的逐像素检查更好（它更快，代码更少）。

对于一个完美的圆，你可以用毕达哥拉斯定理计算欧氏距离。假设您的圆圈位于中心位置（circleX，circleY），并且半径（非直径）为circleR。您可以检查鼠标是否在圆圈上方，如下所示：

if(sq(mouseX-circleX)+sq(mouseY-circleY) <= sq(circleR)) {
    // mouse is over circle
} else {
    // mouse is not over circle
}

这种方法基本上是想象一个直角三角形，其中斜边（最长边）从圆心到鼠标位置。它使用毕达哥拉斯定理来计算斜边的长度，如果它小于圆的半径，那么鼠标就在圆圈内。（虽然它包含了一些细微的优化 - 它是比较正方形以避免做平方根，因为它可能相对较慢。）

Answer 2

查看geomerative库。它有一种方法来检查鼠标是否在任何SVG形状内。我不记得我的头顶，但它有点像你做一个形状：

myShape = RG.loadShape("shape.svg");

和一点：

RPoint p = new RPoint(mouseX, mouseY);

并且布尔函数contains（）将告诉您该点是否在形状内：

myShape.contains(p);

Answer 3

我也想到了我原来的数学答案的替代方案。如果您能够承受两次绘制所有UI元素的内存和处理能力，那么使用辅助缓冲区可以获得良好的结果。

该原理涉及具有离屏图形缓冲器（例如，使用PGraphics）。它必须与主显示器的大小完全相同，并且禁用抗锯齿功能。将所有交互式UI元素（按钮等）绘制到此缓冲区。然而，不是以正常方式绘制它们，而是为每个人提供一个独特的颜色，用于填充和描边（不添加任何文本或图像......只是纯色）。例如，一个按钮可能完全是红色，另一个按钮完全是绿色。只要每个项目具有唯一的颜色，任何其他RGB值都可以使用。确保背景也具有独特的颜色。

用户永远不会看到该缓冲区，因此不要将其绘制到屏幕上（除非您正在调试或其他东西）。当您想要检测鼠标所在的项目时，只需在该屏幕外缓冲区上查找鼠标位置即可。获取该位置的像素颜色，并将其与UI元素匹配。

完成所有操作后，请继续正常将所有内容绘制到主显示屏上。

值得注意的是，如果您的UI元素从未（或很少）移动，您可以大大缩短此方法的处理时间。当某些内容出现/消失，动画或更改大小/位置时，您只需要重绘辅助缓冲区。

处理中的用户交互

3 个答案: