Question

我目前有一个应用程序，用户可以从他们的图书馆拍照或选择。

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

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

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

最好的方法是什么？

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

----编辑----- enter image description here

这是我创建的示例图片。

我的视图中有一张照片作为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

我首先用一个png图像初始化一些UIImageView，它可以轻松处理这个移动的框架，中间有一个洞。您可以将其添加到您的屏幕。完成此操作后，使用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]; }

Answer 2

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

假设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];
}

EDIT 使用平移手势识别器，检查您是否不会走得太远需要对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点边距等于圆弧半径，这将确保您的圆圈能够触及屏幕边缘，但无法超越它们。

在可移动的imageview上显示视图

2 个答案: