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

Posted 2023-03-13

【中文标题】在可移动的图像视图上显示视图

【英文标题】：Displaying a view over an imageview which is moveable

【发布时间】：2013-07-15 20:50:09

【问题描述】：

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

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

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

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

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

我需要一个可以移动的覆盖视图。圆圈将是固定大小，始终内部显示下方的图像视图，外部将是 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 个边距，这样圆圈看起来不会完全（或大部分）离开屏幕？

【问题讨论】：

它并不需要那么大 - 只需在圆圈的右侧和左侧提供一个边距 frame.size.width 并在顶部和底部提供 frame.size.height 就足够了确保用户不会看到灰色区域的边框

上面的例子是两个UIImageViews。底部的一个是照片，第二个是灰色区域和圆圈合二为一。边距如何仅增加灰色区域的宽度？

我的意思是把半透明和半透明区域一起移动，这样从圆的右边缘到半透明区域的右边缘的距离等于frame.size.width的UIImageView 下面。实际上，它可能小于这个值，具体取决于您希望圆圈移动多远。如果它必须保持在 imageView 的边界内，那么 imageView.frame.size.width - (circleRadius * 2) 在右侧和左侧应该足够了。 （以此类推，有高度，在顶部和底部）

对不起，我不明白，可以提交一个代码示例作为答案吗？

看看这是否有助于您的叠加视图 - ***.com/questions/11792563/…

【参考方案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 点的边距等于圆的半径，这将确保您的圆能够接触到屏幕的边缘，但不能超出它们。

【讨论】：

谢谢，太好了。我已经通过进一步的编辑更新了我的问题，以解释我到目前为止完成的内容。理想情况下，我需要知道如何在我的手势识别器 handlePan 方法中实现这些触摸检查。我从屏幕上的中心点移动 UIImageView，那么我将如何检查中心不在屏幕周围设置的边距之外（因此）？？

那是最好的！！！！！！ :) 如此简单，但不知道从哪里开始！如果您可以添加任何信息，说明将来在哪里可以找到此类信息，那也很棒。再次感谢

我自己计算了一下。 :)

@johnyu 你能解释一下（代码）我如何在新图像中裁剪圆圈下的图像？非常感谢

说实话，我不知道。但是解决方案应该在 SO 上的某个地方，因为我记得看过几次关于如何截取部分屏幕截图的解释。

【参考方案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];

【讨论】：

我将如何处理不同的屏幕尺寸？为 iphone5 制作一张图片，为更小的图片制作一张？

@MZimmernan6 - 我还有一个问题是它是可移动的。因此，如果我使用一张图片，我需要制作一个超大尺寸的图片，并考虑到它会被移动多少……这肯定不是最好的选择吗？

可移动不是问题。您不必担心制作“超大”图像以便能够移动图像，只需简单地更改图像的原点，就可以了。至于 iPhone 5，你可能想要放大图像，或者你可能不想，这完全取决于你

你是什么意思改变图像的来源。如果我有一张肖像 iphone5 大小的图像，中间有一个圆形，它是透明的。然后当图像被移动时，图像的侧面会被看到，因此并不总是在下面的图像视图中覆盖照片，这就是我所追求的。

当您以编程方式将视图添加到视图时，您会执行类似于 [[UIView alloc] initWithFrame:CGRectMake(OriginX, OriginY, Width, Height)] 的操作，我的意思是 UIView 的左上角。您可以使用从touchesMoved 和touchesBegan 获得的信息来更改这些X 和Y 值，进而移动视图。