p5.js - p5js 中的鼠标跟踪

Question

当鼠标悬停在一个国家的地图上（这不是标准形状）时，我希望在 p5js 中发生一些事情。我怎样才能做到这一点？我的意思是如何在国家地图等非标准形状上跟踪鼠标？

（我已将此形状加载为图像，并且边界外的斑点仍然是图像的一部分，但是是透明的。）

谢谢

标签： p5.js

Answer 1

有几种方法可以做到这一点：

• 您可以在代码中获取几何图形，并使用它来检查光标是否在形状内。然后谷歌诸如“检查点是否在多边形内”之类的大量资源。即使您仍想使用图像，也可以这样做，或者您可以改用该createShape()方法绘制形状。
• 或者您可以检查鼠标下的颜色。如果它不是背景颜色，那么您就在形状内部。这仅在您只有一个国家或每个国家的颜色不同时才有效。

如果我是你，我会倾向于第一个选项。首先做一些简单的工作：创建一个硬编码的形状，然后创建一个草图，当鼠标在该形状内单击时，它会向控制台打印一条消息。然后获取该国家的几何图形并使用它而不是硬编码的形状。

然后，如果您遇到困难，您可以发布MCVE以及更具体的技术问题。祝你好运。