課堂筆記 — swiftUI隨畫隨看（上）

//筆記主旨：用SwiftUI畫畫

//筆記大綱：
1.先熟悉畫上筆劃並顯示在右方預覽的程式
2.熟悉既定的圖案畫法ex.直線、圓形、長方形、任意線條
3.熟悉一些能讓步驟變簡單的功能ex.鏡射、位移、縮放

//前置作業：
查詢圖片座標顏色的網站 iview：
https://yangcha.github.io/iview/iview.html

//Peter大神筆記參考

使用 SwiftUI 預覽 UIBezierPath 的繪圖結果

運用 UIBezierPath 繪製各種形狀

將 view 變成任意形狀的三種方法

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.cgPath
view.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 = 10
view.layer.addSublayer(triangleLayer)

課堂筆記 — swiftUI隨畫隨看（下）