Swift:如何创建一个中间有透明圆圈的UIView



目标c有一些答案,但没有找到任何关于swift的答案。

我想创建一个中间有透明圆圈的暗视图,这样用户就可以看到子视图并与之交互。我如何使用swift实现这一点。

更确切地说,我正在寻找一个像whatsapp个人资料图片实现这样的结果。中间有一个透明的圆圈,用户可以看到图片并滚动。

谢谢你们的帮助!

Cyril的答案被翻译成swift以防止额外键入:

    func circularOverlayMask() -> UIImage {
        let bounds = self.view.bounds
        let width = bounds.size.width
        let height = bounds.size.height
        let diameter = width
        let radius = diameter / 2
        let center = CGPointMake(width / 2, height / 2)
        // Create the image context
        UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0)
        // Create the bezier paths
        let clipPath = UIBezierPath(rect: bounds)
        let maskPath = UIBezierPath(ovalInRect: CGRectMake(center.x - radius, center.y - radius, diameter, diameter))
        clipPath.appendPath(maskPath)
        clipPath.usesEvenOddFillRule = true
        clipPath.addClip()
        UIColor(white: 0, alpha: 0.5).setFill()
        clipPath.fill()
        let finalImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        return finalImage
    }

以下是我在项目中创建圆形掩码的方法(这不是Swift中的方法,但很容易翻译):

- (UIImage *)circularOverlayMask
{
    // Constants
    CGRect bounds = self.navigationController.view.bounds;
    CGFloat width = bounds.size.width;
    CGFloat height = bounds.size.height;
    CGFloat diameter = width - (INNER_EDGE_INSETS * 2);
    CGFloat radius = diameter / 2;
    CGPoint center = CGPointMake(width / 2, height / 2);
    // Create the image context
    UIGraphicsBeginImageContextWithOptions(bounds.size, NO, 0);
    // Create the bezier paths
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithRect:bounds];
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(center.x - radius, center.y - radius, diameter, diameter)];
    [clipPath appendPath:maskPath];
    clipPath.usesEvenOddFillRule = YES;
    [clipPath addClip];
    [[UIColor colorWithWhite:0 alpha:0.5f] setFill];
    [clipPath fill];
    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return finalImage;
}

我基本上创建了一个子视图,添加到图像滚动视图上方,如下所示:

UIImageView *maskView = [[UIImageView alloc] initWithImage:[self overlayMask]];
maskView.userInteractionEnabled = NO;
[self.view insertSubview:maskView aboveSubview:_scrollView];

希望能有所帮助。

(最初在DZNPhotoPickerController中找到)

最新更新