swift UIBezierPath 練習

這次要利用 UIBezierPath 繪製自己喜歡的圖案，一開始本來也想從簡單一點的幾何圖案開始下手，但看了好久，總是沒有找到自己喜歡的圖案，

既然要練習，一定要從自己有興趣的地方下手，於是就開始往喜歡的品牌 logo 開始發想，找著找著，突然想到 Fragment Design 2018 年開始的特別企劃「THUNDERBOLT PROJECT」，將原本活潑的黃色皮卡丘改成酷帥的黑色，同時利用剪影的方式呈現企劃 logo，好，就決定是你了！

對於「THUNDERBOLT PROJECT」企劃有興趣的朋友可以參考官方IG。

下面就來說明一下圖形繪製的過程：

先確定好圖片之後，利用 iView 網站查詢座標點，如下圖：

在 playground 裡面繪製一張背景視圖：

//建立背景視圖
var rect = CGRect(x: 0, y: 0, width: 1024, height: 768)
var backgrougview = UIView(frame: rect)
backgrougview.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1)

接下來就要開始繪製暗黑皮卡丘了，先確定好皮卡丘視圖的尺寸、顏色、輪廓，然後就開始把座標點進行輸入，最後利用遮罩完成暗黑皮卡丘的繪圖：

//設定皮卡丘背景，圖框範圍，背景顏色以及輪廓路徑
rect = CGRect(x: 0, y: 0, width: 1024, height: 768)
let pikachuview = UIView(frame: rect)
pikachuview.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 1)
let pikachuPath = UIBezierPath()
//設定皮卡丘鼻頭初始點
pikachuPath.move(to: CGPoint(x: 298, y: 365))
//繪製皮卡丘
pikachuPath.addLine(to: CGPoint(x: 307, y: 359))
pikachuPath.addQuadCurve(to: CGPoint(x: 352, y: 307), controlPoint: CGPoint(x: 307, y: 315))
pikachuPath.addQuadCurve(to: CGPoint(x: 436, y: 271), controlPoint: CGPoint(x: 383, y: 273))
pikachuPath.addQuadCurve(to: CGPoint(x: 387, y: 313),controlPoint: CGPoint(x: 432, y: 285))
pikachuPath.addQuadCurve(to: CGPoint(x: 494, y: 357), controlPoint: CGPoint(x: 468, y: 281))
pikachuPath.addLine(to: CGPoint(x: 501, y: 360))
pikachuPath.addLine(to: CGPoint(x: 497, y: 336))
pikachuPath.addLine(to: CGPoint(x: 514, y: 339))
pikachuPath.addLine(to: CGPoint(x: 512, y: 318))
pikachuPath.addLine(to: CGPoint(x: 537, y: 322))
pikachuPath.addLine(to: CGPoint(x: 529, y: 302))
pikachuPath.addQuadCurve(to: CGPoint(x: 677, y: 257), controlPoint: CGPoint(x: 622, y: 258))
pikachuPath.addLine(to: CGPoint(x: 647, y: 327))
pikachuPath.addLine(to: CGPoint(x: 561, y: 328))
pikachuPath.addLine(to: CGPoint(x: 559, y: 350))
pikachuPath.addLine(to: CGPoint(x: 529, y: 342))
pikachuPath.addLine(to: CGPoint(x: 532, y: 360))
pikachuPath.addLine(to: CGPoint(x: 517, y: 358))
pikachuPath.addLine(to: CGPoint(x: 518, y: 381))
pikachuPath.addLine(to: CGPoint(x: 495, y: 370))
pikachuPath.addQuadCurve(to: CGPoint(x: 442, y: 423), controlPoint: CGPoint(x: 489, y: 420))
pikachuPath.addQuadCurve(to: CGPoint(x: 432, y: 431), controlPoint: CGPoint(x: 439, y: 430))
pikachuPath.addQuadCurve(to: CGPoint(x: 418, y: 423), controlPoint: CGPoint(x: 427, y: 429))
pikachuPath.addLine(to: CGPoint(x: 423, y: 440))
pikachuPath.addLine(to: CGPoint(x: 417, y: 447))
pikachuPath.addQuadCurve(to: CGPoint(x: 365, y: 410), controlPoint: CGPoint(x: 401, y: 444))
pikachuPath.addQuadCurve(to: CGPoint(x: 332, y: 406), controlPoint: CGPoint(x: 346, y: 408))
pikachuPath.addQuadCurve(to: CGPoint(x: 298, y: 365), controlPoint: CGPoint(x: 295, y: 384))
//建立皮卡丘遮罩
let pikachuShape = CAShapeLayer()
pikachuShape.path = pikachuPath.cgPath
pikachuview.layer.mask = pikachuShape

下個步驟就是繪製皮卡丘尾部的閃電標誌，步驟與繪製皮卡丘相同，重點是要有耐心，反覆練習相同的程式碼：

//設定閃電背景，圖框範圍，背景顏色以及輪廓路徑
rect = CGRect(x: 0, y: 0, width: 1024, height: 768)
let thunderview = UIView(frame: rect)
thunderview.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 1)
let thunderPath = UIBezierPath()
//繪製閃電
thunderPath.move(to: CGPoint(x: 573, y: 343))
thunderPath.addLine(to: CGPoint(x: 672, y: 340))
thunderPath.addLine(to: CGPoint(x: 670, y: 358))
thunderPath.addLine(to: CGPoint(x: 740, y: 376))
thunderPath.addLine(to: CGPoint(x: 642, y: 380))
thunderPath.addLine(to: CGPoint(x: 647, y: 359))
thunderPath.close()
//建立閃電遮罩
let thunderShape = CAShapeLayer()
thunderShape.path = thunderPath.cgPath
thunderview.layer.mask = thunderShape

完成兩個主要圖形繪製之後，就只要利用 addSubview 將圖形套用到背景試圖就完成了，完成後的視圖，可以利用 playground 的 liveView 功能檢視，畫完真的是滿有成就感的啊！

以上就是暗黑皮卡丘的繪製方法，好的，那我們下次見！