[Swift] 藤原千花はお洒落したい

張庭瑋

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

5 min readNov 27, 2020

上一篇在這裡

[Swift] 製作自己的Mentori

以SwiftUI搭配 UIBezierPath繪製圖形

medium.com

筆者在看かぐや様は告らせたい的時候，曾經在想一個問題：藤原千花如果頭上沒有蝴蝶結時，這個角色還有識別性嗎？剛好這次遇到 UIBezierPath繪製圖形的練習，於是來試試看從頭開始畫吧。

這次的目標除了畫千花外，還要讓她能染頭髮跟換瞳色，讓她也能追流行一下。

原圖

來源（不過這應該是動畫截圖啦）

跟畫鳥（Mentori）不同，撇除背景不談，畫這張人物圖有幾個重點

1.區塊的上下層排序

使用 UIBezierPath搭配 CAShaper繪圖時，由於一個區塊只能有一種顏色，因此勢必會有區塊的先後問題，而先畫的區塊被蓋住的部份作畫可以不用那麼精細，以這張圖來說，被頭髮蓋住的臉部其實可以畫個方塊臉節省時間，反正頭髮蓋上去也一樣。

以這張圖來說由下而上應該是衣服 => 臉部 => 頭髮 => 臉部器官及配件 => 光澤及陰影 => 剩餘線條

2.瀏海的處理

由於一個 UIBezierPath在繪製時粗細不可改變，所以這張圖會有一個問題，在拉頭髮範圍時瀏海會有一道黑線。

不過這其實就是多拉一條頭髮顏色的線來蓋掉黑線就可以了。

3.漸層的必要性

由於要跟 mentori的 App一樣，搭配 Slider可以改變顏色，如果沒有漸層，像是頭髮拉成黑色時線條就會看不到，所以應該以任何顏色配上淡色來做漸層，確保髮線的可視性。

而漸層區塊可以以 CAGradientLayer的 mask搭配 CAShaper，也就是先設想以 CAGradientLayer生成一個方形的漸層區塊，上面蓋上 CAShaper繪製的圖案，只有在 CAShaper內的區塊才看得到下層漸層的顏色，達到漸層的效果。

另外如果本來的 CAShaper有黑邊的，使用 CAGradientLayer後邊也會變成漸層的，我現在是在上面多蓋一層透明的 CAShaper來補回黑邊，不知道有沒有更好的做法。

let path = UIBezierPath()
    ...
    let hairLayer = CAShapeLayer()
    hairLayer.path = path.cgPath
    let hairGradientLayer = CAGradientLayer()
    hairGradientLayer.colors = [hairTopColor, mainColor]
    hairGradientLayer.borderColor = UIColor.black.cgColor
    hairGradientLayer.frame = CGRect(x: 0, y: 0, width: 414, height: 476)
    uiView.layer.addSublayer(hairGradientLayer)
    hairGradientLayer.mask = hairLayerlet hairOutlineLayer = CAShapeLayer()
    hairOutlineLayer.path = path.cgPath
    hairOutlineLayer.strokeColor = lineColor
    hairOutlineLayer.fillColor = UIColor.clear.cgColor
    hairOutlineLayer.lineWidth = 1
    uiView.layer.addSublayer(hairOutlineLayer)