iOS的几种镂空方式

4,967 阅读2分钟

最近一项目UI非常偏爱圆角,不得不使用遮罩的方式解决,记录下几种镂空遮罩的方式

private lazy var testView1: UIView = {
        let view = UIView(frame: CGRect(x: 10, y: 100, width: 200, height: 200))
        view.backgroundColor = .red
        return view
    }()
    
    private lazy var testView2: UIView = {
        let view = UIView(frame: CGRect(x: 220, y: 100, width: 200, height: 200))
        view.backgroundColor = .red
        return view
    }()
    
    private lazy var testView3: UIView = {
        let view = UIView(frame: CGRect(x: 10, y: 310, width: 200, height: 200))
        view.backgroundColor = .red
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(testView1)
        view.addSubview(testView2)
        view.addSubview(testView3)
        
        test1()
        test2()
        test3()
    }
    
    // 一个镂空遮罩,中间镂空透明 四周不透明
    private func test1() {
        let bezierPath = UIBezierPath(rect: testView1.bounds)
        // 圆形 arcCenter中心点 endAngle 一般写2pi
        let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
        
        // 矩形 roundedRect 矩形位置  cornerRadius 矩形圆边
        let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
        
        bezierPath.append(subPath2)
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = bezierPath.cgPath
        maskLayer.fillRule = .evenOdd
        testView1.layer.mask = maskLayer
    }
    
    // 中间不透明 四周透明
    private func test2() {
        let bezierPath = UIBezierPath()
        // 圆形 arcCenter中心点 endAngle 一般写2pi
        let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
        
        // 矩形 roundedRect 矩形位置  cornerRadius 矩形圆边
        let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
        
        bezierPath.append(subPath)
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = bezierPath.cgPath
        maskLayer.fillColor = UIColor.cyan.cgColor
        testView2.layer.insertSublayer(maskLayer, at: 0)// 四周透明,中间加个遮罩
    }
    
    // 直接切个圆出来,四周丢掉,只保留中间
    private func test3() {
        let bezierPath = UIBezierPath()
        // 圆形 arcCenter中心点 endAngle 一般写2pi
        let subPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 50, startAngle: 0.0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
        
        // 矩形 roundedRect 矩形位置  cornerRadius 矩形圆边
        let subPath2 = UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 180, height: 180), cornerRadius: 10)
        
        bezierPath.append(subPath)
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = bezierPath.cgPath
        maskLayer.fillColor = UIColor.cyan.cgColor
        testView3.layer.mask = maskLayer// 四周全砍了,只留中间,等于切圆角效果
    }