法國國旗

SwiftUI 預覽 UIBezierPath，addSubview 和 UIBezierPath

最近主管覺得加班時數太少，導致加班的時間變長，寫作業的時間變短，程式真的要常看，看習慣後理解code的速度也會變快，好加在最近上班有機會接觸C#與Omron程式，C#與Swift滿類似的就是語法寫法不同，Omron則是與三菱PLC的不同在與不只是使用階梯語言，它的st指令也很完善。

Photo by Joshua Sortino on Unsplash

這一次主要熟悉UIBezierPath、addSublayer寫法，並使用SwiftUI 預覽即時的顯示程式的表現

import SwiftUI
struct DrawView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        
//藍色方塊
        var path = UIBezierPath()
        path.move(to: CGPoint(x: 4, y: 1))
        path.addLine(to: CGPoint(x: 4, y: 212))
        path.addLine(to: CGPoint(x: 106, y: 212))
        path.addLine(to: CGPoint(x: 106, y: 1))
        path.close()
        let CountryFaceBlue = CAShapeLayer()
        CountryFaceBlue.path = path.cgPath
        
        view.layer.addSublayer(CountryFaceBlue)
        CountryFaceBlue.fillColor = CGColor (srgbRed:0, green: 0, blue: 1, alpha: 255)
        CountryFaceBlue.strokeColor = UIColor.black.cgColor
        
//白色方塊
        path = UIBezierPath()
        path.move(to: CGPoint(x: 106, y: 1))
        path.addLine(to: CGPoint(x: 106, y: 212))
        path.addLine(to: CGPoint(x: 212, y: 212))
        path.addLine(to: CGPoint(x: 212, y: 1))
        path.close()
        let CountryFaceWhite = CAShapeLayer()
        CountryFaceWhite.path = path.cgPath
        view.layer.addSublayer(CountryFaceWhite)
        CountryFaceWhite.fillColor = CGColor (srgbRed: 255, green: 255, blue: 255, alpha: 255)
        CountryFaceWhite.strokeColor = UIColor.black.cgColor
//紅色方塊
        path = UIBezierPath()
        path.move(to: CGPoint(x: 212, y: 1))
        path.addLine(to: CGPoint(x: 212, y: 212))
        path.addLine(to: CGPoint(x: 320, y: 212))
        path.addLine(to: CGPoint(x: 320, y: 1))
        path.close()
        let CountryFaceRed = CAShapeLayer()
        CountryFaceRed.path = path.cgPath
        view.layer.addSublayer(CountryFaceRed)
        CountryFaceRed.fillColor = CGColor (srgbRed: 1, green: 0, blue: 0, alpha: 255)
        CountryFaceRed.strokeColor = UIColor.black.cgColor
        
        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()
    }
}

參考文章：

#43 從程式製作國旗圖案

使用 SwiftUI 預覽 UIBezierPath 的繪圖結果

#52 運用 UIBezierPath 繪製可愛圖案，比方雪人，米奇 & 可愛動物