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

熟悉完畫畫的各種技巧後，就找一張自己喜歡的圖來看著畫吧！

題目：AMG logo

使用到的技巧：

畫圖：圓形/不完整圓形/直線/圓弧線/兩點控制的弧線

偷懶：相同圖形的鏡射/位移/圖片去背貼上

心得

1. 關於練習
   一個技巧的熟悉，真的需要大量的練習，重複的步驟不厭其煩的做。
   從一開始看著步驟照打，到不用看筆記，從想法理解打出想要的結果，到順手。這個過程是沒辦法偷懶的。
2. 關於準備動作
   就像做菜一樣，需要哪些材料，優先做什麼，到第二步、第三步。有計劃地做菜能縮短時間，更有效率地達成理想結果。
   以這次畫圖為例，先解析圖中所需要用到的技巧、相關資料，並且規劃步驟藍圖、優先順率，在開始之後比較不容易因為臨時要停下找資料，而打斷思路。
3. //註解的重要性
   由於圖層要一層一層疊上，程式會變得非常大串，善用註解，讓你再往回翻的時候可以輕易找到定位錨。

步驟解析

三圈圓
UIBezierPath 設定1.左上的xy起點 2.直徑

let path = UIBezierPath(ovalIn: CGRect(x: 14, y: 14, width: 377, height: 377))

4/5圓
iOS SDK 已定義，透過 CGFloat.pi可得180度
故1度是pi/180,
設定 1.中心點xy 2.半徑 3.起點角度 4.終點角度 5.順時鐘or逆時鐘

let aDegeer = CGFloat.pi/180
let path4 = UIBezierPath(arcCenter: CGPoint(x: 202, y: 202), radius: 132, startAngle: aDegeer*52, endAngle: aDegeer*128, clockwise: false)

圓弧線條(2種寫法)

//path5.addQuadCurve(to: CGPoint(x: 200, y: 76), controlPoint: CGPoint(x: 13, y: 140))
path5.addCurve(to: CGPoint(x: 200, y: 76), controlPoint1: CGPoint(x: 40, y: 236), controlPoint2: CGPoint(x: 68, y: 83))

橄欖枝-鏡射
這個功能試了很久一直試不出來，從一開始“複製”這個動作：
新定義rbranchLayer的path = 原路徑
＊設定框架frame, 沒有設定框架之前，所有程式都正確，但就是一直無法顯示
＊＊在調整鏡射位置時可先加底色，不怕被其他圖層遮蔽：
rbranchLayer.backgroundColor = UIColor.red.cgColor
最後用setAffineTransform做出鏡射的動作

let rbranchLayer = CAShapeLayer()
rbranchLayer.path = pathLbranch.cgPath
rbranchLayer.frame = CGRect(x: 104, y: 0, width: 300, height: 300)
rbranchLayer.fillColor = UIColor(displayP3Red: 1, green: 1, blue: 1, alpha: 1).cgColor
rbranchLayer.setAffineTransform(CGAffineTransform(scaleX: -1, y: 1))
view.layer.addSublayer(rbranchLayer)

A的複製旋轉位移
變形-先做位移，然後坐旋轉：
CGAffineTransform(translationX: 43, y: -26).rotated(by: .pi / 180 * 18))

let topa2Layer = CAShapeLayer()
topa2Layer.path = pathtopa.cgPath
topa2Layer.frame = CGRect(x: 0, y: 0, width: 250, height: 250)
topa2Layer.fillColor = UIColor(displayP3Red: 1, green: 1, blue: 1, alpha:1).cgColor
topa2Layer.setAffineTransform(CGAffineTransform(translationX: 43, y: -26).rotated(by: .pi / 180 * 18))
view.layer.addSublayer(topa2Layer)

最後，偷懶把樹&工具用圖片貼上哈哈哈哈哈

let treeimage = UIImage(named: "tree.png")
let treeimageview = UIImageView(image: treeimage)
let frame = CGRect(x: 77, y: 116, width: 122, height: 161)
treeimageview.frame = frame
view.addSubview(treeimageview)

附上落落長的程式碼

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