CALayer ที่มีรูใสอยู่

ฉันมีมุมมองที่เรียบง่าย (ด้านซ้ายของภาพ) และฉันต้องการสร้างภาพซ้อนทับ (ด้านขวาของภาพ) ให้กับมุมมองนี้ ภาพซ้อนทับนี้ควรมีความทึบแสงดังนั้นการมองเห็นจึงยังคงมองเห็นได้บางส่วน ที่สำคัญที่สุดการวางซ้อนนี้ควรมีรูวงกลมตรงกลางเพื่อไม่ให้ซ้อนทับตรงกลางของมุมมอง (ดูภาพต่อไปนี้)

ฉันสามารถสร้างวงกลมได้ง่ายๆดังนี้:

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;

และภาพซ้อนทับแบบ "เต็ม" แบบนี้:

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];

แต่ฉันไม่รู้ว่าจะรวมสองเลเยอร์นี้เข้าด้วยกันเพื่อสร้างเอฟเฟกต์ที่ฉันต้องการได้อย่างไร ทุกคน? ฉันลองทุกอย่างแล้วจริงๆ ... ขอบคุณมากสำหรับความช่วยเหลือ!

ฉันสามารถแก้ปัญหานี้ได้ด้วยคำแนะนำของ Jon Steinmetz หากมีใครสนใจนี่คือทางออกสุดท้าย:

int radius = myRect.size.width;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.mapView.bounds.size.width, self.mapView.bounds.size.height) cornerRadius:0];
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius];
[path appendPath:circlePath];
[path setUsesEvenOddFillRule:YES];

CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor grayColor].CGColor;
fillLayer.opacity = 0.5;
[view.layer addSublayer:fillLayer];

Swift 3.x:

let radius = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = Color.background.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)

Swift 4.2 และ 5:

let radius: CGFloat = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = .evenOdd
fillLayer.fillColor = view.backgroundColor?.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)

ในการสร้างเอฟเฟกต์นี้ฉันพบว่าง่ายที่สุดในการสร้างมุมมองทั้งหมดที่ซ้อนทับหน้าจอจากนั้นลบส่วนของหน้าจอโดยใช้เลเยอร์และ UIBezierPaths สำหรับการใช้งาน Swift:

// Create a view filling the screen.
let overlay = UIView(frame: CGRectMake(0, 0, 
    UIScreen.mainScreen().bounds.width,
    UIScreen.mainScreen().bounds.height))

// Set a semi-transparent, black background.
overlay.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.85)

// Create the initial layer from the view bounds.
let maskLayer = CAShapeLayer()
maskLayer.frame = overlay.bounds
maskLayer.fillColor = UIColor.blackColor().CGColor

// Create the frame for the circle.
let radius: CGFloat = 50.0
let rect = CGRectMake(
        CGRectGetMidX(overlay.frame) - radius,
        CGRectGetMidY(overlay.frame) - radius,
        2 * radius,
        2 * radius)

// Create the path.
let path = UIBezierPath(rect: overlay.bounds)
maskLayer.fillRule = kCAFillRuleEvenOdd

// Append the circle to the path so that it is subtracted.
path.appendPath(UIBezierPath(ovalInRect: rect))
maskLayer.path = path.CGPath

// Set the mask of the view.
overlay.layer.mask = maskLayer

// Add the view so it is visible.
self.view.addSubview(overlay)

ฉันทดสอบโค้ดด้านบนและนี่คือผลลัพธ์:

ฉันได้เพิ่มไลบรารีลงใน CocoaPods ซึ่งแยกโค้ดด้านบนออกไปจำนวนมากและช่วยให้คุณสร้างภาพซ้อนทับด้วยรูสี่เหลี่ยม / วงกลมได้อย่างง่ายดายทำให้ผู้ใช้สามารถโต้ตอบกับมุมมองที่อยู่เบื้องหลังภาพซ้อนทับได้ ฉันใช้มันเพื่อสร้างบทช่วยสอนนี้สำหรับหนึ่งในแอปของเรา:

ไลบรารีนี้เรียกว่าTAOverlayViewและเป็นโอเพ่นซอร์สภายใต้ Apache 2.0 ฉันหวังว่าคุณพบว่ามีประโยชน์!

โซลูชันที่ยอมรับเข้ากันได้กับSwift 3.0

let radius = myRect.size.width
let path = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: self.mapView.bounds.size.width, height: self.mapView.bounds.size.height), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 0.0, y: 0.0, width: 2.0*radius, height: 2.0*radius), cornerRadius: radius)
path.append(circlePath)
path.usesEvenOddFillRule = true

let fillLayer = CAShapeLayer()
fillLayer.path = path.cgPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = UIColor.gray.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)

ฉันใช้วิธีการคล้าย ๆ กับ animal_chin แต่ฉันเห็นภาพมากกว่าดังนั้นฉันจึงตั้งค่าส่วนใหญ่ในตัวสร้างอินเทอร์เฟซโดยใช้ร้านค้าและเค้าโครงอัตโนมัติ

นี่คือวิธีแก้ปัญหาของฉันใน Swift

    //shadowView is a UIView of what I want to be "solid"
    var outerPath = UIBezierPath(rect: shadowView.frame)

    //croppingView is a subview of shadowView that is laid out in interface builder using auto layout
    //croppingView is hidden.
    var circlePath = UIBezierPath(ovalInRect: croppingView.frame)
    outerPath.usesEvenOddFillRule = true
    outerPath.appendPath(circlePath)

    var maskLayer = CAShapeLayer()
    maskLayer.path = outerPath.CGPath
    maskLayer.fillRule = kCAFillRuleEvenOdd
    maskLayer.fillColor = UIColor.whiteColor().CGColor

    shadowView.layer.mask = maskLayer

เข้ากันได้กับ Code Swift 2.0

เริ่มจากคำตอบ @animal_inch ฉันเขียนโค้ดระดับยูทิลิตี้เล็กน้อยหวังว่ามันจะประทับใจ:

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

}

จากนั้นทุกที่ในรหัสของคุณ:

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