形状（包括椭圆和圆形）定义

doreamon999

图像区域。这可能会起作用。maparea 不幸的是，这种方法有两个问题，第一个是主要问题： 它是基于像素的，因此不会跨分辨率和设备进行缩放。假设您的位图图像的固定大小为 600 × 400 像素。如果您在其中定义了区域，您将基于 600 × 400 分辨率构建它们。一旦您扩展或收缩图像以匹配设备的分辨率，这些区域将不再与图像匹配。jQuery RWD 图像地图插件将动态计算该区域的坐标。但我认为仅仅为了这个简单的命中测试演示添加 jQuery 库和这个插件就太多了。我一直在寻找更简单的东西。 该功能最初定义是为了实现 URL 导航。我宁愿调用 JavaScript 函数来使用网络音频来播放声音。不过，您可以通过定义href=""并在该区域中注册单击事件来使用此技巧。 我的下一个想法是将其放入2D 画布中，我可以使用 CSS 将其拉伸到当前分辨率。这个解决方案可能可行，但对。

于这样一个简单的 Web 应用程序来说，它的实现非常复杂。事实上，这将需要： 通过代码手动定义命中区域； 处理画布上的单击事件，找到单击的确切 x 和 y 鼠标坐标，并将其缩放到当前分辨率； 通过检查这些 2D 坐标是否位于我们在代码中定义的椭圆之一来计算命中 Whatsapp 号码列表 测试算法。 它并不是非常复杂，但是对于应该很容易构建的东西来说，这是相当多的数学知识。此外，如果您想保持图像的纵横比，2D 画布方法还需要通过在代码中计算加载阶段和事件内部的比率来调整画布的大小onresize。 最后，我想到了最明显的解决方案。当您考虑什么可以跨设备扩展、促进命中测试和处理宽高比时，答案自然是SVG。“S”代表“可扩展”——我们。



可以定义一个带有一些参数的视图框来锁定纵横比。 当然可以，但您可能会说，“这如何帮助我们定义图像中的命中区域？” 更不用说我们正在处理位图图像，而不是矢量？ 让我告诉你我做了什么。对于您想要在位图图像之上构建的任何类似体验，请遵循这些完全相同的步骤。 将上面的 8 位鼓机图像保存到您的计算机上。 我们需要一个工具来生成 SVG 内容的 XML。我将使用InkScape ，一个免费的应用程序，但您可能可以在浏览器中使用SVG Edit执行相同的操作。 打开 Inkscape，转到“文件”→“文档属性”，然后将“自定义尺寸”值更改为 160 × 90。 转到“文件”→“导入”，然后选择8bitsdrummachine.jpg您保存的文件。选择“链接”。