ios - 你如何使 UIScrollView 的溢出变暗？

Question

假设您想实现与 iOS 相机“缩放和裁剪”相同的功能……您可以在其中滚动和裁剪图像。

图片中任何超出裁剪区域大小的部分都会变灰。我正在尝试完全复制它。如果将标志 'clipToBounds' 设置为 NO，则可以显示整个 subview 。

但是，我发现将 UIScrollView 的 subview 溢出变灰有点困难。

您将如何实现？提前致谢!

Answer 1

您可以通过创建 UIView 的子类来做到这一点，该子类在溢出区域是半透明的，在“裁剪”区域是透明的，并将其放置在您的 UIScrollView 上并将其扩展以覆盖溢出。

需要实现的主要方法有initWithFrame:

#define kIDZAlphaOverlayDefaultAlpha 0.75

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        mAlpha = kIDZAlphaOverlayDefaultAlpha;
        self.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:mAlpha];
        self.userInteractionEnabled = NO;
    }
    return self;
}

不要错过 userInteractionEnabled = NO 否则 ScrollView 将看不到事件。

和drawRect

- (void)drawRect:(CGRect)rect
{    
    CGRect apertureRect = /* your crop rect */;
    CGContextRef context = UIGraphicsGetCurrentContext();
    /* draw the transparent rect */
    CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0.0);
    CGContextSetBlendMode(context, kCGBlendModeCopy);
    CGContextFillRect(context, apertureRect);
    /* draw a white border */
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextStrokeRect(context, apertureRect);
}

这里的重点是kCGBlendModeCopy，它允许我们在半透明背景中绘制(或剪切)透明矩形。

如果你想把透明矩形变成圆角矩形，并包含裁剪图像的预览，最后得到类似下面的屏幕:

抱歉，我无法共享屏幕截图的所有代码。它来自一个客户项目:-(