iOS - Swift - UIImage 上的可点击区域

标签 ios swift uiimageview aspect-fit

我正在做一个项目,我必须在代表人体的图像上的特定区域绘制点。在 Interface Builder 中,我设置了一个容器 UIView,它占据了主视图的大部分垂直中心。在那个容器 View 中,我放置了一个 UIImageView 并在 IB 中设置了图形。该图形比 UIImageView 和容器 UIView 都大得多,更具体地说,它更高。 UIImageView 的 ContentMode 设置为 AspectFit,因为我不希望图像显示得比容器大。

该代码创建了几个 CGRect 实例,这些实例是用户点击有意义的区域。当用户点击容器 View 时,代码用于确定该点是否在某个区域内,如果是,则在该区域的中心绘制一个点。

问题是当我在某些模拟器上运行应用程序时,区域矩形不在图像上的正确位置。例如,当我在 iPhone X 上运行该应用程序时,头部的矩形区域看起来不错。当我在 iPhone XR 上运行该应用程序时,矩形区域位于头部左侧。

enter image description here enter image description here

我使用坐标来定义区域矩形,这些矩形基于例如人头在图像中的位置。我觉得这不是正确的方法,因为图像的 ContentMode 的 AspectFit 很可能导致图像被缩放以保持纵横比。

底线是无论图像如何缩放,我都希望矩形位于正确的位置和大小。不确定我的做法是否有意义,所以希望能提供一些建议,以提供更好的方法来做到这一点。

更新 1:UIImageView 被固定到周围的 UIView,所以它的宽度和高度与容器一样大。由于图像比 UIImageView 更细,因此图像显示在其中。在附图中,紫色背景是 UIImageView,显示最顶层 UIView 的背景色。

更新 2:我检查了宽度和高度的比例,发现它们不同。宽度比例因子为 1.36565656565,高度比例因子为 2.104。我尝试了 Sweeper 给出的两个比例因子给出的公式,但没有成功。

最佳答案

你只需要做一些数学运算。

在原始图像上,确定用户可以点击的区域。记下它相对于图像的 x、y、w、h。

找出图像在 ImageView 中缩小了多少。既然你说图像比 ImageView 高,图像经历了 imageViewHeight/imageHeight 的比例因子。我们现在将其称为 scaleFactor

区域的 Y 坐标一定也下降了 scaleFactor,所以您将 regionY 乘以 scaleFactor 得到 newY.

区域的宽度和高度会做同样的事情,所以将它们乘以 scaleFactor 得到 newWidthnewHeight

该区域相对于 ImageView 的 X 坐标有点棘手。您需要考虑 ImageView 通过缩小图像创建的空白空间量。此 emptySpace(imageViewWidth - newWidth)/2 计算得出。然后要计算新区域相对于 ImageView 的 X 坐标,您可以执行 emptySpace + X * scaleFactor

现在 rect (newX, newY, newWidth, newHeight) 是用户可以点击的相对于 ImageView 的区域!

关于iOS - Swift - UIImage 上的可点击区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53134854/

相关文章:

ios - 如何比较 char/single char 字符串 - 与一些字母表集

SwiftUI 在 View 之间共享模型数据

swift - 关闭/关闭 NSViewController, macOS

swift - 在新的 collectionViewCell 中加载 selectedIndexItem(使 imageCache 无效)

ios - 带有自定义 UITableView 单元格图像的 SDWebImage

ios - 如何将 GIf 图像添加为 View 图层?

ios - 我的 firebase int 返回 nil

ios - 如何在 swift 4 中使用 API 解析 jsondata

ios - swift : not exiting Firebase observe fuction block

ios - 无法让 UIImageView 在 prepareForSegue 中发送