#4 運用 UIBezierPath 繪製可愛圖案

第3堂課開始寫程式囉～前2堂課只要用storyboard就可以做出app(很多屬性可以選擇，方便但限制比較多)，有些小細節就必須寫程式來調整

先來學用線條畫圖案（手好痠也很花時間，但我就是想畫:D

1.在Playground使用UIBezierPath繪製圖案的path

2.產生CAShapeLayer，透過path去接UIBezierPath繪製的圖案(轉成cgPath)

3.CAShapeLayer用fillColor填上喜歡的顏色(cgColor)

4.產生UIView把圖案用addSublayer加進來(Layer會按照順序往上層疊加)

NOTE:

UIBezierPath有很多種線條可以選擇addLine/addQuadCurve/addCurve

CAShapeLayer若要描邊要設定strokeColor/lineWidth

UIView可用mask/addSublayer

程式碼如下：

import UIKit
//yellow hair
let pathHair = UIBezierPath()
pathHair.move(to: CGPoint(x: 348, y: 97))
pathHair.addCurve(to: CGPoint(x: 324, y: 59), controlPoint1: CGPoint(x: 356, y: 70), controlPoint2: CGPoint(x: 338, y: 49))
pathHair.addCurve(to: CGPoint(x: 240, y: 117), controlPoint1: CGPoint(x: 280, y: 40), controlPoint2: CGPoint(x: 270, y: 99))
pathHair.addCurve(to: CGPoint(x: 173, y: 160), controlPoint1: CGPoint(x: 208, y: 133), controlPoint2: CGPoint(x: 170, y: 120))
pathHair.addCurve(to: CGPoint(x: 280, y: 215), controlPoint1: CGPoint(x: 190, y: 215), controlPoint2: CGPoint(x: 250, y: 210))
pathHair.close()
let aliceHairLayer = CAShapeLayer()
aliceHairLayer.path = pathHair.cgPath
let colorHair = UIColor(red: 1, green: 217/255, blue: 57/255, alpha: 1)
aliceHairLayer.fillColor = colorHair.cgColor
//blue skirt
let pathSkirt = UIBezierPath()
pathSkirt.move(to: CGPoint(x: 300, y: 250))
pathSkirt.addLine(to: CGPoint(x: 330, y: 211))
pathSkirt.addCurve(to: CGPoint(x: 299, y: 163), controlPoint1: CGPoint(x: 375, y: 190), controlPoint2: CGPoint(x: 380, y: 166))
pathSkirt.addCurve(to: CGPoint(x: 263, y: 214), controlPoint1: CGPoint(x: 236, y: 164), controlPoint2: CGPoint(x: 230, y: 198))
pathSkirt.addLine(to: CGPoint(x: 248, y: 248))
pathSkirt.addCurve(to: CGPoint(x: 80, y: 344), controlPoint1: CGPoint(x: 145, y: 250), controlPoint2: CGPoint(x: 153, y: 318))
pathSkirt.addCurve(to: CGPoint(x: 260, y: 434), controlPoint1: CGPoint(x: 95, y: 429), controlPoint2: CGPoint(x: 212, y: 400))
pathSkirt.addCurve(to: CGPoint(x: 449, y: 416), controlPoint1: CGPoint(x: 302, y: 472), controlPoint2: CGPoint(x: 408, y: 452))
pathSkirt.addQuadCurve(to: CGPoint(x: 412, y: 369), controlPoint: CGPoint(x: 445, y: 393))
pathSkirt.close()
let aliceSkirtLayer = CAShapeLayer()
aliceSkirtLayer.path = pathSkirt.cgPath
let colorSkirt = UIColor(red: 40/255, green: 140/255, blue: 192/255, alpha: 1)
aliceSkirtLayer.fillColor = colorSkirt.cgColor
//white neck
let pathNeck = UIBezierPath()
pathNeck.move(to: CGPoint(x: 320, y: 174))
pathNeck.addQuadCurve(to: CGPoint(x: 299, y: 159), controlPoint: CGPoint(x: 304, y: 170))
pathNeck.addCurve(to: CGPoint(x: 320, y: 177), controlPoint1: CGPoint(x: 295, y: 195), controlPoint2: CGPoint(x: 312, y: 190))
pathNeck.addCurve(to: CGPoint(x: 323, y: 160), controlPoint1: CGPoint(x: 333, y: 185), controlPoint2: CGPoint(x: 341, y: 178))
pathNeck.close()
let aliceNeckLayer = CAShapeLayer()
aliceNeckLayer.path = pathNeck.cgPath
aliceNeckLayer.fillColor = UIColor.white.cgColor
//white apron
let pathApron = UIBezierPath()
pathApron.move(to: CGPoint(x: 334, y: 166))
pathApron.addCurve(to: CGPoint(x: 291, y: 162), controlPoint1: CGPoint(x: 365, y: 214), controlPoint2: CGPoint(x: 264, y: 213))
pathApron.addQuadCurve(to: CGPoint(x: 251, y: 168), controlPoint: CGPoint(x: 260, y: 168))
pathApron.addQuadCurve(to: CGPoint(x: 248, y: 178), controlPoint: CGPoint(x: 245, y: 173))
pathApron.addQuadCurve(to: CGPoint(x: 253, y: 175), controlPoint: CGPoint(x: 253, y: 175))
pathApron.addQuadCurve(to: CGPoint(x: 293, y: 211), controlPoint: CGPoint(x: 262, y: 198))
pathApron.addQuadCurve(to: CGPoint(x: 250, y: 241), controlPoint: CGPoint(x: 295, y: 280))
pathApron.addQuadCurve(to: CGPoint(x: 254, y: 233), controlPoint: CGPoint(x: 255, y: 233))
pathApron.addQuadCurve(to: CGPoint(x: 237, y: 239), controlPoint: CGPoint(x: 234, y: 210))
pathApron.addQuadCurve(to: CGPoint(x: 221, y: 228), controlPoint: CGPoint(x: 226, y: 235))
pathApron.addQuadCurve(to: CGPoint(x: 224, y: 251), controlPoint: CGPoint(x: 216, y: 245))
pathApron.addQuadCurve(to: CGPoint(x: 249, y: 247), controlPoint: CGPoint(x: 236, y: 250))
pathApron.addQuadCurve(to: CGPoint(x: 278, y: 264), controlPoint: CGPoint(x: 258, y: 261))
pathApron.addQuadCurve(to: CGPoint(x: 256, y: 400), controlPoint: CGPoint(x: 253, y: 345))
pathApron.addCurve(to: CGPoint(x: 440, y: 380), controlPoint1: CGPoint(x: 366, y: 447), controlPoint2: CGPoint(x: 373, y: 366))
pathApron.addQuadCurve(to: CGPoint(x: 306, y: 248), controlPoint: CGPoint(x: 366, y: 266))
pathApron.addQuadCurve(to: CGPoint(x: 340, y: 205), controlPoint: CGPoint(x: 325, y: 240))
pathApron.addQuadCurve(to: CGPoint(x: 354, y: 171), controlPoint: CGPoint(x: 365, y: 185))
pathApron.close()
let aliceApronLayer = CAShapeLayer()
aliceApronLayer.path = pathApron.cgPath
aliceApronLayer.fillColor = UIColor.white.cgColor
//white leg
let pathLeg = UIBezierPath()
pathLeg.move(to: CGPoint(x: 232, y: 420))
pathLeg.addCurve(to: CGPoint(x: 182, y: 468), controlPoint1: CGPoint(x: 213, y: 444), controlPoint2: CGPoint(x: 213, y: 455))
pathLeg.addCurve(to: CGPoint(x: 194, y: 478), controlPoint1: CGPoint(x: 171, y: 500), controlPoint2: CGPoint(x: 183, y: 510))
pathLeg.addQuadCurve(to: CGPoint(x: 266, y: 444), controlPoint: CGPoint(x: 214, y: 466))
pathLeg.addCurve(to: CGPoint(x: 288, y: 546), controlPoint1: CGPoint(x: 266, y: 507), controlPoint2: CGPoint(x: 288, y: 516))
pathLeg.addCurve(to: CGPoint(x: 306, y: 547), controlPoint1: CGPoint(x: 305, y: 590), controlPoint2: CGPoint(x: 320, y: 585))
pathLeg.addQuadCurve(to: CGPoint(x: 307, y: 450), controlPoint: CGPoint(x: 298, y: 505))
pathLeg.close()
let aliceLegLayer = CAShapeLayer()
aliceLegLayer.path = pathLeg.cgPath
aliceLegLayer.fillColor = UIColor.white.cgColor
//skin face
let pathFace = UIBezierPath()
pathFace.move(to: CGPoint(x: 326, y: 72))
pathFace.addCurve(to: CGPoint(x: 296, y: 110), controlPoint1: CGPoint(x: 318, y: 90), controlPoint2: CGPoint(x: 325, y: 90))
pathFace.addQuadCurve(to: CGPoint(x: 296, y: 125), controlPoint: CGPoint(x: 300, y: 116))
pathFace.addCurve(to: CGPoint(x: 294, y: 140), controlPoint1: CGPoint(x: 276, y: 119), controlPoint2: CGPoint(x: 280, y: 136))
pathFace.addCurve(to: CGPoint(x: 320, y: 175), controlPoint1: CGPoint(x: 298, y: 152), controlPoint2: CGPoint(x: 295, y: 170))
pathFace.addQuadCurve(to: CGPoint(x: 322, y: 164), controlPoint: CGPoint(x: 323, y: 170))
pathFace.addQuadCurve(to: CGPoint(x: 337, y: 160), controlPoint: CGPoint(x: 333, y: 164))
pathFace.addCurve(to: CGPoint(x: 347, y: 119), controlPoint1: CGPoint(x: 348, y: 140), controlPoint2: CGPoint(x: 356, y: 137))
pathFace.addQuadCurve(to: CGPoint(x: 330, y: 71), controlPoint: CGPoint(x: 355, y: 82))
pathFace.close()
let aliceFaceLayer = CAShapeLayer()
aliceFaceLayer.path = pathFace.cgPath
let colorSkin = UIColor(red: 251/255, green: 200/255, blue: 169/255, alpha: 1)
aliceFaceLayer.fillColor = colorSkin.cgColor
//skin leftHand
let pathLeftHand = UIBezierPath()
pathLeftHand.move(to: CGPoint(x: 335, y: 210))
pathLeftHand.addCurve(to: CGPoint(x: 373, y: 290), controlPoint1: CGPoint(x: 336, y: 262), controlPoint2: CGPoint(x: 322, y: 230))
pathLeftHand.addQuadCurve(to: CGPoint(x: 383, y: 299), controlPoint: CGPoint(x: 379, y: 297))
pathLeftHand.addCurve(to: CGPoint(x: 385, y: 285), controlPoint1: CGPoint(x: 418, y: 305), controlPoint2: CGPoint(x: 410, y: 295))
pathLeftHand.addQuadCurve(to: CGPoint(x: 354, y: 237), controlPoint: CGPoint(x: 369, y: 257))
pathLeftHand.addQuadCurve(to: CGPoint(x: 354, y: 198), controlPoint: CGPoint(x: 354, y: 214))
pathLeftHand.close()
let aliceLeftHandLayer = CAShapeLayer()
aliceLeftHandLayer.path = pathLeftHand.cgPath
aliceLeftHandLayer.fillColor = colorSkin.cgColor
//skin rightHand
let pathRightHand = UIBezierPath()
pathRightHand.move(to: CGPoint(x: 254, y: 198))
pathRightHand.addQuadCurve(to: CGPoint(x: 259, y: 260), controlPoint: CGPoint(x: 253, y: 235))
pathRightHand.addQuadCurve(to: CGPoint(x: 325, y: 269), controlPoint: CGPoint(x: 281, y: 273))
pathRightHand.addQuadCurve(to: CGPoint(x: 342, y: 266), controlPoint: CGPoint(x: 330, y: 271))
pathRightHand.addCurve(to: CGPoint(x: 329, y: 259), controlPoint1: CGPoint(x: 364, y: 263), controlPoint2: CGPoint(x: 347, y: 240))
pathRightHand.addQuadCurve(to: CGPoint(x: 276, y: 250), controlPoint: CGPoint(x: 292, y: 251))
pathRightHand.addQuadCurve(to: CGPoint(x: 273, y: 213), controlPoint: CGPoint(x: 277, y: 230))
pathRightHand.addQuadCurve(to: CGPoint(x: 254, y: 198), controlPoint: CGPoint(x: 253, y: 197))
//pathRightHand.close()
let aliceRightHandLayer = CAShapeLayer()
aliceRightHandLayer.path = pathRightHand.cgPath
aliceRightHandLayer.fillColor = colorSkin.cgColor
//black leftShoe
let pathLeftShoe = UIBezierPath()
pathLeftShoe.move(to: CGPoint(x: 187, y: 465))
pathLeftShoe.addCurve(to: CGPoint(x: 194, y: 481), controlPoint1: CGPoint(x: 175, y: 501), controlPoint2: CGPoint(x: 187, y: 497))
pathLeftShoe.addCurve(to: CGPoint(x: 174, y: 480), controlPoint1: CGPoint(x: 185, y: 530), controlPoint2: CGPoint(x: 164, y: 502))
pathLeftShoe.addQuadCurve(to: CGPoint(x: 187, y: 465), controlPoint: CGPoint(x: 178, y: 462))
let aliceLeftShoeLayer = CAShapeLayer()
aliceLeftShoeLayer.path = pathLeftShoe.cgPath
aliceLeftShoeLayer.fillColor = UIColor.black.cgColor
//black rightShoe
let pathRightShoe = UIBezierPath()
pathRightShoe.move(to: CGPoint(x: 288, y: 545))
pathRightShoe.addCurve(to: CGPoint(x: 308, y: 549), controlPoint1: CGPoint(x: 302, y: 582), controlPoint2: CGPoint(x: 314, y: 582))
pathRightShoe.addCurve(to: CGPoint(x: 288, y: 563), controlPoint1: CGPoint(x: 325, y: 600), controlPoint2: CGPoint(x: 295, y: 601))
pathRightShoe.addQuadCurve(to: CGPoint(x: 286, y: 546), controlPoint: CGPoint(x: 283, y: 548))
let aliceRightShoeLayer = CAShapeLayer()
aliceRightShoeLayer.path = pathRightShoe.cgPath
aliceRightShoeLayer.fillColor = UIColor.black.cgColor
//black ribbon
let pathRibbon = UIBezierPath()
pathRibbon.move(to: CGPoint(x: 302, y: 65))
pathRibbon.addCurve(to: CGPoint(x: 298, y: 64), controlPoint1: CGPoint(x: 326, y: 50), controlPoint2: CGPoint(x: 296, y: 35))
pathRibbon.addCurve(to: CGPoint(x: 292, y: 69), controlPoint1: CGPoint(x: 289, y: 42), controlPoint2: CGPoint(x: 267, y: 65))
pathRibbon.addQuadCurve(to: CGPoint(x: 275, y: 122), controlPoint: CGPoint(x: 265, y: 89))
pathRibbon.addQuadCurve(to: CGPoint(x: 302, y: 65), controlPoint: CGPoint(x: 271, y: 86))
let aliceRibbonLayer = CAShapeLayer()
aliceRibbonLayer.path = pathRibbon.cgPath
aliceRibbonLayer.fillColor = UIColor.black.cgColor
//stroke
//aliceHairLayer.strokeColor = UIColor.black.cgColor
//aliceHairLayer.lineWidth = 1
//aliceSkirtLayer.strokeColor = UIColor.black.cgColor
//aliceSkirtLayer.lineWidth = 1
//addSublayer
let frame = CGRect(x: 0, y: 0, width: 560, height: 640)
let view = UIView(frame: frame)
view.layer.addSublayer(aliceHairLayer)
view.layer.addSublayer(aliceLegLayer)
view.layer.addSublayer(aliceLeftHandLayer)
view.layer.addSublayer(aliceSkirtLayer)
view.layer.addSublayer(aliceNeckLayer)
view.layer.addSublayer(aliceApronLayer)
view.layer.addSublayer(aliceFaceLayer)
view.layer.addSublayer(aliceRightHandLayer)
view.layer.addSublayer(aliceLeftShoeLayer)
view.layer.addSublayer(aliceRightShoeLayer)
view.layer.addSublayer(aliceRibbonLayer)
view.backgroundColor = UIColor(red: 156/255, green: 201/255, blue: 220/255, alpha: 1)
view

ps: Peter Pan 很帥 (by 本人)