#3 運用 UIBezierPath 繪製圖案

Abel
彼得潘的 Swift iOS / Flutter App 開發教室
10 min readJan 28, 2021

使用UIBezierPath繪製路徑

CAShapeLayer 顯示形狀

將 CAShapeLayer 加到 view.layer 上

利用下面的網站查詢座標顏色

https://yangcha.github.io/iview/iview.html

addLine畫出直線

addQuadCurve 畫出曲線

addCurve畫出有兩個座標點的曲線

path = UIBezierPath(ovalIn: CGRect(x: 140, y: 115, width: 8, height: 15))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 86/255, green: 59/255, blue: 10/255, alpha: 1).cgColor
view.layer.addSublayer(cowLayer)
path = UIBezierPath(ovalIn: CGRect(x: 220, y: 115, width: 8, height: 15))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 86/255, green: 59/255, blue: 10/255, alpha: 1).cgColor
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 88, y: 146))
path.addQuadCurve(to: CGPoint(x: 94, y: 207), controlPoint: CGPoint(x: 88, y: 177))
path.addCurve(to: CGPoint(x: 281, y: 206), controlPoint1: CGPoint(x: 131, y: 235), controlPoint2: CGPoint(x: 233, y: 236))
path.addCurve(to: CGPoint(x: 286, y: 146), controlPoint1: CGPoint(x: 286, y: 196), controlPoint2: CGPoint(x: 286, y: 165))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor.clear.cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 2
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 148, y: 180))
path.addQuadCurve(to: CGPoint(x: 165, y: 181), controlPoint: CGPoint(x: 155, y: 170))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor.clear.cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 3
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 213, y: 177))
path.addQuadCurve(to: CGPoint(x: 229, y: 181), controlPoint: CGPoint(x: 224, y: 170))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor.clear.cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 3
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 105, y: 213))
path.addQuadCurve(to: CGPoint(x: 112, y: 250), controlPoint: CGPoint(x: 108, y: 241))
path.addQuadCurve(to: CGPoint(x: 145, y: 253), controlPoint: CGPoint(x: 130, y: 254))
path.addQuadCurve(to: CGPoint(x: 148, y: 225), controlPoint: CGPoint(x: 146, y: 244))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 242/255, green: 176/255, blue: 115/255, alpha: 1).cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 2
view.layer.addSublayer(cowLayer)
path = UIBezierPath()
path.move(to: CGPoint(x: 234, y: 222))
path.addQuadCurve(to: CGPoint(x: 238, y: 250), controlPoint: CGPoint(x: 236, y: 244))
path.addQuadCurve(to: CGPoint(x: 269, y: 248), controlPoint: CGPoint(x: 252, y: 254))
path.addQuadCurve(to: CGPoint(x: 274, y: 211), controlPoint: CGPoint(x: 273, y: 236))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 242/255, green: 176/255, blue: 115/255, alpha: 1).cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 2
view.layer.addSublayer(cowLayer)


path = UIBezierPath()
path.move(to: CGPoint(x: 95, y: 98))
path.addQuadCurve(to: CGPoint(x: 77, y: 78), controlPoint: CGPoint(x: 81, y: 89))
path.addQuadCurve(to: CGPoint(x: 68, y: 53), controlPoint: CGPoint(x: 75, y: 62))
path.addQuadCurve(to: CGPoint(x: 109, y: 70), controlPoint: CGPoint(x: 94, y: 50))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 242/255, green: 176/255, blue: 115/255, alpha: 1).cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 2
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 109, y: 70))
path.addQuadCurve(to: CGPoint(x: 112, y: 12), controlPoint: CGPoint(x: 101, y: 43))
path.addQuadCurve(to: CGPoint(x: 130, y: 54), controlPoint: CGPoint(x: 120, y: 40))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 190/255, green: 173/255, blue: 166/255, alpha: 1).cgColor
view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 235, y: 50))
path.addQuadCurve(to: CGPoint(x: 256, y: 10), controlPoint: CGPoint(x: 253, y: 30))
path.addQuadCurve(to: CGPoint(x: 258, y: 65), controlPoint: CGPoint(x: 270, y: 33))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 190/255, green: 173/255, blue: 166/255, alpha: 1).cgColor

view.layer.addSublayer(cowLayer)

path = UIBezierPath()
path.move(to: CGPoint(x: 276, y: 93))
path.addQuadCurve(to: CGPoint(x: 291, y: 73), controlPoint: CGPoint(x: 286, y: 83))
path.addQuadCurve(to: CGPoint(x: 300, y: 55), controlPoint: CGPoint(x: 293, y: 64))
path.addQuadCurve(to: CGPoint(x: 258, y: 65), controlPoint: CGPoint(x: 279, y: 56))
cowLayer = CAShapeLayer()
cowLayer.path = path.cgPath
cowLayer.fillColor = UIColor(red: 242/255, green: 176/255, blue: 115/255, alpha: 1).cgColor
cowLayer.strokeColor = UIColor(red: 214/255, green: 174/255, blue: 138/255, alpha: 1).cgColor
cowLayer.lineWidth = 2
view.layer.addSublayer(cowLayer)

--

--