運用 UIBezierPath 繪製神隱無臉男
Published in
Nov 18, 2020
為何挑選「無臉男」下手呢？原因無他，就是看中他的單純無瑕(是比較簡單好畫吧️～🤫🤫)。不囉嗦，趕緊從程式一步一腳印的將單純無瑕的無臉男畫出來吧！
作品簡介
利用 SwiftUI 快速預覽 UIBezierPath 的繪圖結果，拉出作品所需之㰐圓及曲線圖形，並運用 CGAffineTransform 的旋轉功能，繪製左右眼之對稱圖案。
改變圓形長寬比例創造不同表情的無臉男，如無辜臉、扁嘴臉和驚訝臉。
作品 DEMO
使用三個 Sublayer 裝載大臉、嘴巴及嘴下的紫色彩繪，以及二個 Subview 裝載左眼區圖形及右眼區圖形。
let view = UIView()view.layer.addSublayer(layerFace)
view.layer.addSublayer(layerMouth)
leftView.layer.addSublayer(layerLeftEyeBtm)view.addSubview(leftView)
view.addSubview(rightView)
運用 addQuadCurve 拉出眼睛上下方的彩繪條曲線。
let pathEyePaintTop = UIBezierPath()
pathEyePaintTop.move(to: CGPoint(x: 110, y: 130))
pathEyePaintTop.addQuadCurve(to: CGPoint(x: 150, y: 130), controlPoint: CGPoint(x: 145, y: -80))利用 CGAffineTransform 鏡像翻轉功能使右眼區圖形左右對稱於左眼區。
rightView.transform = CGAffineTransform(scaleX: -1, y: 1)重新指向 layerMouth 的 path 使其改變形狀創造出不同表情。
let pathWideMouth = UIBezierPath(ovalIn: CGRect(x: 100, y: 550, width: 220, height: 30))
layerMouth.path = pathWideMouth.cgPath作品 GitHub
