#15 運用 UIBezierPath 繪製可愛圖案
Published in
5 min readAug 2, 2020
最近最熱門的新聞應該就是15.6億的威力彩開獎, 每次看到這種新聞, 心中都會浮現一個畫面...
看來我還是別做白日夢, 把時間拿來練習寫彼得潘的作業比較實在.
這次的作業是要透過UIBezierPath來做圖, 圖片中的畫面太美我畫不出來, 所以我決定用洋蔥的夥伴阿文版本的"這些機會不是屬於我的"來當作題目.
利用UIBezierPath做圖
這邊先稍微利用一個簡單的教學來做個紀錄.
Step1: 利用UIBezierPath設定圖案的路徑
- 先利用move移動到路徑的第一個點
- 接著可以透過addLine(走直線)或是addQuadCurve(走曲線)從一個點移動到另一個點.
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
Contribute to kuojed/DemoDraw development by creating an account on GitHub.
github.com
參考資料: