#26 用 UIBezierPath 曲線畫出簡約風插畫卡片

掌握貝茲曲線，你可以是工程師，也可以是設計師

不囉唆直接上圖：

用程式也可以寫出漂亮的圖

如果要查詢圖片的座標，建議使用下面網站：

https://yangcha.github.io/iview/iview.html

繪製步驟：

先建立 Swift UI 檔案，並將內容替換成下列：

import SwiftUIstruct DrawView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
    //之後要在這個地方輸入繪畫 UIBezierPath 內容
        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()
    }
}

舉一段過程為例：

其中：

先用 bgc 變數儲存 UI 貝茲曲線，

bgc.move(to:CGPoint(x:167, y:352))

此為將繪畫點「轉移」至指定的位置

bgc.addLine(to:CGPoint(x:167, y:325))

接下來添加一條線，並連線至指定位置，若要封閉目前的圖形，則需要添加以下：

bgc.close()

此外，若要將形狀顯示在畫面上，需要先將路徑轉成形狀：

let layer = CAShapeLayer()
layer.path=bgc.cgPath
layer.fillColor=CGColor(red: 255/255, green: 237/255, blue: 197/255, alpha: 1)
layer.lineWidth=5

先用 layer 儲存 CAShapelayer，並將 bgc 的一切轉成 ShapeLayer

最後將整體形狀加入 View：

view.layer.addSublayer(layer)

就完成啦 ～～

這個部分較為複雜，建議多練習嘍 ～ 熟能生巧！

附上 Github 專案：

GitHub - yunminghsu/bezierPath