Peter’s 100 task #2 deploy UIBezierPath draw pattern
利用 SwiftUI 快速預覽 UIBezierPath 的繪圖結果
Published in
Nov 20, 2020
這次作業除了讓自己更加熟悉UIBezierPath外,還有助於磨練耐心…雖然畫得不是特別精緻,但我真的是在過程中不斷有想放棄的念頭哈哈,後來看到一個同學的文章,裡面提到繪圖軟體也是透過背後的程式完成繪圖,就像那位同學說的立馬醍醐灌頂,最後也漸漸掌握到訣竅,終於完成!
主題選擇
曾經在小琉球浮潛時看過綠蠵龜相當悠遊自在的游上海面換氣,也多虧了台灣有素養的水上活動業者,非常保護也尊重海裡的生物,我們才能有幸看到海中豐富的樣貌,因此便也想對保育海龜盡一份力,就拿此圖來練習啦。
原圖
程式架構
烏龜底圖是用SVG轉換而成(偷懶呵呵),字體則是親手刻的,用func把每個繪製過程包在裡面。
使用到UIBezierPath(以下point參數型別皆須為CGPoint):
- .move 移動繪圖起始位置
- .addLine 與起始點直線相連(而此point則為下一個起始點)
- .addQuadCurve & .addCurve 與起始點或上一點以曲線相連,利用controlPoint控制曲度
- .close 將起始點與終點以直線相連
使用到CAShapeLayer
- .path 存取繪圖路徑
- .fillColor 設定path內的顏色(圖形顏色)
- .strokeColor 設定path顏色
- .lineWidth 設定path寬度
- .fillRule 設定填滿規則,這邊使用CAShpaeLayerFillRule.evenOdd,簡單說明就是有個人拿著雷射筆隨意站在圖上任何一點,並發射雷射光,若醫道雷射光穿過繪製的path次數為奇數則那一點為內部,反之為外部,內部則填滿,外部則不填滿(詳細說明參考以下連結)。
- .setAffineTransform 利用CGAffineTransform控制縮放、位移、旋轉(詳細說明可參考peter的說明,非常清楚)
問題
對於CGAffineTransform不太理解,縮放、旋轉後的位置是如何決定,常常跑到不知道哪去?
成品圖
參考文章
-Github