iOS中的3D變換（一）

級別： ★★☆☆☆
標籤：「iOS」「Swift」「CATransform3D」「3D變換」
做者： 大成小棧
審校： QiShare團隊

---

以前分享過一篇介紹仿射變換的文章，仿射變換屬於平面變換，本文來介紹一下iOS中的3D變換 ——— CATransform3D。

1. 回顧一下二維變換

二維變換，也即仿射變換，CGAffineTransform結構體類型中有6個參數：

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)
}
複製代碼

增廣以後可得以下變換矩陣：

x' = ax + cy +  tx y' = bx + dy + ty

具體變換過程及使用，能夠參考《Swift 中使用 CGAffineTransform》。

2. 三維變換CATransform3D

其中三維變換矩陣通常應用在視圖的 view.layer.transform 和 view.layer.sublayerTransform中。CATransform3D結構體類型中的參數爲：

public struct CATransform3D {

    public var m11: CGFloat
    public var m12: CGFloat
    public var m13: CGFloat
    public var m14: CGFloat
    public var m21: CGFloat
    public var m22: CGFloat
    public var m23: CGFloat
    public var m24: CGFloat
    public var m31: CGFloat
    public var m32: CGFloat
    public var m33: CGFloat
    public var m34: CGFloat
    public var m41: CGFloat
    public var m42: CGFloat
    public var m43: CGFloat
    public var m44: CGFloat

    public init()

    public init(m11: CGFloat, m12: CGFloat, m13: CGFloat, m14: CGFloat, m21: CGFloat, m22: CGFloat, m23: CGFloat, m24: CGFloat, m31: CGFloat, m32: CGFloat, m33: CGFloat, m34: CGFloat, m41: CGFloat, m42: CGFloat, m43: CGFloat, m44: CGFloat)
}
複製代碼

這些參數依然對應一個變換矩陣，

上面參數對應矩陣的位置以下：

{m11, m12 , m13, m14 m21, m22, m23, m24 m31, m32, m33, m34 m41, m42, m43, m44 }

x' = m11x + m21y + m31z + m41 y' = m12x + m22y + m32z + m42 z' = m13x + m23y + m33z + m43 (m1四、m24和m34爲各軸透視變換參數，通常單獨設置，他們對m44的值產生影響，而m44對投影的圖形在**對應軸***方向產生線性影響，其初始值爲1)

從m11到m44定義的含義以下： m11：x軸方向進行縮放 m12：和m21一塊兒決定z軸的旋轉 m13:和m31一塊兒決定y軸的旋轉 m14: m21:和m12一塊兒決定z軸的旋轉 m22:y軸方向進行縮放 m23:和m32一塊兒決定x軸的旋轉 m24: m31:和m13一塊兒決定y軸的旋轉 m32:和m23一塊兒決定x軸的旋轉 m33:z軸方向進行縮放 m34:透視效果m34= -1/D，D越小，透視效果越明顯，必須在有旋轉效果的前提下，纔會看到透視效果 m41:x軸方向進行平移 m42:y軸方向進行平移 m43:z軸方向進行平移 m44:初始爲1

則，原始矩陣爲：

{1,  0 ,  0,  0
  0,  1,  0,  0
  0,  0,  1,  0
  0,  0,  0,  1 }
複製代碼

2.1 旋轉 rotate

• 繞Z軸

{ cos(θ)  ，-sin(θ)   ， 0   ，0
   sin(θ) ， cos(θ)   ， 0   ，0
     0    ，   0      ， 1   ，0
     0    ，   0      ， 0   ，1}
複製代碼

• 繞Y軸

