在可移动的图像视图上显示视图

Question

我目前有一个应用程序，用户可以在其中拍照或从他们的照片库中选择。

在下一个控制器上，它将显示被选择/拍摄的图像。

我现在想做的是在图像视图之上显示某种视图。视图的边缘将是半透明的，并且有一个圆圈可以显示下方的图像（不是半透明的）。基本上这是选择图像的一部分。

然后我需要保存一些视图在屏幕上的位置，因为它也应该可以由用户移动。

解决这个问题的最佳方法是什么？

我需要一个可以移动的覆盖视图。圆圈将是固定大小，始终内部显示下方的图像视图，外部将是 0.5 半透明度，因此您仍然可以看到图像但不能完全看到。然后保存被移动的圆圈的位置？

---- 编辑 -----

这是我创建的示例图像。

我有一个视图，其中有一张照片作为 UIImageView（底层）。最重要的是，我正在尝试添加一个视图（如上图）。请注意，上面的图片实际上是建议的png。但是，此叠加层是可移动的。圆圈是透明的 (0)，因此您可以完全看到它下面的照片。外部（灰色）部分透明（0.5），因此您仍然可以看到不完全。

顶视图（圆形部分）将在照片上四处移动以标记照片上的特定点。在这个例子中，如果圆圈移动了一边（灰色）在屏幕上结束，因此我需要制作一个考虑到视图移动的巨大图像——这肯定不是最好的方法吗？

编辑 2 ---- 我现在在 photoView 的顶部有一个 UIImageView（另一个 UIImageView）。叠加层是屏幕的 4 倍，中间有一个圆圈。

当项目被移动时，我会运行一个手势识别器：

-(void)handlePan:(UIPanGestureRecognizer *)gesture {
    NSLog(@"Pan Gesture");
    gesture.view.center = [gesture locationInView:self.view];
   }

目前从上面看，UIImageView 是从中间点移动的，这样当手指移动时，圆圈看起来就是在移动。

这一切都很好，但是如何将建议的答案实现到我的 handlePan 方法中。所以我需要检查中间点是不是太靠近边缘。理想情况下，我希望屏幕周围有 50 个边距，这样圆圈看起来不会完全（或大部分）离开屏幕？

Answer 1

我从问题中了解到您知道如何移动叠加层，所以我的意思是您可以简单地使用足够大的图像视图来确保它们的边框不可见。

假设 UIImageView 会被调用

UIImageView *photoImageView;

半透明和半透明区域的叠加层将是

UIImageView *imageOverlayView;

在我看来，您需要为 imageOverlayView 提供 3 个不同的图像，具体取决于运行它的设备 - 1 个用于 iPad，1 个用于 iPhone 5，1 个用于其他 iPhone。 该图像的宽度应等于（屏幕宽度 - 圆半径）* 2，高度应为

CGFloat circleRadius; //this would be the radius of translucent circle

所以如果你正确设置了叠加层的框架：

CGRect imageFrame = photoImageView.frame;
imageOverlayView.frame = CGRectMake(circleRadius - imageFrame.size.width/2, circleRadius - imageFrame.size.height/2, (imageFrame.size.width - circleRadius)*2, (imageFrame.size.height - circleRadius)*2); //origin is set to the middle of the image.

你永远看不到灰色区域的边缘。 MZimmerman6 对实现运动的回答很好，但您还应确保阻止圆圈超出底层图像的边界。

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:imageOverlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = imageOverlayView.frame;
    overFrame.origin.x += delX;
    if (overFrame.origin.x < -imageFrame.size.width) {
        overFrame.origin.x = -imageFrame.size.width;
    }
    else if (overFrame.origin.x > 0) {
        overFrame.origin.x = 0;
    }
    overFrame.origin.y += delY;
    if (overFrame.origin.y < -imageFrame.size.height) {
        overFrame.origin.y = -imageFrame.size.height;
    }
    else if (overFrame.origin.y > 0) {
        overFrame.origin.y = 0;
    }
    [overlayView setFrame:overFrame];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:imageOverlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = imageOverlayView.frame;
    overFrame.origin.x += delX;
    if (overFrame.origin.x < -imageFrame.size.width) {
        overFrame.origin.x = -imageFrame.size.width;
    }
    else if (overFrame.origin.x > 0) {
        overFrame.origin.x = 0;
    }
    overFrame.origin.y += delY;
    if (overFrame.origin.y < -imageFrame.size.height) {
        overFrame.origin.y = -imageFrame.size.height;
    }
    else if (overFrame.origin.y > 0) {
        overFrame.origin.y = 0;
    }
    [overlayView setFrame:overFrame];
}

编辑 使用您的平移手势识别器，检查您是否走得太远需要对 handlePan: 方法进行一些更改。

-(void)handlePan:(UIPanGestureRecognizer *)gesture {
    CGPoint newCenter = [gesture locationInView:self.view];
    if (newCenter.x < 50) {
        newCenter.x = 50;
    }
    else if (newCenter.x > self.view.frame.size.width - 50) {
        newCenter.x = self.view.frame.size.width - 50;
    }
    if (newCenter.y < 50) {
        newCenter.y = 50;
    }
    else if (newCenter.y > self.view.frame.size.height - 50) {
        newCenter.y = self.view.frame.size.height - 50;
    }
    gesture.view.center = newCenter;
}

如果这 50 点的边距等于圆的半径，这将确保您的圆能够接触到屏幕的边缘，但不能超出它们。

Answer 2

我会首先初始化一些 UIImageView，其中包含一个 png 图像，它可以轻松处理这个在中心有一个洞的移动框架。您可以将其添加到您的屏幕上。完成此操作后，使用touchesBegan、touchesMoved 和其他触摸命令来查找用户是否正在触摸该框，并据此确定用户从前一点移动了多远。使用此差异然后从图像当前帧原点或中心添加或减去值，瞧你有一个移动框。

编辑

在 View.h

CGPoint prevPoint;
float delX;
float delY;
UIView *overlayView;

在 View.m

-(void) viewDidLoad {
    overlayView = [UIView alloc] initWithFrame:CGRectMake(100,100,100,100)];
    [overlayView setBackgroundColor:[UIColor clearColor]];
    [self.view addSubview:overlayView];
    UIImageView *circImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,overlayView.frame.width,overlayView.frame.height)];
    [circImage setImage:[UIImage imageNamed:@"SomeImage.png"]];
    [overlayView addSubview:circImage];
    [self.view setNeedsDisplay];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    prevPoint = [touch locationInView:overlayView];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:overlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = overlayView.frame;
    overFrame.x += delX;
    overFrame.y += delY;
    [overlayView setFrame:overFrame];
    [self.view setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:overlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = overlayView.frame;
    overFrame.x += delX;
    overFrame.y += delY;
    [overlayView setFrame:overFrame];
    [self.view setNeedsDisplay];
}