UIBezierPath 貝賽爾的運用

原本對於貝賽爾曲線很害怕，懂了之後可謂之發現繪圖新大陸

這是一個可以在內部畫圖的方法。

好的，對！我畫了一個幼幼班的小王子，但也花了一些時間在畫

先放上

。參考文件: 亦師亦友的小潘文章

運用 UIBezierPath 繪製各種形狀

。簡單筆記：

1.宣告一個UIBezierPath()出來

let path = UIBezierPath()

2.再產生一個起始點

var point = CGPoint(x: 376, y: 166)。 //起始點

3.將筆移過去那點再開始 (我自己稱為畫筆)

path.move(to: point)

4.接著就看要畫什麼樣的圖案

-直線：

跟他說下一個點在哪裡，然後直接.addLine

path.addLine(to: CGPoint(x: 370, y: 161))

-單曲線：

跟他說下一個點在哪，使用.addQuadCurve，並提供錨點controlPoint

path.addQuadCurve(to: CGPoint(x: 395, y: 258), controlPoint: CGPoint(x: 395, y: 255))

對我來說錨點可以理解成繪圖時的錨點，想法相近但不太ㄧ樣

AdobeXD

最真實的圖還是以下

-S曲線：

跟他說下一個點在哪，使用.addCurve，並提供兩錨點逗號隔開

path.addCurve(to: CGPoint(x: 395, y: 258), 
controlPoint1: CGPoint(x: 360, y: 245), 
controlPoint2: CGPoint(x: 380, y: 275))

Drawing Shapes Using Bézier Paths

5. 畫好之後，再把線關起來，程式會自動頭尾相連

path.close()

6.讓路徑 -->圖層 -->View

產生一個CAShapeLayer()

讓剛剛畫好的路徑＝這個圖層的路徑

(讓路徑轉成圖層，讓圖層也長成這樣)

造一個View，可以給他顏色

讓View圖層遮罩 = 剛剛做好的圖層

let bowShapeLayer = CAShapeLayer()
bowShapeLayer.path = pathForBow.cgPath
let bowView = UIView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))
bowView.backgroundColor = UIColor(red: 0.8, green: 10/255, blue: 10/255, alpha: 1)
bowView.layer.mask = bowShapeLayer

7.有了view就可以直接做顯示

(把所有要的view都塞入最終要顯示的View中，類似繪圖group的概念)

//疊圖
backgroundView.addSubview(moonView)
backgroundView.addSubview(fallRoseView)
backgroundView.addSubview(rose2View)
backgroundView.addSubview(roseView)
backgroundView.addSubview(rootView)
backgroundView.addSubview(leftView)
backgroundView.addSubview(neckView)

-小地方：

預覽時候都是顛倒的，請丟到view上做顯示及調整

。取得座標網址

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

喜歡文章可以幫我拍手，喜歡我也可以拍手，謝謝光臨。

可以幫我點個讚，或是分享一杯咖啡支持我。

The Project on my Github : Version 1.0

joyful1227/UIBezierPath