#4 運用 UIBezierPath 繪製圖案

題目：運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物

#52 運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物

成品：

一開始想要畫 switch，把圖片轉完 svg 後 ，發現竟然 >500個 path，處理到第5個時就決定棄圖

挑一隻史萊姆，想說顏色與線條單純一點，想不到也要 298個 path，還是棄圖

最後只好透過 iconfinder 找圖了

過程

1. 到 iconfinder 找想要處理圖檔

2. 拜託阿豆伯幫忙把 png 轉成 svg

https://www.adobe.com/tw/express/feature/image/convert/png-to-svg

3. 再透過 SVG Converter 處理 path 並轉成 UIBezierPath的內容

http://svg-converter.kyome.io

4. storyBoard 先放上銀河的底圖，再加一點毛玻璃，最後鋪上迷你的太陽系

5. 將每個 UIBezierPath 寫成 func，最後在 viewDidLoad 呼叫 func ，繪出太陽系

看久了好像有點尷尬
沒有背景圖搞不好會被誤會是射飛鏢的靶 😱

6. 趕緊加上一點動畫效果，讓星球有轉動的感覺

        UIView.animate(withDuration: 60) {
            self.bgUIView.transform = CGAffineTransform.init(rotationAngle: CGFloat.pi / 2)
        }

GitHub 連結

GitHub - goodvt9/UIBezierPath

參考

#52 運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物

利用 CGAffineTransform 控制元件縮放，位移，旋轉的三種方法