记一次使用贝塞尔曲线实现页面镂空效果的坑

起因是项目里有一个引导页面需要实现镂空的效果
于是我想到了使用透明背景图，然后使用贝塞尔曲线画出来一个圆角矩形并填使用颜色充整个View

     //在draw(_ rect: CGRect)里进行绘制
    override func draw(_ rect: CGRect) {
        
        //这是页面里的透明矩形
        let myRect = CGRect(x: kScreenWidth - 162 - 12, y: 385, width: 162, height: 64)
        let path = UIBezierPath.init(rect: rect)//这里得到的rect就是整个View的rect
        let circlePath = UIBezierPath.init(roundedRect: myRect, cornerRadius: 8)//这一步是为了得到圆角矩形的path
        path.append(circlePath)

        //这里使用奇偶填充规则（判断一个闭合的path）
        //具体内容在http://www.lovecqmh.cn/?p=27
        path.usesEvenOddFillRule = true
        
        let fillLayer = CAShapeLayer.init()
        fillLayer.path = path.cgPath
        fillLayer.fillRule = kCAFillRuleEvenOdd
        fillLayer.fillColor = UIColor.init(hex: 0x000000).withAlphaComponent(0.6).cgColor
        fillLayer.opacity = 0.5
        self.layer.addSublayer(fillLayer)
        

         //下面是坑
         //之前设置图片的时候使用了imageView，并添加在了View上，但是这么做的后果就是
         //draw(_ rect: CGRect)绘制的时候会把view上图片等其他空间颜色遮挡导致颜色与UI图
         //上不一致，所以我使用了layer ，在绘制完透明矩形之后再添加图片在self.layer上也就
         //不会出现遮挡的问题了

        let imageLayer = CALayer.init()
        imageLayer.frame = CGRect(x: kScreenWidth - 162 - 12, y: 464, width: 162, height: 116)
        imageLayer.contents = UIImage.init(named: "test_sign")?.cgImage//这里要记得写cgImage不然会显示不出来
        self.layer.addSublayer(imageLayer)
        
        
    }