iOS繪制與渲染--變換

矩陣乘法

  • 矩陣C的行數(shù)等于矩陣A的行數(shù),C的列數(shù)等于B的列數(shù)。
  • 乘積C的第m行第n列的元素等于矩陣A的第m行的元素與矩陣B的第n列對應元素乘積之和。

矩陣變換原理

  • 通過矩陣對圖層位圖進行平移、旋轉、縮放變換拯勉。
  • 矩陣相乘只有在第一個矩陣的列數(shù)(column)和第二個矩陣的行數(shù)(row)相同時才有意義。
  • 圖層的bitmap由點組成憔购,每個點可以對應1×4矩陣宫峦,乘以一個4×4變換矩陣,得到一個1×4矩陣玫鸟,即為變換后的結果导绷。

思考:

  1. 點坐標為什么要轉換為1×4矩陣?
  2. 變換矩陣為什么必須是4×4矩陣鞋邑?
  3. 如何實現(xiàn)移動诵次,縮放,旋轉枚碗?

如果只使用3×3變換矩陣:

              m11, m12, m13
{x, y, z} * { m21, m22, m23 } = {x', y', z'}
              m31, m32, m33

那么xˊ=x × m11 + y × m21 + z × m31 逾一,在預先不對變量系數(shù)(m11, m21, m31)做其他計算的情況下,只能實現(xiàn)在各個坐標軸的縮放

但是使用使用1×4齊次矩陣和4×4變換矩陣后肮雨,xˊ= x × m11 + y × m21 + z × m31 + 1 × m41遵堵。比如當m11=2 m21=0 m31=0 m41=8時,可同時實現(xiàn)向x軸正方向放大2倍,在沿著x軸正方向平移8個單位

使用1×4矩陣陌宿,是相對點的三維坐標進行齊次坐標锡足。齊次坐標就是將一個原本是n維的向量用一個n+1維向量來表示:
齊次坐標變換 (x, y, z) -> (x × h, y × h, z × h, h) -> (xˊ, yˊ, zˊ, h)
齊次坐標還原 (xˊ, yˊ, zˊ, h) -> (x / h, y / h, z / h, 1) -> (x, y, z)

引入齊次坐標的目的主要是合并矩陣運算中的乘法和加法

基本變換矩陣

矩陣就是利用矩陣內(nèi)特殊位置的值壳坪,在做矩陣乘法時钉稍,達到對點坐標進行變換借嗽,下面時常用變換矩陣

平面仿射變換

CGAffineTransform中的“仿射”的意思是無論變換矩陣用什么值,圖層中平行的兩條線在變換之后任然保持平行,即純粹2D變換岂昭,沒有透視效果送矩。

先來觀察平面變換中的矩陣結構:

struct CGAffineTransform
{
  CGFloat a, b, c, d;
  CGFloat tx, ty;
};

為了把二維圖形的變化統(tǒng)一在一個坐標系里登颓,引入了齊次坐標的概念名段,即把一個圖形用一個三維矩陣表示,其中第三列總是(0,0,1)发框,用來作為坐標系的標準躺彬。所以所有的變化都由前兩列完成。
以上參數(shù)在矩陣中的表示為:

 |a    b    0|
 |c    d    0|
 |tx   ty   1|

運算原理:原坐標設為(X,Y,1);

             |a    b    0|
[X梅惯,Y,  1]   |c    d    0|  =  [aX + cY + tx   bX + dY + ty  1] ;
             |tx    ty  1|

可見宪拥,仿射變換忽略了z坐標,實現(xiàn)了2D變換:旋轉铣减、平移江解、縮放。但是要實現(xiàn)3D變換的話徙歼,還要了解透視原理。

透視效果

在真實世界中鳖枕,當物體遠離我們的時候魄梯,由于視角的原因看起來會變小,即透視效果--近大遠小宾符。

那該如何產(chǎn)生近大遠小呢酿秸?

要達到近大遠小目的,需要在系統(tǒng)做垂直投影前魏烫,先對圖層做一次視點變換辣苏。如此垂直投影別是視點觀察到的近大遠小的物體。

Layer的z軸的位置則是通過anchorPoint來指定的哄褒,所謂的anchorPoint(錨點)就是在變換中保持不變的點稀蟋,也就是某個Layer在變換中的原點,xyz三軸相交于此點。下圖為錨點常用位置

在原點(0 , 0)沿著Y軸的正方向呐赡,得到如圖坐標系, 首先在Z軸選擇一個視點


添加兩個child layer退客,觀察區(qū)域便能看到兩個child layer頂部的短線,綠色在前,紅色在后萌狂,且長度相等

IB7fAvn.png!web.png

通過視點對頂部档玻,作相對X軸的投影,得到視點投影


綠線茫藏、紅線本來長度相等误趴,通過視點投影后造成了“近大遠小”的透視效果

所以只要在iOS垂直投影前,對layer作視點投影變換务傲,就能得到透視效果

實踐透視原理

使用上圖的坐標系凉当,紅點為觀察區(qū)域一點,對紅點做視點投影树灶,得到綠點纤怒,同時對紅點做z軸的垂直線得到黑點。

使用相似三角形原理天通,得到如下公式

簡化公式后泊窘,得到 方程1 ,綠點x軸的值只于視點z軸值有關

對紅點做h = 1的齊次坐標(6, 0, 5, 1)像寒,通過乘以一個矩陣烘豹,得到變換后的綠點的齊次矩陣

變換后的矩陣只與視點z軸值有關,所以只設置m34,對(6, 0, 5, 1 + 5r)還原得到 方程2

結合 方程1 和 方程2 诺祸,最后得到

至此只要修改變換矩陣m34的值為視點z軸值携悯,便能得到相應的視點投影變換矩陣

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市筷笨,隨后出現(xiàn)的幾起案子憔鬼,更是在濱河造成了極大的恐慌,老刑警劉巖胃夏,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轴或,死亡現(xiàn)場離奇詭異,居然都是意外死亡仰禀,警方通過查閱死者的電腦和手機照雁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來答恶,“玉大人饺蚊,你說我怎么就攤上這事⌒ぃ” “怎么了污呼?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長烫扼。 經(jīng)常有香客問我曙求,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任悟狱,我火速辦了婚禮静浴,結果婚禮上,老公的妹妹穿的比我還像新娘挤渐。我一直安慰自己苹享,他們只是感情好,可當我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布浴麻。 她就那樣靜靜地躺著得问,像睡著了一般。 火紅的嫁衣襯著肌膚如雪软免。 梳的紋絲不亂的頭發(fā)上宫纬,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音膏萧,去河邊找鬼漓骚。 笑死,一個胖子當著我的面吹牛榛泛,可吹牛的內(nèi)容都是我干的蝌蹂。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼曹锨,長吁一口氣:“原來是場噩夢啊……” “哼孤个!你這毒婦竟也來了?” 一聲冷哼從身側響起沛简,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤齐鲤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后椒楣,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體佳遂,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年撒顿,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荚板。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡凤壁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出跪另,到底是詐尸還是另有隱情拧抖,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布免绿,位于F島的核電站唧席,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜淌哟,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一迹卢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧徒仓,春花似錦腐碱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至殃饿,卻和暖如春谋作,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背乎芳。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工遵蚜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人秒咐。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓谬晕,卻偏偏與公主長得像,于是被迫代替她去往敵國和親携取。 傳聞我的和親對象是個殘疾皇子攒钳,可洞房花燭夜當晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容