iOS 中的二維平面變換一般使用CGAffineTransform，又稱為仿射變換。下面我們來介紹一下仿射變換的基本原理和基本用法。
1. 變換矩陣形式
仿射變換矩陣用于旋轉，縮放，平移或傾斜在圖形上下文中繪制的對象。該類型提供用于創(chuàng)建，連接和應用仿射變換的功能。
public struct CGAffineTransform {
public var a: CGFloat
public var b: CGFloat
public var c: CGFloat
public var d: CGFloat
public var tx: CGFloat
public var ty: CGFloat
public init()
public init(a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat, tx: CGFloat, ty: CGFloat)
}
仿射變換由3 x 3矩陣表示：
由于第三列始終為(0,0,1)，因此數(shù)據(jù)結構僅包含前兩列的值。
從概念上講，仿射變換將代表圖形中每個點（x，y）的行向量與此矩陣相乘，從而產生一個代表相應點（x'，y'）的向量：
給定3 x 3矩陣，可使用以下方程式將一個坐標系中的點（x，y）轉換為另一坐標系中的結果點（x'，y'）。
矩陣由此“鏈接”兩個坐標系-它指定一個坐標系中的點如何映射到另一個坐標系。
請注意，通常不需要直接創(chuàng)建仿射變換。例如，如果只想繪制縮放或旋轉的對象，則無需構造仿射變換。最直接的方法來操作你的圖紙-無論是通過移動，縮放或旋轉是調用函數(shù)，或分別。通常，只有在以后要重用時才應創(chuàng)建仿射變換。
CGAffineTransform的（a，b，c，d，tx，ty）默認參數(shù)是[ 1 0 0 1 0 0 ]，
這幾個的參數(shù)的作用：
a: 對應sx就是視圖寬放大或縮小的比例，初始值1，一倍大小。
b: 旋轉會用到，初始值0。
c: 旋轉會用到，初始值0。
d: 對應sy就是視圖高放大或縮小的比例，初始值1，一倍大小。
tx: 視圖x軸平移，初始值0，沒有平移。
ty: 視圖y軸平移，初始值0，沒有平移。
2. iOS中的平面變換CGAffineTransform
import UIKit
class AffineTransfromView: UIView {
var buttonTitleArr: NSMutableArray = NSMutableArray.init()
var imgView: UIImageView?
open var hostCon: UIViewController?
override init(frame: CGRect) {
super.init(frame: frame)
self.initViews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func initViews() {
let size = self.frame.size
self.buttonTitleArr.addObjects(from: ["平移", "旋轉", "縮放", "旋轉平移縮放", "驗證標準矩陣", "平移之后再轉換", "倒置", "矩陣相乘", "點矩陣轉換", "size矩陣轉換", "rect 矩陣轉換", "復位"])
for i in 0 ..< buttonTitleArr.count {
let title: String = buttonTitleArr.object(at: i) as! String
let button: UIButton = UIButton.init(type: UIButton.ButtonType.system)
button.setTitle(title, for: UIControl.State.normal)
button.frame = CGRect.init(x: (size.width / 3.0) * CGFloat(i%3), y: 50.0 * CGFloat(i/3), width: size.width / 3.0, height: 50.0)
button.addTarget(self, action: #selector(buttonClicked(button:)), for: UIControl.Event.touchUpInside)
button.layer.borderColor = UIColor.lightGray.cgColor
button.layer.borderWidth = 0.5
self.addSubview(button)
button.tag = i
}
let backView: UIView = UIView.init(frame: CGRect.init(x: 0.0, y: 0.0, width: 150.0, height: 150.0))
backView.backgroundColor = UIColor.cyan
backView.center = self.center;
self.addSubview(backView)
self.imgView = UIImageView.init(frame: backView.bounds)
self.imgView?.image = UIImage.init(named: "affinetransform.jpeg")
self.imgView?.center = self.center
self.addSubview(self.imgView!)
}
@objc func buttonClicked(button: UIButton) {
switch button.tag {
case 0:
self.translation()
case 1:
self.rotation()
case 2:
self.scale()
case 3:
self.allTransform()
case 4:
self.isIdentity()
case 5:
self.rotationAfterTranslation()
case 6:
self.invert()
case 7:
self.matrixMultiplication()
case 8:
self.pointTransform()
case 9:
self.sizeTransform()
case 10:
self.rectTransform()
case 11:
self.reset()
default:
break;
}
}
func showAlert(alertMsg: String) {
let alertController = UIAlertController(title: nil, message: alertMsg, preferredStyle: UIAlertController.Style.alert)
let cancelAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.cancel, handler: nil)
alertController.addAction(cancelAction)
self.hostCon?.present(alertController, animated: true, completion: nil)
}
func reset() {
UIView.animate(withDuration: 0.3) {
self.imgView?.transform = CGAffineTransform.identity
}
}
func animate(transform: CGAffineTransform) {
UIView.animate(withDuration: 0.3) {
self.imgView?.transform = transform
}
}
func translation() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(translationX: 50, y: 50)
self.animate(transform: transform)
}
func rotation() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 4.0))
self.animate(transform: transform)
}
func scale() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(scaleX: 0.5, y: 0.5)
self.animate(transform: transform)
}
func allTransform() {
self.reset()
let transform: CGAffineTransform = CGAffineTransform(a: 0.5, b: 0.3, c: 0.5, d: 1.5, tx: 25, ty: 25)
self.animate(transform: transform)
}
func isIdentity() {
let isIdentity = self.imgView?.transform.isIdentity
let alertMsg: String = isIdentity == true ? "是標準矩陣" : "不是標準矩陣"
self.showAlert(alertMsg: alertMsg)
}
func rotationAfterTranslation() {
self.reset()
var translation = CGAffineTransform(translationX: 40, y: 40)
translation = translation.rotated(by: CGFloat(Double.pi / 4.0))
self.animate(transform: translation)
}
func invert() {
self.reset()
let translation = CGAffineTransform(translationX: 50, y: 50)
let translationInverted = translation.inverted()
self.animate(transform: translationInverted)
}
func matrixMultiplication() {
self.reset()
let translation = CGAffineTransform(translationX: 40, y: 40)
let rotation = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 4.0))
let transform: CGAffineTransform = translation.concatenating(rotation)
self.animate(transform: transform)
}
func pointTransform() {
let point = CGPoint.init(x: 100, y: 100)
let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transformedPoint = point.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", point.debugDescription, transformedPoint.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
func sizeTransform() {
let size = CGSize.init(width: 200, height: 200)
//let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2.0))
let transformedSize = size.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", size.debugDescription, transformedSize.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
func rectTransform() {
let rect = CGRect.init(x: 0, y: 0, width: 300, height: 300)
let transform = CGAffineTransform(a: 1, b: 0, c: 0, d: 1, tx: 20, ty: 10)
let transformedRect = rect.applying(transform)
let alertMsg = NSString.init(format: "之前：%@\n之后：%@", rect.debugDescription, transformedRect.debugDescription)
self.showAlert(alertMsg: alertMsg as String)
}
}
3. 仿射變換及其變換矩陣的理解
原文地址
仿射變換：平移、旋轉、放縮、剪切、反射。仿射變換包括如下所有變換，以及這些變換任意次序次數(shù)的組合：
平移（translation）和旋轉（rotation）顧名思義，兩者的組合稱之為歐式變換（Euclidean transformation）或剛體變換（rigid transformation）；
放縮（scaling）可進一步分為uniform scaling和non-uniform scaling，前者每個坐標軸放縮系數(shù)相同（各向同性），后者不同；如果放縮系數(shù)為負，則會疊加上反射（reflection）——reflection可以看成是特殊的scaling；
剛體變換+uniform scaling 稱之為，相似變換（similarity transformation），即平移+旋轉+各向同性的放縮；
剪切變換（shear mapping）將所有點沿某一指定方向成比例地平移，語言描述不如上面圖示直觀。
各種變換間的關系如下面的venn圖所示：
通過變換矩陣可以更清晰地看出這些變換間的關系和區(qū)別。
3.1 變換矩陣形式
沒有平移或者平移量為0的所有仿射變換可以用如下變換矩陣描述：
不同變換對應的a,b,c,d約束不同，排除了平移變換的所有仿射變換為線性變換（linear transformation），其涵蓋的變換如上面的venn圖所示，其特點是原點位置不變，多次線性變換的結果仍是線性變換。
為了涵蓋平移，引入齊次坐標，在原有2維坐標的基礎上，增廣1個維度，如下所示：
所以，仿射變換的變換矩陣統(tǒng)一用
來描述，不同基礎變換的a,b,c,d,e,f約束不同，如下所示：
此外，旋轉和平移相乘得到剛體變換的變換矩陣，如下，有3個自由度（θ,tx,ty），這里旋轉方向為逆時針方向，因此與上圖中的正負號不同，
再乘上uniform scaling得到相似變換，有4個自由度（s,θ,tx,ty），如下：
自然，仿射變換的變換矩陣有6個自由度（a,b,c,d,e,f）。
3.2 變換矩陣的理解與記憶
坐標系由坐標原點和基向量決定，坐標原點和基向量確定了，坐標系也就確定了。
對于坐標系中的位置(x,y)，其相對坐標原點在[1,0]方向上的投影為x，在[0,1]方向上的投影為y —— 這里投影的意思是過(x,y)做坐標軸的平行線與坐標軸的交點到原點的距離，即(x,y)實際為：
當坐標系變化，坐標系中的點也跟著變化，但點相對新坐標系（x′?y′坐標系）的位置不變仍為(x,y)，以旋轉變換為例，新坐標軸的基向量則變?yōu)閇cos(θ),sin(θ)]和[?sin(θ),cos(θ)]，所以點變化到新位置為：
新位置和新基向量是相對絕對坐標系(x?y坐標系）而言的。其他變換矩陣同理。
總結一下：
- 所有變換矩陣只需關注一點：坐標系的變化，即基向量和原點的變化；
- 坐標系變化到哪里，坐標系中的所有點也跟著做同樣的變化；
- 坐標系的變換分為 基向量的變化 以及 坐標原點的變化，在仿射變換矩陣
為新的基向量，
為新的坐標原點，先變化基向量，再變化坐標原點；
3.3 變換矩陣的參數(shù)估計
如果給定兩個對應點集，如何估計指定變換矩陣的參數(shù)？
一對對應點可以列兩個線性方程，多個對應點可以列出線性方程組，為了求解參數(shù)，需要的對應點數(shù)至少為自由度的一半，多個點時構成超定方程組，可以基于最小二乘或者SVD分解等方法進行求解，這里不再展開。
