圖層的幾個(gè)坐標(biāo)系

對(duì)于iOS來(lái)說(shuō)，坐標(biāo)系的（0，0）點(diǎn)在左上角，就是越往下，Y值越大。越往右，X值越大。

一個(gè)圖層的frame，它是position，bounds，anchorPoint和transform屬性的一部分。

設(shè)置一個(gè)新的frame將會(huì)相應(yīng)的改變圖層的position和bounds，但是frame本身并沒(méi)有保存。

position：是一個(gè)CGPoint值，它指定圖層相當(dāng)于它父圖層的位置，該值基于父圖層的坐標(biāo)系。

bounds：是一個(gè)CGRect值，指定圖層的大?。╞ounds.size）和圖層的原點(diǎn)（bounds.origin），這個(gè)坐標(biāo)系是基于自身的。如果改變bounds的origin，那么在該圖層的子圖層，坐標(biāo)會(huì)跟著改變。也就是說(shuō)，改變自身的坐標(biāo)系，本身在父圖層的位置不變，但它上的子圖層位置變化。

anchorPoint：是一個(gè)CGPoint值，它是指定了一個(gè)基于bounds的符合坐標(biāo)系的位置。錨點(diǎn)（anchor point）制定了bounds相對(duì)于position的值，同時(shí)也作為一個(gè)變化時(shí)候的中心點(diǎn)。錨點(diǎn)使用空間坐標(biāo)系取值范圍是0-1之間的數(shù)。默認(rèn)是0.5，也就是禿瓢的中心點(diǎn)，如果是（0，0）那么，圖層向左上方移動(dòng)。如果是（1，1）就向右下方移動(dòng)。

看下面的兩個(gè)圖，就能夠夠清晰的看出錨點(diǎn)變化所帶來(lái)的不一樣。（此圖為Mac OS 坐標(biāo)系，如果是iOS，那么（0，0）點(diǎn)在圖的左上方。）

對(duì)于anchorPoint的解釋在ios中如圖：

下圖中的紅點(diǎn)位置就是 錨點(diǎn)的位置：默認(rèn)為（0.5，0.5）。在對(duì)圖像進(jìn)行變換時(shí)，都是按照這個(gè)點(diǎn)來(lái)進(jìn)行縮放，偏移等。

一旦修改錨點(diǎn)的位置為：（0，0），那么圖像就會(huì)變成下圖。各種變換就會(huì)按照這個(gè)點(diǎn)來(lái)運(yùn)動(dòng)。

所以說(shuō)，在iOS系統(tǒng)中，錨點(diǎn)的坐標(biāo)系是：左上角為（0，0），右下角為（1，1）。

根據(jù)此圖，在理解上面的定義，就直觀了一些。

圖層的幾何變換

可以通過(guò)矩陣來(lái)改變一個(gè)圖層的幾何形狀。

CATransform3D 的數(shù)據(jù)結(jié)構(gòu)定義了一個(gè)同質(zhì)的三維變換（4x4 CGFloat值的矩陣），用于圖層的旋轉(zhuǎn)，縮放，偏移，歪斜和應(yīng)用的透視。

圖層的2個(gè)屬性指定了變換矩陣：transform 和 sublayerTransform。

transform ： 是結(jié)合 anchorPoint（錨點(diǎn)）的位置來(lái)對(duì)圖層和圖層上的子圖層進(jìn)行變化。

sublayerTransform：是結(jié)合anchorPoint（錨點(diǎn)）的位置來(lái)對(duì)圖層的子圖層進(jìn)行變化，不包括本身。

CATransform3DIdentity 是單位矩陣，該矩陣沒(méi)有縮放，旋轉(zhuǎn)，歪斜，透視。該矩陣應(yīng)用到圖層上，就是設(shè)置默認(rèn)值。

變換函數(shù)

CATransform3DMakeTranslation

官方文檔：

Returns a transform that translates by '(tx, ty, tz)'. t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1].

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)。

做一個(gè)解釋?zhuān)瑢?duì)于初學(xué)者來(lái)說(shuō)，可能沒(méi)有看明白是什么意思。我詳細(xì)說(shuō)下

對(duì)于CATransform3D來(lái)說(shuō)，它是一個(gè)4x4 CGFloat的矩陣。

而上面給的值：[1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1].

給豎起來(lái)后。就發(fā)現(xiàn)：

1? ? 0? ? 0? ? 0

0? ? 1? ? 0? ? 0

0? ? 0? ? 1? ? 0

tx? ty? tz? 1

豎起來(lái)看就很明顯了。

CATransform3D 又是一個(gè)結(jié)構(gòu)。他有自己的一個(gè)公式，可以進(jìn)行套用。

struct CATransform3D

