使用点和多个图像视图

Question

我正在开发一个包含两个UIImageViews 的视图控制器。底部图像视图包含一张照片（由用户拍摄或选择）。第二个图像视图位于此之上，也占据了整个屏幕。

第二个图像视图包含一个指针（下例中的绿点）。它用作可以在屏幕上定位的可移动视图。它的用途是在它后面的照片上标记一个位置/点。

在纵向中这很好用，底部图像视图设置为图像 = 纵横比填充。因此拍摄的照片占据了整个屏幕。

在横向模式下，这也不起作用。我可以用

更好地解释

下面的图片画得不好

例如，如果用户在纵向视图中选择一个点（由绿点显示），则大致位置为 220,380。

但是，如果相同的位置在横向上，它就不会在后面的照片上出现相同的位置。

该点将转换为更像 280,300。

所以问题是......当 VC 是横向横向时，我如何确定图像的高度和宽度（从底部图像视图中）以计算出相同的点？

或者是否有另一种方法/方法可以实现这一点？

-------编辑 ---------- 我创建了一个仅包含此功能的测试应用程序。我的设置与上面详述的相同。我已将日志添加到视图中，并将方向更改为横向。以下是我正在使用的日志：

NSLog(@"bottom image view width: %f",self.photoImageView.frame.size.width);
NSLog(@"bottom image view height: %f",self.photoImageView.frame.size.height);
NSLog(@"bottom image view frame bounds X: %f",self.photoImageView.frame.origin.x);
NSLog(@"bottom image view frame bounds Y: %f",self.photoImageView.frame.origin.y);
NSLog(@"bottom image view bounds X: %f",self.photoImageView.bounds.origin.x);
NSLog(@"bottom image view bounds Y: %f",self.photoImageView.bounds.origin.y);
NSLog(@"---------BOTTOM IMAGE VIEW IMAGE DETAILS---------");
NSLog(@"bottom image view image width: %f",self.photoImageView.image.size.width);
NSLog(@"bototm image view image height: %f",self.photoImageView.image.size.height);
NSLog(@"bottom image view image frame bounds X: %f",self.photoImageView.image.accessibilityFrame.origin.x);
NSLog(@"buttom image view image frame bounds Y: %f",self.photoImageView.image.accessibilityFrame.origin.y);

这些是结果：

2013-07-30 14:58:23.013 SelectPhotoViewTest[3414:c07] ---------VIEW DETAILS---------
2013-07-30 14:58:23.014 SelectPhotoViewTest[3414:c07] ---------BOTTOM IMAGE VIEW DETAILS---------
2013-07-30 14:58:23.015 SelectPhotoViewTest[3414:c07] bottom image view width: 480.000000
2013-07-30 14:58:23.016 SelectPhotoViewTest[3414:c07] bottom image view height: 268.000000
2013-07-30 14:58:23.016 SelectPhotoViewTest[3414:c07] bottom image view frame bounds X: 0.000000
2013-07-30 14:58:23.017 SelectPhotoViewTest[3414:c07] bottom image view frame bounds Y: 0.000000
2013-07-30 14:58:23.018 SelectPhotoViewTest[3414:c07] bottom image view bounds X: 0.000000
2013-07-30 14:58:23.018 SelectPhotoViewTest[3414:c07] bottom image view bounds Y: 0.000000
2013-07-30 14:58:23.019 SelectPhotoViewTest[3414:c07] ---------BOTTOM IMAGE VIEW IMAGE DETAILS---------
2013-07-30 14:58:23.019 SelectPhotoViewTest[3414:c07] bottom image view image width: 258.000000
2013-07-30 14:58:23.019 SelectPhotoViewTest[3414:c07] bototm image view image height: 480.000000
2013-07-30 14:58:23.020 SelectPhotoViewTest[3414:c07] bottom image view image frame bounds X: 0.000000
2013-07-30 14:58:23.021 SelectPhotoViewTest[3414:c07] buttom image view image frame bounds Y: 0.000000

如何从这些结果中确定中心点相对于底部图像坐标的位置？

Answer 1

您实际上必须在两个方向上将点转换为图像的坐标系。在您给出的示例中，它仅适用于纵向，因为图像与屏幕具有相同的纵横比。如果您有一个正方形图像，则该点与图像没有 1:1 的关系，并且可以很容易地放置在图像之外。

我能想到两种方法来实现你的目标：

1) 与其让底部图像视图占据整个屏幕并让它填充纵横比，不如手动调整它的大小以占据屏幕的整个宽度或高度，具体取决于图像。 IE。如果您有一个 1000x1000 的图像，您希望图像视图对于纵向 (iphone3) 为 320x320，对于横向为 300x300。然后，使第二个图像成为第一个的子视图。它的位置现在将相对于底部图像的坐标系。

2) 使用一些简单的数学运算将屏幕上的点转换为图像的坐标系。您知道底部图像视图的大小和纵横比，并且您对图像也了解相同。

假设图像是 640x920。在横向中，底部图像视图将为 480x300。

1) 将图像缩放到图像视图中的大小 (209x300)

2) 由于图像将居中，因此将从左侧开始大约 136 个点

3) 屏幕上的 (280, 300) 点因此将转换为 (144, 280 [状态栏的-20 点]) 相对于较小的图像，它转换为 (441, 859) 在完整图像的坐标系。

我希望这会为您指明正确的方向。

编辑：

好的，你的示例日志的工作：

[顺便说一句，您可以像这样更轻松地打印出 CGRECT：NSLog(@"%@", NSStringFromCGRect(self.photoImageView.frame))]

1) 缩放图像尺寸，使其适合图像视图：

ratio = photoImageView.frame.size.height / photoImageView.image.size.height;
height = photoImageView.image.size.height * ratio;
width = photoImageView.image.size.width * ratio;

2) 计算图像视图内图像的边框

x = (photoImageView.frame.size.width - width) / 2;
y = 0;
frame = CGRectMake(x, y, width, height);

3) 假设您使用 [touch locationInView:photoImageView] 获取位置点，您可以使用

检查触摸是否在图像框架内

CGRectContainsPoint(frame, location)

编辑 - 包括使用的实际代码 - 与上述处理图像视图的方向略有不同。

if (self.photoImageView.frame.size.height < self.photoImageView.frame.size.width ) {
    // This is device and image view is landscape
    if (self.pushedPhoto.size.height < self.pushedPhoto.size.width) {
        // The pushed photo is portrait
        self.photoImageViewRatio = self.photoImageView.frame.size.height / self.pushedPhoto.size.height;
    } else {
        // The pushed photo is landscape
        self.photoImageViewRatio = self.photoImageView.frame.size.width / self.pushedPhoto.size.width;
    }

} else {
    // This is device and image view is portrait
    if (self.pushedPhoto.size.height < self.pushedPhoto.size.width) {
        // The pushed photo is portrait
        self.photoImageViewRatio = self.photoImageView.frame.size.width / self.pushedPhoto.size.width;

    } else {
        // The pushed photo is landscape
        self.photoImageViewRatio = self.photoImageView.frame.size.height / self.pushedPhoto.size.height;
    }
}

self.valueHeight = self.pushedPhoto.size.height * self.photoImageViewRatio;
self.valueWidth = self.pushedPhoto.size.width * self.photoImageViewRatio;




float x =  (self.photoImageView.frame.size.width - self.valueWidth) / 2;
float y = (self.photoImageView.frame.size.height - self.valueHeight) /2;