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

【问题标题】：Swift : How to create a UIView with transparent circle in the middle?Swift：如何创建一个中间有透明圆圈的 UIView？
【发布时间】：2015-02-25 15:37:52
【问题描述】：

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

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

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

感谢你们的帮助！

【问题讨论】：

标签： ios swift uiview drawrect alpha-transparency

【解决方案1】：

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
    }

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢西里尔，你知道我怎样才能用圆圈中显示的内容创建一个图像对象（作为蒙版后面更大图像的一部分）吗？
你应该看看 editedImage 方法中的 DZNPhotoPickerController 实现：github.com/dzenbot/DZNPhotoPickerController/blob/…