CGAffineTransform 縮放 位移 旋轉和鏡像翻轉

目的：練習圖片的縮放、位移、旋轉和鏡像翻轉效果。

Photo by Steven Wright on Unsplash

在 Playground 利用 CGAffineTransform 嘗試各種圖片效果吧！

運用：

1. 事前準備

首先先在左側 Resources 內新增一張要使用圖片。

程式部分記得先 import UIKit，接下來才能使用裡面的 function 。

import UIKit

建立一個 view 與 一個的代表一度的常數以待接下來的運用。

let view = UIView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))
let oneDegrade = CGFloat.pi / 180

將圖片當作 view 的 subview

let imageView = UIImageView(image: UIImage(named: “cute”))
view.addSubview(imageView)

2. Scale 縮放

方法 1 (放大1.5)

imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
view

方法 2 (原圖放大2倍)

imageView.transform = CGAffineTransform.identity.scaledBy(x: 2, y: 2)
view

3. 鏡像翻轉

新增一個鏡像圖案以便跟原圖比較

let mirrorImageView = UIImageView(image: UIImage(named: “cute”))

鏡像翻轉(左右 scaleX 設為 -1, 上下 scaleY 設為 -1)

鏡像 X 位置設為原圖的 maxX + 10

mirrorImageView.frame.origin.x = imageView.frame.maxX + 10
mirrorImageView.transform = CGAffineTransform(scaleX: -1, y: -1)
view.addSubview(mirrorImageView)

4. 位移

位移至(100 , 300)

imageView.transform = CGAffineTransform(translationX: 100, y: 300)
view

5. 旋轉

方法 1 (旋轉 45 度)

imageView.transform = CGAffineTransform(rotationAngle: oneDegrade * 45)
view

方法 2 (沒套用任何效果的 CGAffineTransform 旋轉 135 度)

imageView.transform = CGAffineTransform.identity.rotated(by: oneDegrade * 135)
view

6. 結合縮放、位移和旋轉

順序重點：先 translatedBy 再 scaledBy 通常會是我們想要的效果

imageView.transform = CGAffineTransform.identity.translatedBy(x: 100, y: 400).scaledBy(x: 0.5, y: 0.5).rotated(by: oneDegrade * 180)
view

7. 顯示沒有任何效果的 CGAffineTransform

imageView.transform = CGAffineTransform.identity
view

參考資料：

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