如何检测不同图像部分上的不同触摸事件

Posted 2023-05-06

【中文标题】如何检测不同图像部分上的不同触摸事件

【英文标题】：How to detect different touch events on different image parts

【发布时间】：2020-06-17 02:42:57

【问题描述】：

大家好，

我是开发团队负责人。我的一位优秀开发人员正在开发 ios 和 android 上的复杂应用程序。他仍然面临如何开发一项功能的问题。这就是为什么我在这里问，以便我可以帮助他。

在下图中，我们希望当用户触摸/点击页面的特定部分时，应通过 API 从我们的后端检索新内容。

我有两个问题：

我们是否应该将下面的图像切割成一个以上的图像文件（每个部分都是一个单独的图像文件），然后我们可以在代码中绑定它们？还是将其保存为一个文件更好？

您能否向我介绍有关如何在 Android 和 iOS 上创建类似功能的任何方法、类、示例代码或任何其他资源？

如果您也可以向我推荐类似的代码示例，我将不胜感激。

【参考方案1】：

如果您想绕过分割图像，一个巧妙的“技巧”是简单地用其他透明或隐藏对象（例如按钮）覆盖图像。例如，这些可以简单地覆盖名称。

【讨论】：

是的，这是一个很好的解决方案。好吧，我也在寻找另一个解决方案，因为我想突出显示触摸的部分。

在这种情况下，您无论如何都需要分割图像，因为您无法单独突出显示图像的不同部分。

非常感谢。好吧，我的开发人员会采纳你的第一个建议，但不会突出显示触及的部分。

【参考方案2】：

有几种方法可以处理它： 1) 将图像切成小块，添加一个监听器来拦截事件，并显示它们，使它们看起来像一个有凝聚力的图像。 2) 生成一些镜像图像的多边形，向图像添加单个侦听器以获取触摸位置并与多边形交叉引用 (x,y) 以确定哪个被单击。

第一个选项更好，因为它更容易在触摸时执行颜色蒙版之类的操作。您可能还想研究一些 SVG 来生成片段。

【参考方案3】：

创建另一个与主图像大小相同的位图，并将每个区域绘制为特定颜色。您可以使用 256 色（8 位）或 16 色来尽可能降低内存使用率。我们称之为参考图像。在代码中保留一个 color = name 列表。当用户触摸图像时，获取坐标并在参考图像中找到该坐标的颜色代码。比在你的列表中找到哪个颜色是哪个部分。

您还可以使用此参考图像突出显示图像的特定部分。