UIBezierPath實現不規(guī)則UIView

UIBezierPath實現不規(guī)則UIView:
思想:在view上繪制一個封閉的路徑然后用layer.mask 遮罩一下就OK

不規(guī)則UIView.png

1.先寫好圖形的頂點(UIBezierPath的各個方法使用在上一篇中有哦)

 let cropView = CropViewUseLayer()
        cropView.frame = CGRect(x:40,y:80,width:200,height:200)
        cropView.backgroundColor = UIColor.yellow
        self.view.addSubview(cropView)
       
        let offsetX:CGFloat = 0.0
        var modelArray:[LineModel] = []
        let model1 = LineModel()
        model1.startPoint = CGPoint(x:40+offsetX,y:80)
        model1.endPoint = CGPoint(x:140+offsetX,y:80)
        
        let model2 = LineModel()
        model2.startPoint = CGPoint(x:140+offsetX,y:80)
        model2.endPoint = CGPoint(x:140+offsetX,y:180)
        model2.controlPoint = CGPoint(x:90+offsetX,y:130)
        model2.lineType = .CurveLine
        
        let model3 = LineModel()
        model3.startPoint = CGPoint(x:140+offsetX,y:180)
        model3.endPoint = CGPoint(x:40+offsetX,y:180)
        
        let model4 = LineModel()
        model4.startPoint = CGPoint(x:40+offsetX,y:180)
        model4.endPoint = CGPoint(x:90+offsetX,y:130)
        
        let model5 = LineModel()
        model5.startPoint = CGPoint(x:90+offsetX,y:130)
        model5.endPoint = CGPoint(x:40+offsetX,y:80)
        
        modelArray.append(model1)
        modelArray.append(model2)
        modelArray.append(model3)
        modelArray.append(model4)
        modelArray.append(model5)
        
        cropView.layer.borderColor = UIColor .blue.cgColor
        cropView.layer.borderWidth = 2
        
        cropView.lineModelArray = modelArray
        
        cropView.drawLine()

2.調用drawLine方法繪制一下

    var lineModelArray:[LineModel] = []
    
    func drawLine() -> Void {
        
        let path = UIBezierPath()
        
        for index in 0...lineModelArray.count-1 {
            let model = lineModelArray[index]
            
            if index == 0 {
                path.move(to: model.startPoint)
            }
            if model.lineType == LineType.StraightLine {
                path.addLine(to: model.endPoint)
            }
            else
            {
                path.addQuadCurve(to: model.endPoint, controlPoint: model.controlPoint)
            }
            
        }
        
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = UIColor.red.cgColor
        shapeLayer.frame = self.bounds
        self.layer.mask = shapeLayer
        
        let borderLLayer = CAShapeLayer()
        borderLLayer.path = path.cgPath
        borderLLayer.fillColor = UIColor.green.cgColor
        borderLLayer.strokeColor = UIColor.purple.cgColor
        borderLLayer.lineWidth = 2.0
        self.layer.addSublayer(borderLLayer)
        
      
    }

其實主要實現就是給CAShapeLayer一個path 讓他生成一個不規(guī)則的layer 然后把layer傳給self.layer.mask 就可以了 ;

注意:
一.shapeLayer.frame = self.bounds 這個frame是相對于UIView的
二. 原以為這個path需要繪制一下移動一下的所以model就那樣封裝了后來發(fā)現這樣不行只要第一次move一下就行后面的直接調用addLine不然不能實現

 for model in lineModelArray {
            path.move(to: model.startPoint)
            if model.lineType == LineType.StraightLine {
                path.addLine(to: model.endPoint)
            }
            else
            {
                path.addQuadCurve(to: model.endPoint, controlPoint: model.controlPoint)
            }
            
        }
//這樣是不對的哦

Demo地址https://github.com/Z-hui/IrregularView

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容