#9運用 UIBezierPath 繪製Dolphin Safe標誌 ＆ CGAffineTransform

昨天去逛的台灣博物館的『鯨驗值』展覽（2020/09/29 09:30 ~ 2021/03/28 17:00），看了很多鯨豚因為人類的關係被殺害，或不小心殺害（例如：死亡海豚有20%因為漁船混獲而死），但是還是有一些人默默的努力，讓鯨豚可以有多一點的生存空間。

Campaigns | Dolphin Safe Fishing

Dolphin Safe Tuna（原圖）

這個標誌代表有參與保護海豚的鮪魚罐頭公司，目前有800家公司、76個國家加入此計劃，因為海豚常常死於追捕鮪魚的漁網之中，參與此計畫的公司會避開造成海豚死亡的捕魚漁法。

奢侈品還是便宜貨？鮪魚豆知識！

接下來就是讓我卡關了兩個禮拜的作業👇🏽這篇文章和裡面的教學反覆看了好多次，但一次比一次看得清楚，最後終於弄懂了，可能我的神經突觸連好了

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

畫完之後增強找碴的能力

大致上的概念就是：（從畫畫開始）

1. 設一個常數（或變數）為你的畫筆路徑

let path = UIBezierPath()
path.move(to一開始的起點）
（直的筆）path.addLine(to: CGPoint(x: 178, y: 105))要去的地方
（曲線筆）path.addQuadCurve(to: CGPoint(下一個點), controlPoint: CGPoint(拉曲線的點))
（S形曲線筆）addCurve(to: CGPoint(下一個點), controlPoint1: CGPoint(第一個彎), controlPoint2: CGPoint(第二個彎))

如何找到你的controlPoint? 發揮想像力，然後在圖上找到大概的座標

2. 讓這個路徑變成圖層

let eyelayer = CAShapeLayer()    設定圖層常數
eyelayer.path = eyepath.cgPath   設定圖層常數是哪個筆畫的
eyelayer.lineWidth = 1           設定線的寬度
eyelayer.strokeColor = UIColor.black.cgColor  設定線的顏色
eyelayer.fillColor = UIColor.black.cgColor    設定填滿的顏色
view.layer.addSublayer(eyelayer)              讓圖層show出來

3. 將圖慢慢堆疊出來

程式碼：

lan-yin/Dolphin-Safe-UIBezierPath-

做完的圖還可以拿來玩看看旋轉跟變形

利用 CGAffineTransform 縮放，位移，旋轉和鏡像翻轉

利用 CGAffineTransform 控制元件縮放，位移，旋轉的三種方法

import UIKit
class transformViewController: UIViewController {
func createDolphinView(moveX: CGFloat, moveY: CGFloat, rotateDegree: CGFloat, scale: CGFloat) ->UIView {
//這裏複製貼上畫好的程式
.
.
.
//這裡設定位移、縮放、旋轉的參數
let oneDegree = CGFloat.pi / 180  //定義旋轉一度多少
view.transform = CGAffineTransform.identity.translatedBy(x: moveX, y: moveY).scaledBy(x: scale, y: scale).rotated(by: rotateDegree * oneDegree)
return view
}

接著在viewDidLoad的function裡再加上addSubview的功能

override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .yellow
let dolphinView1 = createDolphinView(moveX: 130, moveY: 50, rotateDegree: 45, scale: 0.5)
view.addSubview(dolphinView1)
let dolphinView2 = createDolphinView(moveX: 120, moveY: 100, rotateDegree: 80, scale: 0.8)
view.addSubview(dolphinView2)
let dolphinView3 = createDolphinView(moveX: 0, moveY: 500, rotateDegree: 100, scale: -1)
view.addSubview(dolphinView3)
}

跑起來