運用 UIBezierPath 繪製Pikachu

UIBezierPath

花了不少時間，終於完成了Pikachu

先來看看成品

恩。。。其實還是有不少地方不及格。。。

但是哥。。。盡力了

製作的過程中使用了：

畫曲線＿path.addQuadCurve
畫直線path.addLine
畫圓path = UIBezierPath(ovalIn: CGRect(x: x, y: x, width: x, height: x))

以下為程式碼

import SwiftUI
struct DrawView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView()
//yellowBody
var path = UIBezierPath()
path.move(to: CGPoint(x:86,y:95))
path.addQuadCurve(to: CGPoint(x: 3, y: 70), controlPoint: CGPoint(x:37, y: 95))
path.addQuadCurve(to: CGPoint(x: 99, y: 80), controlPoint: CGPoint(x:52, y: 59))
path.addQuadCurve(to: CGPoint(x: 169, y: 77), controlPoint: CGPoint(x:128, y: 61))
path.addQuadCurve(to: CGPoint(x: 246, y: 3), controlPoint: CGPoint(x:191, y: 33))
path.addQuadCurve(to: CGPoint(x: 189, y: 96), controlPoint: CGPoint(x:222, y: 62))
path.addQuadCurve(to: CGPoint(x: 193, y: 170), controlPoint: CGPoint(x:207, y: 121))
path.addQuadCurve(to: CGPoint(x: 203, y: 282), controlPoint: CGPoint(x:235, y: 246))
path.addQuadCurve(to: CGPoint(x: 146, y: 283), controlPoint: CGPoint(x:190, y: 291))
path.addQuadCurve(to: CGPoint(x: 78, y: 258), controlPoint: CGPoint(x:91, y: 300))
path.addQuadCurve(to: CGPoint(x: 86, y: 217), controlPoint: CGPoint(x:77, y: 237))
path.addQuadCurve(to: CGPoint(x: 91, y: 181), controlPoint: CGPoint(x:86, y: 198))
path.addQuadCurve(to: CGPoint(x: 73, y: 128), controlPoint: CGPoint(x:56, y: 153))
path.addQuadCurve(to: CGPoint(x:86,y:95), controlPoint: CGPoint(x:74, y: 109))
let leftEarBlack = CAShapeLayer()
leftEarBlack.path = path.cgPath
view.layer.addSublayer(leftEarBlack)
leftEarBlack.fillColor = CGColor (srgbRed:253/255, green: 224/255, blue: 98/255, alpha: 255)
leftEarBlack.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
leftEarBlack.lineWidth = 2
//tail
path = UIBezierPath()
path.move(to: CGPoint(x:216,y:239))
path.addLine(to: CGPoint(x: 239, y: 217))
path.addLine(to: CGPoint(x: 215, y: 203))
path.addLine(to: CGPoint(x: 230, y: 178))
path.addLine(to: CGPoint(x: 199, y: 168))
path.addLine(to: CGPoint(x: 254, y: 89))
path.addLine(to: CGPoint(x: 300, y: 170))
//        path.addLine(to: CGPoint(x: 290, y: 191))
path.addLine(to: CGPoint(x: 269, y: 175))
path.addLine(to: CGPoint(x: 250, y: 206))
path.addLine(to: CGPoint(x: 273, y: 217))
path.addLine(to: CGPoint(x: 216, y: 253))
let tail = CAShapeLayer()
tail.path = path.cgPath
view.layer.addSublayer(tail)
tail.fillColor = CGColor (srgbRed:253/255, green: 224/255, blue: 98/255, alpha: 255)
tail.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
tail.lineWidth = 2
//foot
path = UIBezierPath()
path.move(to: CGPoint(x:200,y:284))
path.addQuadCurve(to: CGPoint(x:205,y:317), controlPoint: CGPoint(x:209, y: 295))
path.addQuadCurve(to: CGPoint(x:198,y:300), controlPoint: CGPoint(x:203, y: 307))
path.move(to: CGPoint(x:205,y:320))
path.addQuadCurve(to: CGPoint(x:173,y:287), controlPoint: CGPoint(x:182, y: 307))
path.addQuadCurve(to: CGPoint(x:202,y:282), controlPoint: CGPoint(x:193, y: 289))
path.move(to: CGPoint(x:201,y:317))
path.addLine(to: CGPoint(x: 191, y: 300))
path.move(to: CGPoint(x:122,y:289))
path.addQuadCurve(to: CGPoint(x:79,y:307), controlPoint: CGPoint(x:104, y: 307))
path.addLine(to: CGPoint(x: 75, y: 305))
path.addQuadCurve(to: CGPoint(x:91,y:281), controlPoint: CGPoint(x:78, y: 288))
path.move(to: CGPoint(x:75,y:304))
path.addQuadCurve(to: CGPoint(x:83,y:296), controlPoint: CGPoint(x:80, y: 301))
path.move(to: CGPoint(x:80,y:307))
path.addQuadCurve(to: CGPoint(x:92,y:296), controlPoint: CGPoint(x:85, y: 304))
path.move(to: CGPoint(x:91,y:280))
path.addQuadCurve(to: CGPoint(x:120,y:287), controlPoint: CGPoint(x:102, y: 288))
let foot = CAShapeLayer()
foot.path = path.cgPath
view.layer.addSublayer(foot)
foot.fillColor = CGColor (srgbRed:250/255, green: 226/255, blue: 99/255, alpha: 255)
foot.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
foot.lineWidth = 2
// brown
path = UIBezierPath()
path.move(to: CGPoint(x:216,y:239))
path.addLine(to: CGPoint(x: 230, y: 227))
path.addLine(to: CGPoint(x: 229, y: 232))
path.addLine(to: CGPoint(x: 234, y: 229))
path.addLine(to: CGPoint(x: 236, y: 228))
path.addLine(to: CGPoint(x: 231, y: 236))
path.addLine(to: CGPoint(x: 241, y: 233))
path.addLine(to: CGPoint(x: 236, y: 239))
path.addLine(to: CGPoint(x: 215, y: 254))
path.move(to: CGPoint(x:217,y:240))
path.addLine(to: CGPoint(x: 190, y: 238))
path.addLine(to: CGPoint(x: 213.5, y: 223))
path.move(to: CGPoint(x:209,y:208))
path.addLine(to: CGPoint(x: 191, y: 206))
path.addLine(to: CGPoint(x: 205, y: 196))
let brown = CAShapeLayer()
brown.path = path.cgPath
view.layer.addSublayer(brown)
brown.fillColor = CGColor (srgbRed:164/255, green: 87/255, blue: 31/255, alpha: 255)
//        brown.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 0).cgColor
//        brown.lineWidth = 0
//hand
path = UIBezierPath()
path.move(to: CGPoint(x:180,y:217))
path.addQuadCurve(to: CGPoint(x:169,y:248), controlPoint: CGPoint(x:178, y: 234))
path.addQuadCurve(to: CGPoint(x:166,y:256), controlPoint: CGPoint(x:169, y: 250))
path.addQuadCurve(to: CGPoint(x:162,y:253), controlPoint: CGPoint(x:163, y: 256))
path.addQuadCurve(to: CGPoint(x:160,y:257), controlPoint: CGPoint(x:162, y: 255))
path.addQuadCurve(to: CGPoint(x:157,y:252), controlPoint: CGPoint(x:158, y: 255))
path.addQuadCurve(to: CGPoint(x:154,y:256), controlPoint: CGPoint(x:155, y: 256))
path.addQuadCurve(to: CGPoint(x:153,y:249), controlPoint: CGPoint(x:152, y: 256))
path.addQuadCurve(to: CGPoint(x:148,y:252), controlPoint: CGPoint(x:150, y: 253))
path.addQuadCurve(to: CGPoint(x:150,y:245), controlPoint: CGPoint(x:149, y: 248))
path.addQuadCurve(to: CGPoint(x:156,y:201), controlPoint: CGPoint(x:149, y: 223))
let hand = CAShapeLayer()
hand.path = path.cgPath
view.layer.addSublayer(hand)
hand.fillColor = CGColor (srgbRed:253/255, green: 219/255, blue: 71/255, alpha: 255)
hand.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
hand.lineWidth = 2
//leftHand
path = UIBezierPath()
path.move(to: CGPoint(x:115,y:203))
path.addQuadCurve(to: CGPoint(x:114,y:240), controlPoint: CGPoint(x:119, y: 224))
path.addQuadCurve(to: CGPoint(x:116,y:248), controlPoint: CGPoint(x:115, y: 242))
path.addQuadCurve(to: CGPoint(x:111,y:245), controlPoint: CGPoint(x:115, y: 253))
path.addQuadCurve(to: CGPoint(x:109,y:253), controlPoint: CGPoint(x:113, y: 252))
path.addQuadCurve(to: CGPoint(x:107,y:246), controlPoint: CGPoint(x:105, y: 255))
path.addQuadCurve(to: CGPoint(x:101,y:253), controlPoint: CGPoint(x:105, y: 253))
path.addQuadCurve(to: CGPoint(x:101,y:246), controlPoint: CGPoint(x:101, y: 250))
path.addQuadCurve(to: CGPoint(x:95,y:252), controlPoint: CGPoint(x:97, y: 252))
path.addQuadCurve(to: CGPoint(x:94,y:246), controlPoint: CGPoint(x:93, y: 248))
path.addQuadCurve(to: CGPoint(x:94,y:240), controlPoint: CGPoint(x:94, y: 238))
path.addQuadCurve(to: CGPoint(x:86,y:215), controlPoint: CGPoint(x:88, y: 230))
let leftHand = CAShapeLayer()
leftHand.path = path.cgPath
view.layer.addSublayer(leftHand)
leftHand.fillColor = CGColor (srgbRed:253/255, green: 219/255, blue: 71/255, alpha: 255)
leftHand.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
leftHand.lineWidth = 2
//ray
path = UIBezierPath()
path.move(to: CGPoint(x:107,y:179))
path.addQuadCurve(to: CGPoint(x:144,y:178), controlPoint: CGPoint(x:125, y: 182))
path.addQuadCurve(to: CGPoint(x:128,y:202), controlPoint: CGPoint(x:141, y: 197))
path.addQuadCurve(to: CGPoint(x:108,y:180), controlPoint: CGPoint(x:118, y: 191))
let ray = CAShapeLayer()
ray.path = path.cgPath
view.layer.addSublayer(ray)
ray.fillColor = CGColor (srgbRed:241/255, green: 193/255, blue: 64/255, alpha: 255)
ray.strokeColor = UIColor(red: 241/255, green: 193/255, blue: 64/255, alpha: 255).cgColor
ray.lineWidth = 2
//red
path = UIBezierPath()
path.move(to: CGPoint(x:71,y:136))
path.addQuadCurve(to: CGPoint(x:73,y:159), controlPoint: CGPoint(x:82, y: 147))
path.addQuadCurve(to: CGPoint(x:71,y:136), controlPoint: CGPoint(x:67, y: 147))
path.move(to: CGPoint(x:71,y:136))
let red = CAShapeLayer()
red.path = path.cgPath
view.layer.addSublayer(red)
red.fillColor = CGColor (srgbRed:252/255, green: 96/255, blue: 78/255, alpha: 255)
red.strokeColor = UIColor(red: 252/255, green: 96/255, blue: 78/255, alpha: 255).cgColor
red.lineWidth = 2
//resCirco
path = UIBezierPath()
path = UIBezierPath(ovalIn: CGRect(x: 155, y: 143, width: 25, height: 25))
let resCirco = CAShapeLayer()
resCirco.path = path.cgPath
view.layer.addSublayer(resCirco)
resCirco.fillColor = CGColor (srgbRed:252/255, green: 96/255, blue: 78/255, alpha: 255)
resCirco.strokeColor = UIColor(red: 252/255, green: 96/255, blue: 78/255, alpha: 255).cgColor

