Question

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

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

谢谢

Answer 1

为什么不花力气去跟踪鼠标并进行自己的粘菌检测，为什么不老去使用<map>和<area>？

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

HTML <area>元素在图像上定义了一个热点区域，并有选择地将其与超文本链接相关联。此元素仅在<map>元素中使用。

HTML <map>元素与元素一起用于定义图像映射（可单击的链接区域）。

<area>在DOM中由HTMLAreaElement表示，它实现了HTMLElement接口，因此您可以侦听来自mouseover元素的<area>事件：< / p>

HTML示例（来自MDN文章）

<map name="infographic" id="myInfographic">
    <area shape="rect" coords="184,6,253,27"
      href="https://mozilla.org"
      target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
      href="https://developer.mozilla.org/"
      target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
      href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
      target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
      href="https://developer.mozilla.org/docs/Web/HTML"
      target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
      href="https://developer.mozilla.org/docs/Web/JavaScript"
      target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
      href="https://developer.mozilla.org/docs/Web/API"
      target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
      href="https://developer.mozilla.org/docs/Web/CSS"
      target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic" />

脚本：

var areas = document.querySelectorAll( '#myInfographic area' );
for( var i = 0; i < areas.length; i++ ) {
    areas[i].addEventListener( 'mouseover', function( e ) {
        console.log( 'over some area' );
    } );
}

Answer 2

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

您可以在代码中获取几何，然后使用该几何检查光标是否在形状内。然后用谷歌搜索诸如“检查点是否在多边形内”之类的大量资源。即使您仍想使用图像，也可以执行此操作，也可以使用createShape()方法绘制形状。
或者您可以检查鼠标下方的颜色。如果不是背景色，那么您就位于形状之内。仅当您只有一个国家/地区，或者每个国家/地区使用不同的颜色时，这才有效。

如果我是你，我会倾向于第一种选择。首先获得一个简单的工作方法：创建一个硬编码的形状，然后创建一个草图，当鼠标在该形状内单击时，该草图将向控制台打印一条消息。然后获取国家/地区的几何图形，并使用它代替硬编码的形状。

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

p5js中的鼠标跟踪

2 个答案: