課堂筆記 — swiftUI隨畫隨看(上)
Published in
6 min readAug 19, 2020
//筆記主旨:用SwiftUI畫畫
//筆記大綱:
1.先熟悉畫上筆劃並顯示在右方預覽的程式
2.熟悉既定的圖案畫法ex.直線、圓形、長方形、任意線條
3.熟悉一些能讓步驟變簡單的功能ex.鏡射、位移、縮放
//前置作業:
查詢圖片座標顏色的網站 iview:
https://yangcha.github.io/iview/iview.html
//Peter大神筆記參考
Step 1.
先不管不顧地加入看不懂的程式吧!
在 let view = UIView()與 return view } 之間寫入程式
import SwiftUIstruct DrawView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView() 畫畫的地方在這裡喔 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()
}
}
Step 2.
先看範例解析 - 畫一個三角形
import SwiftUI
struct DrawView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let view = UIView()
let path = UIBezierPath()
path.move(to:CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 0))
path.addLine(to: CGPoint(x: 100, y: 100))
path.close()
let triangleLayer = CAShapeLayer()
triangleLayer.path = path.cgPath
triangleLayer.strokeColor = CGColor(srgbRed: 0, green: 0, blue: 0, alpha: 1)
triangleLayer.fillColor = UIColor.clear.cgColor
triangleLayer.lineWidth = 1
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()
}
}
步驟解析
let path = UIBezierPath()
var point = CGPoint(x: 0, y: 0)
point = CGPoint(x: 0, y: 0)
產生UIBezierPath,並定義第一點位置
上方可簡化成:
path.move(to:CGPoint(x: 0, y: 0))
點到點連成線
path.addLine(to: point)
point = CGPoint(x: 100, y: 0)
簡化成
path.addLine(to: CGPoint(x: 100, y: 0))
畫完收尾
path.addLine(to: CGPoint(x: 100, y: 100))
path.close()
可得到一個原點出發的虛擬三角形。嗯?
目前為止,你畫了一個三角形的路徑,虛無飄渺,無色無味
於是這時候,需要求助CAShapeLayer : 加入形狀Shape的圖層,並把路徑path放上去
注意. 還記得嗎,我們剛剛是用UI在畫路徑,但CAShapeLayer吃的是CGPath的型別!
let triangleLayer = CAShapeLayer()
triangleLayer.path = path.cgPathview.layer.addSublayer(triangleLayer)
1.把shape圖層命名為三角形triangleLayer
2.三角形塗層.的路徑=剛剛畫的路徑.並強制變成CGPath
3.顯示看看:這時候直接看到會是滿格黑色的三角形(如下圖)
不想要黑黑的三角形?那就要設定邊線寬度、顏色,以及填滿的顏色
//設定填滿的顏色
triangleLayer.fillcolor = UIcolor(displayP3Red: 1, green: 1, blue: 1, alpha:1).cgColor
//設定邊框的顏色與寬度
triangleLayer.strokeColor = CGColor(srgbRed: 0, green: 0, blue: 1, alpha: 1)
triangleLayer.lineWidth = 10view.layer.addSublayer(triangleLayer)