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

Question

objective c 有一些答案，但没有找到关于 swift 的答案。

我想创建一个中间带有透明圆圈的深色视图，以便用户可以看到子视图并与之交互。我如何使用 swift.

来实现它

更准确地说，我正在寻找类似于 whatsapp 个人资料图片实现的结果。中间有这个透明圆圈，用户可以看到图片并滚动。

感谢大家的帮助！

Answer 1

这是我在我的项目中使用的创建圆形遮罩的方法（这不在 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）

Answer 2

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 : 如何创建一个中间有透明圆圈的UIView？

Swift : How to create a UIView with transparent circle in the middle?

alpha-transparency

uiview

drawrect

ios

swift