ios - 在可移动的 ImageView 上显示 View

Question

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

在下一个 Controller 上，它将显示已选择/拍摄的图像。

我现在想做的是在 ImageView 之上显示某种 View 。该 View 的边缘是半透明的，并且有一个圆圈可以显示下面的图像(不是半透明的)。基本上这是选择图像的一部分。

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

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

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

----- 编辑 -----

这是我创建的示例图像。

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

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

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

当项目被移动时，我有一个运行的手势识别器:

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

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

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

Answer 1

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

假设将调用 UIImageView

UIImageView *photoImageView;

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

UIImageView *imageOverlayView;

在我看来，您需要 3 个不同的图像用于 imageOverlayView，具体取决于它运行的设备 - 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 点边距等于圆半径，这将确保您的圆能够触及屏幕边缘，但不能超出它们。