{

CGFloat? ? m11（x縮放）,? ? m12（y切變）,? ? ? m13（旋轉(zhuǎn)）,? ? m14（）;

CGFloat? ? m21（x切變）,? ? m22（y縮放）,? ? ? m23（） ? ? ? , ? ?m24（）;

CGFloat? ? m31（旋轉(zhuǎn)） ?, ? ?m32（ ） ? ? ? , ? ? ?m33（） ? ? ? , ? ?m34（透視效果，要操作的這個(gè)對(duì)象要有旋轉(zhuǎn)的角度，否則沒(méi)有效果。正直/負(fù)值都有意義）;

CGFloat? ? m41（x平移）,? ? m42（y平移）,? ? m43（z平移） ,? ? m44（）;

};

根據(jù)這個(gè)公式，就一目了然了。

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)

的參數(shù)意思就是

tx:：x平移。? ty：y平移。? tz：z平移

換換函數(shù)：

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)

tx：X軸偏移位置，往下為正數(shù)。

ty：Y軸偏移位置，往右為正數(shù)。

tz：Z軸偏移位置，往外為正數(shù)。

例：

如果有2個(gè)圖層，一個(gè)是綠色的，一個(gè)是紅色的。先加載綠色，后加載紅色。

tx，ty的左右偏移先不說(shuō)了。

如果綠色的tz為-10 ，紅色的tz為 0 效果如下：

如果綠色的tz為 0 ，紅色的tz為-10 效果如下：

對(duì)于tz來(lái)說(shuō)，值越大，那么圖層就越往外（接近屏幕），值越小，圖層越往里（屏幕里）。

CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);

t：就是上一個(gè)函數(shù)。其他的都一樣。

就可以理解為：函數(shù)的疊加，效果的疊加。

CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);

sx：X軸縮放，代表一個(gè)縮放比例，一般都是 0 --- 1 之間的數(shù)字。

sy：Y軸縮放。

sz：整體比例變換時(shí)，也就是m11（sx）== m22（sy）時(shí)，若m33（sz）>1，圖形整體縮小，若0<1，圖形整體放大，若m33（sz）<0，發(fā)生關(guān)于原點(diǎn)的對(duì)稱(chēng)等比變換。

當(dāng)sx = 1，sy = 1時(shí)。如圖：

當(dāng)sx = 0.5，sy = 0.5時(shí)。如圖：

CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)

t：就是上一個(gè)函數(shù)。其他的都一樣。

就可以理解為：函數(shù)的疊加，效果的疊加。

CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

旋轉(zhuǎn)效果。

angle：旋轉(zhuǎn)的弧度，所以要把角度轉(zhuǎn)換成弧度：角度 * M_PI / 180。

x：向X軸方向旋轉(zhuǎn)。值范圍-1 --- 1之間

y：向Y軸方向旋轉(zhuǎn)。值范圍-1 --- 1之間

z：向Z軸方向旋轉(zhuǎn)。值范圍-1 --- 1之間

例： 向X軸旋轉(zhuǎn)60度。 ? ??

? ? ? ?向Y軸旋轉(zhuǎn)60度。 ? ? ? ?

? ? ? ?向Z軸旋轉(zhuǎn)60度。

向 X軸，Y軸都旋轉(zhuǎn)60度，就是沿著對(duì)角線旋轉(zhuǎn)。

可以通過(guò)X，Y，Z軸同時(shí)變化，來(lái)旋轉(zhuǎn)圖像。

CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

t：就是上一個(gè)函數(shù)。其他的都一樣。

就可以理解為：函數(shù)的疊加，效果的疊加。

CATransform3D CATransform3DInvert (CATransform3D t);

翻轉(zhuǎn)效果。

未使用

使用

CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

bool CATransform3DIsAffine (CATransform3D t);

仿射效果。

就是把一個(gè) CATransform3D 對(duì)象轉(zhuǎn)換成一個(gè) CGAffineTransform 對(duì)象。

也就是把 CATransform3D 矩陣 轉(zhuǎn)換成 CGAffineTransform 矩陣

變換函數(shù)同時(shí)提供了可以比較一個(gè)變換矩陣是否是單位矩陣,或者兩個(gè)矩陣是否相等。

bool CATransform3DIsIdentity (CATransform3D t);

bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);

也可以通過(guò)修改數(shù)據(jù)結(jié)構(gòu)和鍵值來(lái)設(shè)置變換效果。

struct CATransform3D

{

CGFloat m11, m12, m13, m14；

CGFloat m21, m22, m23, m24；

CGFloat m31, m32, m33, m34；

CGFloat m41, m42, m43, m44；

}

可以直接修改 其中的一個(gè)值，來(lái)達(dá)到相同的效果。

或者修改鍵值

[myLayer setValue:[NSNumber numberWithInt:0] forKeyPath:@"transform.rotation.x"];