作業5#52 運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物
Published in
20 min readDec 10, 2021
好想兔大頭
一條線一條線的畫，程式碼落落長
//
// ContentView.swift
// uibezierpath
//
// Created by Elaine Lai on 2021/12/8.
//import SwiftUI
struct DrawView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView()
//左耳
var path = UIBezierPath()
path.move(to: CGPoint(x: 28, y: 200))
path.addQuadCurve(to: CGPoint(x: 119, y: 282), controlPoint:CGPoint(x: 3, y: 315))
let leftEarLayer = CAShapeLayer()
leftEarLayer.path = path.cgPath
view.layer.addSublayer(leftEarLayer)
leftEarLayer.fillColor = CGColor(red: 204 / 255, green: 204 / 255, blue: 204 / 255, alpha: 1)
leftEarLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
leftEarLayer.lineWidth = 5
//左耳內
path = UIBezierPath()
path.move(to: CGPoint(x: 45, y: 242))
path.addQuadCurve(to: CGPoint(x: 72, y: 266), controlPoint: CGPoint(x: 48, y: 267))
let leftEarInLayer = CAShapeLayer()
leftEarInLayer.path = path.cgPath
view.layer.addSublayer(leftEarInLayer)
leftEarInLayer.fillColor = CGColor(red: 255 / 255, green: 204 / 255, blue: 204 / 255, alpha: 1)
leftEarInLayer.strokeColor = CGColor(red: 204 / 255, green: 153 / 255, blue: 153 / 255, alpha: 0.5)
leftEarInLayer.lineWidth = 2
//右耳
path = UIBezierPath()
path.move(to: CGPoint(x: 375, y: 200))
path.addQuadCurve(to: CGPoint(x: 283, y: 282), controlPoint: CGPoint(x: 400, y: 315))
let rightEarLayer = CAShapeLayer()
rightEarLayer.path = path.cgPath
view.layer.addSublayer(rightEarLayer)
rightEarLayer.fillColor = CGColor(red: 204 / 255, green: 204 / 255, blue: 204 / 255, alpha: 1)
rightEarLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
rightEarLayer.lineWidth = 5
//右耳內
path = UIBezierPath()
path.move(to: CGPoint(x: 359, y: 238))
path.addQuadCurve(to: CGPoint(x: 332, y: 266), controlPoint: CGPoint(x: 352, y: 267))
let rightEarInLayer = CAShapeLayer()
rightEarInLayer.path = path.cgPath
view.layer.addSublayer(rightEarInLayer)
rightEarInLayer.fillColor = CGColor(red: 255 / 255, green: 204 / 255, blue: 204 / 255, alpha: 1)
rightEarInLayer.strokeColor = CGColor(red: 204 / 255, green: 153 / 255, blue: 153 / 255, alpha: 1)
rightEarInLayer.lineWidth = 2
//頭
path = UIBezierPath()
path.move(to: CGPoint(x: 101, y: 63))
path.addQuadCurve(to: CGPoint(x: 157, y: 43), controlPoint: CGPoint(x: 134, y: 30))
path.addQuadCurve(to: CGPoint(x: 246, y: 43), controlPoint: CGPoint(x: 203, y: 30))
path.addQuadCurve(to: CGPoint(x: 303, y: 63), controlPoint: CGPoint(x: 271, y: 30))
path.addQuadCurve(to: CGPoint(x: 374, y: 200), controlPoint: CGPoint(x: 388, y: 135))
path.addQuadCurve(to: CGPoint(x: 202, y: 289), controlPoint: CGPoint(x: 345, y: 300))
path.addQuadCurve(to: CGPoint(x: 28, y: 200), controlPoint: CGPoint(x: 53, y: 300))
path.addQuadCurve(to: CGPoint(x: 101, y: 63), controlPoint: CGPoint(x: 13, y: 135))
let headLayer = CAShapeLayer()
headLayer.path = path.cgPath
view.layer.addSublayer(headLayer)
headLayer.fillColor = CGColor(red: 204 / 255, green: 204 / 255, blue: 204 / 255, alpha: 1)
headLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
headLayer.lineWidth = 5
//左眼白
path = UIBezierPath()
path.move(to: CGPoint(x: 109, y: 99))
path.addQuadCurve(to: CGPoint(x: 147, y: 97), controlPoint: CGPoint(x: 130, y: 90))
path.addQuadCurve(to: CGPoint(x: 145, y: 157), controlPoint: CGPoint(x: 193, y: 123))
path.addQuadCurve(to: CGPoint(x: 82, y: 136), controlPoint: CGPoint(x: 98, y: 170))
path.addQuadCurve(to: CGPoint(x: 109, y: 99), controlPoint: CGPoint(x: 72, y: 116))
let leftEyeWhiteLayer = CAShapeLayer()
leftEyeWhiteLayer.path = path.cgPath
view.layer.addSublayer(leftEyeWhiteLayer)
leftEyeWhiteLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
leftEyeWhiteLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
leftEyeWhiteLayer.lineWidth = 3
//右眼白
path = UIBezierPath()
path.move(to: CGPoint(x: 296, y: 99))
path.addQuadCurve(to: CGPoint(x: 316, y: 149), controlPoint: CGPoint(x: 338, y: 120))
path.addQuadCurve(to: CGPoint(x: 261, y: 157), controlPoint: CGPoint(x: 300, y: 164))
path.addQuadCurve(to: CGPoint(x: 248, y: 103), controlPoint: CGPoint(x: 212, y: 135))
path.addQuadCurve(to: CGPoint(x: 296, y: 99), controlPoint: CGPoint(x: 266, y: 90))
let rightEyeWhiteLayer = CAShapeLayer()
rightEyeWhiteLayer.path = path.cgPath
view.layer.addSublayer(rightEyeWhiteLayer)
rightEyeWhiteLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rightEyeWhiteLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
rightEyeWhiteLayer.lineWidth = 3
//左眼黑
var rect = CGRect(x: 117, y: 117, width: 20, height: 20)
let leftEyeBlackView = UIView(frame: rect)
leftEyeBlackView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
leftEyeBlackView.layer.cornerRadius = 10
view.addSubview(leftEyeBlackView)
//右眼黑
rect = CGRect(x: 265, y: 117, width: 20, height: 20)
let rightEyeBlackView = UIView(frame: rect)
rightEyeBlackView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1)
rightEyeBlackView.layer.cornerRadius = 10
view.addSubview(rightEyeBlackView)
//左眉毛
path = UIBezierPath()
path.move(to: CGPoint(x: 162, y: 62))
path.addQuadCurve(to: CGPoint(x: 144, y: 75), controlPoint: CGPoint(x: 154, y: 72))
let leftBrowLayer = CAShapeLayer()
leftBrowLayer.path = path.cgPath
view.layer.addSublayer(leftBrowLayer)
leftBrowLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
leftBrowLayer.lineWidth = 3
//右眉毛
path = UIBezierPath()
path.move(to: CGPoint(x: 241, y: 62))
path.addQuadCurve(to: CGPoint(x: 259, y: 75), controlPoint: CGPoint(x: 248, y: 72))
let rightBrowLayer = CAShapeLayer()
rightBrowLayer.path = path.cgPath
view.layer.addSublayer(rightBrowLayer)
rightBrowLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
rightBrowLayer.lineWidth = 3
//橢圓
path = UIBezierPath(ovalIn: CGRect(x: 55, y: 160, width: 290, height: 130))
let ovalLayer = CAShapeLayer()
ovalLayer.path = path.cgPath
view.layer.addSublayer(ovalLayer)
ovalLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
//左線
path = UIBezierPath()
path.move(to: CGPoint(x: 165, y: 150))
path.addQuadCurve(to: CGPoint(x: 157, y: 178), controlPoint: CGPoint(x: 146, y: 164))
path.addQuadCurve(to: CGPoint(x: 201, y: 162), controlPoint: CGPoint(x: 186, y: 190))
let leftLineLayer = CAShapeLayer()
leftLineLayer.path = path.cgPath
view.layer.addSublayer(leftLineLayer)
leftLineLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
leftLineLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
leftLineLayer.lineWidth = 3
//右線
path = UIBezierPath()
path.move(to: CGPoint(x: 236, y: 150))
path.addQuadCurve(to: CGPoint(x: 244, y: 178), controlPoint: CGPoint(x: 259, y: 160))
path.addQuadCurve(to: CGPoint(x: 201, y: 162), controlPoint: CGPoint(x: 214, y: 190))
let rightLineLayer = CAShapeLayer()
rightLineLayer.path = path.cgPath
view.layer.addSublayer(rightLineLayer)
rightLineLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
rightLineLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
rightLineLayer.lineWidth = 3
//鼻色
path = UIBezierPath()
path.move(to: CGPoint(x: 162, y: 153))
path.addQuadCurve(to: CGPoint(x: 238, y: 153), controlPoint: CGPoint(x: 202, y: 130))
path.addQuadCurve(to: CGPoint(x: 162, y: 153), controlPoint: CGPoint(x: 201, y: 168))
let norseColorLayer = CAShapeLayer()
norseColorLayer.path = path.cgPath
view.layer.addSublayer(norseColorLayer)
norseColorLayer.fillColor = CGColor(red: 1, green: 1, blue: 1, alpha: 1)
//鼻子
path = UIBezierPath()
path.move(to: CGPoint(x: 190, y: 151))
path.addQuadCurve(to: CGPoint(x: 212, y: 151), controlPoint: CGPoint(x: 202, y: 145))
path.addQuadCurve(to: CGPoint(x: 190, y: 151), controlPoint: CGPoint(x: 202, y: 158))
let norseLayer = CAShapeLayer()
norseLayer.path = path.cgPath
view.layer.addSublayer(norseLayer)
norseLayer.fillColor = CGColor(red: 204 / 255, green: 153 / 255, blue: 153 / 255, alpha: 1)
norseLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
norseLayer.lineWidth = 3
//鼻線
path = UIBezierPath()
path.move(to: CGPoint(x: 180, y: 146))
path.addQuadCurve(to: CGPoint(x: 223, y: 146), controlPoint: CGPoint(x: 203, y: 140))
let noseLineLayer = CAShapeLayer()
noseLineLayer.path = path.cgPath
view.layer.addSublayer(noseLineLayer)
noseLineLayer.fillColor = UIColor.clear.cgColor
noseLineLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
noseLineLayer.lineWidth = 2
//舌頭
path = UIBezierPath()
path.move(to: CGPoint(x: 187, y: 180))
path.addQuadCurve(to: CGPoint(x: 216, y: 180), controlPoint: CGPoint(x: 201, y: 210))
let tongueLayer = CAShapeLayer()
tongueLayer.path = path.cgPath
view.layer.addSublayer(tongueLayer)
tongueLayer.fillColor = UIColor.clear.cgColor
tongueLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
tongueLayer.lineWidth = 3
//舌線
path = UIBezierPath()
path.move(to: CGPoint(x: 201, y: 166))
path.addLine(to: CGPoint(x: 201, y: 186))
let tongueLineLayer = CAShapeLayer()
tongueLineLayer.path = path.cgPath
view.layer.addSublayer(tongueLineLayer)
tongueLineLayer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
tongueLineLayer.lineWidth = 3
//線1
path = UIBezierPath()
path.move(to: CGPoint(x: 190, y: 188))
path.addQuadCurve(to: CGPoint(x: 167, y: 196), controlPoint: CGPoint(x: 178, y: 190))
let line1Layer = CAShapeLayer()
line1Layer.path = path.cgPath
view.layer.addSublayer(line1Layer)
line1Layer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
line1Layer.lineWidth = 3
//線2
path = UIBezierPath()
path.move(to: CGPoint(x: 212, y: 188))
path.addQuadCurve(to: CGPoint(x: 234, y: 196), controlPoint: CGPoint(x: 226, y: 190))
let line2Layer = CAShapeLayer()
line2Layer.path = path.cgPath
view.layer.addSublayer(line2Layer)
line2Layer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
line2Layer.lineWidth = 3
//線3
path = UIBezierPath()
path.move(to: CGPoint(x: 193, y: 192))
path.addLine(to: CGPoint(x: 190, y: 203))
let line3Layer = CAShapeLayer()
line3Layer.path = path.cgPath
view.layer.addSublayer(line3Layer)
line3Layer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
line3Layer.lineWidth = 3
//線4
path = UIBezierPath()
path.move(to: CGPoint(x: 210, y: 192))
path.addLine(to: CGPoint(x: 212, y: 203))
let line4Layer = CAShapeLayer()
line4Layer.path = path.cgPath
view.layer.addSublayer(line4Layer)
line4Layer.strokeColor = CGColor(red: 0, green: 0, blue: 0, alpha: 1)
line4Layer.lineWidth = 3
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()
}
}
有點歪，不過我盡力了😂
