CALayer avec un trou transparent

Question

J'ai une vue simple (côté gauche de l'image) et je dois créer une sorte de superposition (côté droit de l'image) à cette vue. Cette superposition doit avoir une certaine opacité, de sorte que la vue située en dessous reste partiellement visible. Plus important encore, cette superposition doit avoir un trou circulaire en son milieu afin qu'elle ne recouvre pas le centre de la vue (voir l'image ci-dessous).

Je peux facilement créer un cercle comme celui-ci :

int radius = 20; //whatever
CAShapeLayer *circle = [CAShapeLayer layer];

circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0,radius,radius) cornerRadius:radius].CGPath;
circle.position = CGPointMake(CGRectGetMidX(view.frame)-radius,
                              CGRectGetMidY(view.frame)-radius);
circle.fillColor = [UIColor clearColor].CGColor;

Et une superposition rectangulaire "complète" comme celle-ci :

CAShapeLayer *shadow = [CAShapeLayer layer];
shadow.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height) cornerRadius:0].CGPath;
shadow.position = CGPointMake(0, 0);
shadow.fillColor = [UIColor grayColor].CGColor;
shadow.lineWidth = 0;
shadow.opacity = 0.5;
[view.layer addSublayer:shadow];

Mais je n'ai aucune idée de la façon dont je peux combiner ces deux couches pour qu'elles créent l'effet que je veux. Quelqu'un ? J'ai vraiment tout essayé... Merci beaucoup pour votre aide !

Answer 1

Code compatible avec Swift 2.0

A partir de la réponse de @animal_inch, j'ai codé une petite classe utilitaire, en espérant qu'elle sera appréciée :

import Foundation
import UIKit
import CoreGraphics

/// Apply a circle mask on a target view. You can customize radius, color and opacity of the mask.
class CircleMaskView {

    private var fillLayer = CAShapeLayer()
    var target: UIView?

    var fillColor: UIColor = UIColor.grayColor() {
        didSet {
            self.fillLayer.fillColor = self.fillColor.CGColor
        }
    }

    var radius: CGFloat? {
        didSet {
            self.draw()
        }
    }

    var opacity: Float = 0.5 {
        didSet {
           self.fillLayer.opacity = self.opacity
        }
    }

    /**
    Constructor

    - parameter drawIn: target view

    - returns: object instance
    */
    init(drawIn: UIView) {
        self.target = drawIn
    }

    /**
    Draw a circle mask on target view
    */
    func draw() {
        guard (let target = target) else {
            print("target is nil")
            return
        }

        var rad: CGFloat = 0
        let size = target.frame.size
        if let r = self.radius {
            rad = r
        } else {
            rad = min(size.height, size.width)
        }

        let path = UIBezierPath(roundedRect: CGRectMake(0, 0, size.width, size.height), cornerRadius: 0.0)
        let circlePath = UIBezierPath(roundedRect: CGRectMake(size.width / 2.0 - rad / 2.0, 0, rad, rad), cornerRadius: rad)
        path.appendPath(circlePath)
        path.usesEvenOddFillRule = true

        fillLayer.path = path.CGPath
        fillLayer.fillRule = kCAFillRuleEvenOdd
        fillLayer.fillColor = self.fillColor.CGColor
        fillLayer.opacity = self.opacity
        self.target.layer.addSublayer(fillLayer)
    }

    /**
    Remove circle mask
    */

  func remove() {
        self.fillLayer.removeFromSuperlayer()
    }

}

Ensuite, où que ce soit dans votre code :

let circle = CircleMaskView(drawIn: <target_view>)
circle.opacity = 0.7
circle.draw()