#01 Swift 繪圖＿看到球球的木兔貓頭鷹
Published in
Oct 20, 2021
(1) 成果展示
- 平常的木兔貓頭鷹 & 振奮狀態的木兔貓頭鷹
2. 色違木兔貓頭鷹 (1)雪地貓頭鷹版 (2) 紅眼紅喙貓頭鷹版
(2) GitHub 連結
(3) 作品說明
作為一個合格的排球迷以及動畫宅，排球少年這部動畫絕對是必看的。木兔光太郎是排球少年中的一個個性鮮明的角色，雖然他並不是主角群，但因為自己的號碼以及專位跟他一模一樣，我特別的喜歡這個角色。木兔所在的學校稱為梟谷，他也因此有了這個動物形象。在本次作業中，利用SwiftUI繪製出這個貓頭鷹形象，也加了幾個有趣的小變化。
參考圖片如下：
(4)作業要求
- 利用 SwiftUI 的 Path 繪製可愛圖案， logo 或 emoji。
如成果展示中所展示
- 遵從 protocol Shape，定義可重覆使用修改的形狀。
本次作業中一共定義了7個Shape，包含OwlBody, TummyFur, FaceFur, Eyebrow, Beak, Feather, Star。這些形狀的定義皆位於OwlBodyParts.swift檔案中。以Eyebrow和Beak為例，程式碼如下圖所示：
其中Star為透過rect參數動態產生的形狀，程式碼如下：
- 使用到 Extract Subview，至少定義 2 個遵從 protocol View 的型別。
本次作業所定義的View有OwlOutlineView, OwlView, EyebrowView, NormalEyeView, StarryEyeView等五個View。以EyebrowView和StarryEyeView為例，程式碼如下：
- 加上背景圖片和文字。
文字含義為木兔光太郎的口頭禪。使用的背景圖片源自於下方連結：
https://wallpaperaccess.com/haikyuu-laptop
參考背景圖片如下：
實作程式碼如下圖所示：
- 用程式畫出兩種不同的圖片，比方紅色 & 綠色衣服的小新。
實作結果如成果展示。
(5) 加分功能
- 利用 LibraryContentProvider 將自訂的 view 或 shape 加到 View Library，在文章裡附上 library 畫面截圖。
將自訂shape及view加入Library，實作程式碼如下圖：
實作結果如下：
- 使用StrokeStyle
利用StrokeStyle改變貓頭鷹外框線格式，透過OwlView的outlineStyle參數可以改變格式。
實作結果如下：