//black
path = UIBezierPath()
path.move(to: CGPoint(x:44,y:90))
path.addQuadCurve(to: CGPoint(x:3,y:70), controlPoint: CGPoint(x:17, y: 83))
path.addQuadCurve(to: CGPoint(x:32,y:67), controlPoint: CGPoint(x:16, y: 66))
path.addQuadCurve(to: CGPoint(x:44,y:90), controlPoint: CGPoint(x:33, y: 80))
path.move(to: CGPoint(x:220,y:20))
path.addQuadCurve(to: CGPoint(x:246,y:3), controlPoint: CGPoint(x:228, y: 12))
path.addQuadCurve(to: CGPoint(x:220,y:57), controlPoint: CGPoint(x:241, y: 25))
path.addQuadCurve(to: CGPoint(x:220,y:20), controlPoint: CGPoint(x:228, y: 33))
let black = CAShapeLayer()
black.path = path.cgPath
view.layer.addSublayer(black)
black.fillColor = CGColor (srgbRed:41/255, green: 27/255, blue: 26/255, alpha: 255)
black.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
//blackLeftEye
path = UIBezierPath()
path = UIBezierPath(ovalIn: CGRect(x: 80, y: 110, width: 20, height: 25))
let blackLeftEye = CAShapeLayer()
blackLeftEye.path = path.cgPath
view.layer.addSublayer(blackLeftEye)
blackLeftEye.fillColor = CGColor (srgbRed:50/255, green: 38/255, blue: 28/255, alpha: 255)
//blackRightEye
path = UIBezierPath()
path = UIBezierPath(ovalIn: CGRect(x: 140, y: 106, width: 28, height: 28))
let blackRightEye = CAShapeLayer()
blackRightEye.path = path.cgPath
view.layer.addSublayer(blackRightEye)
blackRightEye.fillColor = CGColor (srgbRed:50/255, green: 38/255, blue: 28/255, alpha: 255)
// whiteLeftEye
path = UIBezierPath()
path = UIBezierPath(ovalIn: CGRect(x: 88, y: 114, width: 8, height: 11.5))
let whiteLeftEye = CAShapeLayer()
whiteLeftEye.path = path.cgPath
view.layer.addSublayer(whiteLeftEye)
whiteLeftEye.fillColor = CGColor (srgbRed:253/255, green: 253/255, blue: 253/255, alpha: 255)
// whiteRightEye
path = UIBezierPath()
path = UIBezierPath(ovalIn: CGRect(x: 145, y: 111, width: 12, height: 12))
let whiteRightEye = CAShapeLayer()
whiteRightEye.path = path.cgPath
view.layer.addSublayer(whiteRightEye)
whiteRightEye.fillColor = CGColor (srgbRed:253/255, green: 253/255, blue: 253/255, alpha: 255)
//nose
path = UIBezierPath()
path.move(to: CGPoint(x:105,y:140))
path.addQuadCurve(to: CGPoint(x:117,y:140), controlPoint: CGPoint(x:108, y: 141))
path.addQuadCurve(to: CGPoint(x:111,y:145), controlPoint: CGPoint(x:112, y: 146))
let nose = CAShapeLayer()
nose.path = path.cgPath
view.layer.addSublayer(nose)
nose.fillColor = CGColor (srgbRed:41/255, green: 27/255, blue: 26/255, alpha: 255)
//mouth
path = UIBezierPath()
path.move(to: CGPoint(x:97,y:154))
path.addQuadCurve(to: CGPoint(x:107,y:160), controlPoint: CGPoint(x:98, y: 160))
path.move(to: CGPoint(x:104,y:160))
path.addQuadCurve(to: CGPoint(x:114,y:154), controlPoint: CGPoint(x:115, y: 160))
path.move(to: CGPoint(x:114,y:154))
path.addQuadCurve(to: CGPoint(x:126,y:160), controlPoint: CGPoint(x:115, y: 160))
path.move(to: CGPoint(x:120,y:160))
path.addQuadCurve(to: CGPoint(x:134,y:154), controlPoint: CGPoint(x:132, y: 160))
let mouth = CAShapeLayer()
mouth.path = path.cgPath
view.layer.addSublayer(mouth)
mouth.fillColor = CGColor (srgbRed:41/255, green: 27/255, blue: 26/255, alpha: 255)
mouth.strokeColor = UIColor(red: 41/255, green: 27/255, blue: 26/255, alpha: 255).cgColor
mouth.lineWidth = 1

return view
}
func updateUIView(_ uiView: UIView, context: Context) {
}
}
struct ContentView: View {
var body: some View {
DrawView()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

可以好好睡了～

參考文章：

#52 運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物

將 view 變成任意形狀的三種方法

使用 SwiftUI 預覽 UIBezierPath 的繪圖結果

運用 UIBezierPath 繪製各種形狀