#15 運用 UIBezierPath 繪製可愛圖案

最近最熱門的新聞應該就是15.6億的威力彩開獎, 每次看到這種新聞, 心中都會浮現一個畫面...

看來我還是別做白日夢, 把時間拿來練習寫彼得潘的作業比較實在.

這次的作業是要透過UIBezierPath來做圖, 圖片中的畫面太美我畫不出來, 所以我決定用洋蔥的夥伴阿文版本的"這些機會不是屬於我的"來當作題目.

利用UIBezierPath做圖

這邊先稍微利用一個簡單的教學來做個紀錄.

Step1: 利用UIBezierPath設定圖案的路徑

• 先利用move移動到路徑的第一個點
• 接著可以透過addLine(走直線)或是addQuadCurve(走曲線)從一個點移動到另一個點.

Apple Developer Documentation

Step2: 利用CAShapeLayer, 將他變成UIBezierPath設定的圖案

Step3: 使用CAShapeLayer的fillColor讓圖案填入顏色, 也可透過strokeColor來設定圖案外框顏色.

Step4: 利用addSublayer把圖案加到view

import SwiftUI
struct DrawView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        
        let trianglePath = UIBezierPath()
        trianglePath.move(to: CGPoint(x: 0, y: 0))
        trianglePath.addLine(to: CGPoint(x: 100, y: 0))
        trianglePath.addLine(to: CGPoint(x: 100, y: 100))
        trianglePath.close()
        
        let triangleLayer = CAShapeLayer()
        triangleLayer.path = trianglePath.cgPath
        
        let triangleColor = UIColor(red: 204/255, green: 204/255, blue: 255/255, alpha: 1)
        triangleLayer.fillColor = triangleColor.cgColor
        
        triangleLayer.strokeColor = UIColor(red: 100/255, green: 100/255, blue: 100/255, alpha: 1).cgColor
        triangleLayer.lineWidth = 5
        
        view.layer.addSublayer(triangleLayer)
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
    
}
struct ContentView: View {
    var body: some View {
        DrawView()
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

範例程式執行完的圖案如下:

接著我們來看看最後的阿文成果如何吧!

GitHub:

kuojed/DemoDraw

參考資料:

使用 SwiftUI 預覽 UIBezierPath 的繪圖結果

運用 UIBezierPath 繪製各種形狀

#4 運用 UIBezierPath 繪製可愛圖案