# 仿射變換 在第三章“圖層幾何學”中，我們使用了`UIView`的`transform`屬性旋轉了鐘的指針，但并沒有解釋背后運作的原理，實際上`UIView`的`transform`屬性是一個`CGAffineTransform`類型，用于在二維空間做旋轉，縮放和平移。`CGAffineTransform`是一個可以和二維空間向量（例如`CGPoint`）做乘法的3X2的矩陣（見圖5.1）。  圖5.1 用矩陣表示的`CGAffineTransform`和`CGPoint` 用`CGPoint`的每一列和`CGAffineTransform`矩陣的每一行對應元素相乘再求和，就形成了一個新的`CGPoint`類型的結果。要解釋一下圖中顯示的灰色元素，為了能讓矩陣做乘法，左邊矩陣的列數一定要和右邊矩陣的行數個數相同，所以要給矩陣填充一些標志值，使得既可以讓矩陣做乘法，又不改變運算結果，并且沒必要存儲這些添加的值，因為它們的值不會發生變化，但是要用來做運算。 因此，通常會用3×3（而不是2×3）的矩陣來做二維變換，你可能會見到3行2列格式的矩陣，這是所謂的以列為主的格式，圖5.1所示的是以行為主的格式，只要能保持一致，用哪種格式都無所謂。 當對圖層應用變換矩陣，圖層矩形內的每一個點都被相應地做變換，從而形成一個新的四邊形的形狀。`CGAffineTransform`中的“仿射”的意思是無論變換矩陣用什么值，圖層中平行的兩條線在變換之后任然保持平行，`CGAffineTransform`可以做出任意符合上述標注的變換，圖5.2顯示了一些仿射的和非仿射的變換：  ### 創建一個`CGAffineTransform` 對矩陣數學做一個全面的闡述就超出本書的討論范圍了，不過如果你對矩陣完全不熟悉的話，矩陣變換可能會使你感到畏懼。幸運的是，Core Graphics提供了一系列函數，對完全沒有數學基礎的開發者也能夠簡單地做一些變換。如下幾個函數都創建了一個`CGAffineTransform`實例： ~~~ CGAffineTransformMakeRotation(CGFloat angle) CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) ~~~ 旋轉和縮放變換都可以很好解釋--分別旋轉或者縮放一個向量的值。平移變換是指每個點都移動了向量指定的x或者y值--所以如果向量代表了一個點，那它就平移了這個點的距離。 我們用一個很簡單的項目來做個demo，把一個原始視圖旋轉45度角度（圖5.3）  圖5.3 使用仿射變換旋轉45度角之后的視圖 `UIView`可以通過設置`transform`屬性做變換，但實際上它只是封裝了內部圖層的變換。 `CALayer`同樣也有一個`transform`屬性，但它的類型是`CATransform3D`，而不是`CGAffineTransform`，本章后續將會詳細解釋。`CALayer`對應于`UIView`的`transform`屬性叫做`affineTransform`，清單5.1的例子就是使用`affineTransform`對圖層做了45度順時針旋轉。 清單5.1 使用`affineTransform`對圖層旋轉45度 ~~~ @interface ViewController () @property (nonatomic, weak) IBOutlet UIView *layerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //rotate the layer 45 degrees CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4); self.layerView.layer.affineTransform = transform; } @end ~~~ 注意我們使用的旋轉常量是`M_PI_4`，而不是你想象的45，因為iOS的變換函數使用弧度而不是角度作為單位。弧度用數學常量pi的倍數表示，一個pi代表180度，所以四分之一的pi就是45度。 C的數學函數庫（iOS會自動引入）提供了pi的一些簡便的換算，`M_PI_4`于是就是pi的四分之一，如果對換算不太清楚的話，可以用如下的宏做換算： ~~~ #define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0) ~~~ ## 混合變換 Core Graphics提供了一系列的函數可以在一個變換的基礎上做更深層次的變換，如果做一個既要*縮放*又要*旋轉*的變換，這就會非常有用了。例如下面幾個函數： ~~~ CGAffineTransformRotate(CGAffineTransform t, CGFloat angle) CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy) CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty) ~~~ 當操縱一個變換的時候，初始生成一個什么都不做的變換很重要--也就是創建一個`CGAffineTransform`類型的空值，矩陣論中稱作*單位矩陣*，Core Graphics同樣也提供了一個方便的常量： ~~~ CGAffineTransformIdentity ~~~ 最后，如果需要混合兩個已經存在的變換矩陣，就可以使用如下方法，在兩個變換的基礎上創建一個新的變換： ~~~ CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2); ~~~ 我們來用這些函數組合一個更加復雜的變換，先縮小50%，再旋轉30度，最后向右移動200個像素（清單5.2）。圖5.4顯示了圖層變換最后的結果。 清單5.2 使用若干方法創建一個復合變換 ~~~ - (void)viewDidLoad { [super viewDidLoad]; //create a new transform CGAffineTransform transform = CGAffineTransformIdentity; //scale by 50% transform = CGAffineTransformScale(transform, 0.5, 0.5); //rotate by 30 degrees transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0); //translate by 200 points transform = CGAffineTransformTranslate(transform, 200, 0); //apply transform to layer self.layerView.layer.affineTransform = transform; } ~~~  圖5.4 順序應用多個仿射變換之后的結果 圖5.4中有些需要注意的地方：圖片向右邊發生了平移，但并沒有指定距離那么遠（200像素），另外它還有點向下發生了平移。原因在于當你按順序做了變換，上一個變換的結果將會影響之后的變換，所以200像素的向右平移同樣也被旋轉了30度，縮小了50%，所以它實際上是斜向移動了100像素。 這意味著變換的順序會影響最終的結果，也就是說旋轉之后的平移和平移之后的旋轉結果可能不同。 ~~~ #define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI) ~~~