Photo by Kris Mikael Krister on Unsplash

Peter’s 100 task #2 deploy UIBezierPath draw pattern

利用 SwiftUI 快速預覽 UIBezierPath 的繪圖結果

這次作業除了讓自己更加熟悉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

--

--