Swift: Comment créer un UIView avec un cercle transparent au milieu?

Question

Il y a quelques réponses pour l'objectif c mais il n'y en a pas trouvé concernant swift.

Je voudrais créer une vue sombre avec un cercle transparent au milieu afin que l'utilisateur puisse voir la sous-vue et interagir avec elle. Comment puis-je l'implémenter en utilisant swift.

Plus précisément, je suis à la recherche d'un résultat comme l'implémentation de l'image de profil whatsapp. Il y a ce cercle transparent au milieu et l'utilisateur peut voir l'image et faire défiler par exemple.

Merci pour votre aide les gars!

Answer 1

Voici une méthode que j'utilise dans mes projets pour créer des masques circulaires (ce n'est pas à Swift mais facilement traduisible):

- (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; 
} 

Je crée essentiellement un sous-vue que j'ajouter au-dessus de l'image ScrollView, comme celui-ci :

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

Espérons que ça aide.

(à l'origine dans DZNPhotoPickerController)

Answer 2

Réponse de Cyril traduit à rapide pour éviter typage supplémentaire:

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 
    }