{ cos(θ) ，0 ，sin(θ) ，0
     0   ，1 ，  0    ，0
 -sin(θ） ，0 ，cos(θ) ，0
    0    ，0  ，   0  ，1}
複製代碼

• 繞X軸

{1  ，  0     ，  0      ，0
 0  ，cos(θ)  ，-sin(θ)  ，0
 0  ，sin(θ)  ，cos(θ)   ，0
 0  ，  0     ，  0      ，1}
複製代碼

2.2 切變 shear

• 沿X軸

{ 1  ，k  ，0  ，0
  0  ，1  ，0  ，0
  0  ，0  ，1  ，0
  0  ，0  ，0  ，1}
複製代碼

• 沿Y軸

{ 1  ，0  ，0  ，0
  k  ，1  ，0  ，0
  0  ，0  ，1  ，0
  0  ，0  ，0  ，1}
複製代碼

2.3 鏡像

• 基於Y-X平面

{ 1 ，0  ，0  ，0
 0  ，1  ，0  ，0
 0  ，0  ，-1 ，0 
 0  ，0  ，0  ，1}
複製代碼

• 基於X-Z平面

{1  ，0  ，0   ，0 
 0  ，-1  ，0  ，0
 0  ，0  ，1   ，0
 0  ，0  ，0   ，1}
複製代碼

• 基於Z-Y平面

{ -1  ，0  ，0  ，0
   0  ，1   ，0  ，0
   0  ，0   ，1  ，0
   0  ，0   ，0  ，1}
複製代碼

2.4 針對z軸的透視投影

m34 = -1/d

d值決定了觀察點的位置，d爲正無窮大的時候，觀察點在無窮遠處，此時投影線垂直於投影平面，CATransform3D中m34的默認值爲0，即觀察點在無窮遠處。m14,m24同理。

當d爲正的時候，投影是人眼觀察現實世界的效果，即在投影平面上表現出近大遠小的效果，z越靠近原點則這種效果越明顯，越遠離原點則愈來愈不明顯，當z爲正無窮大的時候，則失去了近大遠小的效果，此時投影線垂直於投影平面，也就是視點在無窮遠處，CATransform3D中m34的默認值爲0，即視點在無窮遠處.

注意：齊次座標到數學座標的轉換通用的齊次座標爲 (a, b, c, h)，其轉換成數學座標則爲 (a/h, b/h, c/h)。

• 代數解釋

假設一個Layer anchorPoint爲默認的 (0.5, 0.5 )，其三維空間中一個A點 (6, 0, 0)，m34 = -1/1000.0，則此點往z軸負方向移動10個單位以後，則在投影平面上看到的點的座標是多少呢？

A點使用齊次座標表示爲 (6, 0, 0, 1)

QuartzCore框架爲咱們提供了函數來算出所須要的矩陣，

var transform3D: CATransform3D = CATransform3DIdentity
    transform3D.m34 = -1.0 / 1000.0
    transform = CATransform3DTranslate(transform, 0, 0, -10)
複製代碼

計算出來的矩陣爲

{ 1,    0,    0,     0
  0,    1,    0,     0
  0,    0,    1,     -0.001
  0,    0,  -10,    1.01}   
複製代碼

其實上面的變換矩陣本質上是兩個矩陣相乘獲得的 變換矩陣 * 投影矩陣 變換矩陣爲

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,    0
 0,    0,   -10,  1}     
複製代碼

投影矩陣爲

{1,    0,    0,    0
 0,    1,    0,    0
 0,    0,    1,   -0.001
 0,    0,    0,    1}     
複製代碼

上面的兩個矩陣相乘則會獲得最終的變換矩陣(若是忘記矩陣乘法的能夠去看下線性代數複習下)，因此一個矩陣就能夠完成變換和投影。

將A點座標乘上最終的變換矩陣，則獲得 {6, 0 , -10, 1.01}, 轉換成數學座標點爲 {6/1.01, 0, 10/1.01},則能夠知道其在投影平面上的投影點爲 {6/1.01, 0, 0} 也就是咱們看到的變換後的點。其比以前較靠近原點。越往z軸負方向移動，則在投影平面上越靠近原點。

• 幾何解釋

將上面的例子使用幾何的方式來進行解釋分析，當咱們沿着y軸的正方向向下看時候，能夠獲得以下的景象:

虛線爲投影線，其和x軸的交點即爲A點的投影點。 由類似三角形的定理咱們很容易算出投影的點，

1000/(1000 + 10) = x/6,則x = 6*1000/1010 = 6/1.01

本文主要介紹3D變換的原理，具體應用請關注以後分享的文章。

---

瞭解更多iOS及相關新技術，請關注咱們的公衆號：

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
WebSocket 雙端實踐（iOS/ Golang）
今天咱們來聊一聊WebSocket（iOS/Golang）
用 Swift 進行貝塞爾曲線繪製
Swift 5.1 (11) - 方法
Swift 5.1 (10) - 屬性
iOS App後臺保活
奇舞週刊