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)
}
}
//這樣是不對的哦