CALayer精講

---

CALayer包含在QuartzCore框架中，這是一個(gè)跨平臺(tái)的框架，既可以用在iOS中又可以用在Mac OS X中。后面要學(xué)Core Animation就應(yīng)該先學(xué)好Layer（層）。

我們看一下UIView與Layer之間的關(guān)系圖（圖片來(lái)源于網(wǎng)絡(luò)）：

我們知道，UIView有一個(gè)屬性layer，這個(gè)是在視圖創(chuàng)建時(shí)就會(huì)自動(dòng)創(chuàng)建一個(gè)圖層。想要呈現(xiàn)出來(lái)，就需要到Layer。層是可以放很多個(gè)子層的，也就可以實(shí)現(xiàn)多種多樣的效果。

CALayer關(guān)鍵屬性說(shuō)明

---

// 與UIView的bounds類似的，獲取或設(shè)置圖層的大小 @property CGRect bounds;/* The position in the superlayer that the anchor point of the layer's* bounds rect is aligned to. Defaults to the zero point. Animatable. */ // 獲取或設(shè)置在父圖層中對(duì)齊位置，默認(rèn)為(0,0)，也就是左上角。 // 這個(gè)屬性與UIView的center屬性類似，不過(guò)在圖層中使用的是position // 這里關(guān)系到錨點(diǎn)，關(guān)于錨點(diǎn)在游戲世界里是非常關(guān)鍵的概念 // 支持隱式動(dòng)畫(huà) @property CGPoint position;/* The Z component of the layer's position in its superlayer. Defaults* to zero. Animatable. */ // 層與層之間有上下層的關(guān)系，設(shè)置Z軸方向的值，可以指定哪個(gè)層在上，哪個(gè)層在下 // 支持隱式動(dòng)畫(huà) @property CGFloat zPosition;/* Defines the anchor point of the layer's bounds rect, as a point in* normalized layer coordinates - '(0, 0)' is the bottom left corner of* the bounds rect, '(1, 1)' is the top right corner. Defaults to* '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */ // 這個(gè)就是游戲中必須要懂的錨點(diǎn)，默認(rèn)為(0.5, 0.5)，也就是正中央。 // 關(guān)于錨點(diǎn)的知識(shí)，當(dāng)年自學(xué)cocos2d-x的時(shí)候也困擾過(guò)我一段時(shí)間，這個(gè)有專門的文章講解的 // 大家可以查一查相關(guān)專題講解。因?yàn)檫@個(gè)確實(shí)不好理解，一時(shí)說(shuō)不通。 // 支持隱式動(dòng)畫(huà) @property CGPoint anchorPoint;/* A transform applied to the layer relative to the anchor point of its* bounds rect. Defaults to the identity transform. Animatable. */ // 圖層形變，做動(dòng)畫(huà)常用 // 支持隱式動(dòng)畫(huà) @property CATransform3D transform;

溫馨提示：在CALayer中很少使用frame屬性，因?yàn)閒rame本身不支持動(dòng)畫(huà)效果，通常使用bounds和position代替。CALayer中透明度使用opacity表示而不是alpha；中心點(diǎn)使用position表示而不是center。

實(shí)戰(zhàn)點(diǎn)擊放大移動(dòng)效果

---

先看看效果圖：

實(shí)現(xiàn)代碼邏輯：

#define kLayerWidth 50@interface HYBMoveCircleLayerController ()@property (nonatomic, strong) CALayer *movableCircleLayer;@end@implementation HYBMoveCircleLayerController- (void)viewDidLoad {[super viewDidLoad];self.movableCircleLayer = [CALayer layer];// 指定大小self.movableCircleLayer.bounds = CGRectMake(0, 0, kLayerWidth, kLayerWidth);// 指定中心點(diǎn)self.movableCircleLayer.position = self.view.center;// 變成圓形self.movableCircleLayer.cornerRadius = kLayerWidth / 2;// 指定背景色self.movableCircleLayer.backgroundColor = [UIColor blueColor].CGColor;// 設(shè)置陰影self.movableCircleLayer.shadowColor = [UIColor grayColor].CGColor;self.movableCircleLayer.shadowOffset = CGSizeMake(3, 3);self.movableCircleLayer.shadowOpacity = 0.8;[self.view.layer addSublayer:self.movableCircleLayer]; }- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {CGFloat width = kLayerWidth;if (self.movableCircleLayer.bounds.size.width <= kLayerWidth) {width = kLayerWidth * 2.5;}// 修改大小self.movableCircleLayer.bounds = CGRectMake(0, 0, width, width);// 將中心位置放到點(diǎn)擊位置self.movableCircleLayer.position = [[touches anyObject] locationInView:self.view];// 再修改成圓形self.movableCircleLayer.cornerRadius = width / 2; }@end

這里需要注意的是每次更新位置時(shí)，這個(gè)圖層的大小和cornerRadius都需要更新，否則就不成圓形了!

通過(guò)層內(nèi)容呈現(xiàn)圖片

---

效果圖片：

代碼實(shí)現(xiàn)：

- (void)drawImageWithContent {CALayer *layer = [CALayer layer];layer.bounds = CGRectMake(0, 0, kPhotoWidth, kPhotoWidth);layer.position = self.view.center;layer.cornerRadius = kPhotoWidth / 2;// 要設(shè)置此屬性才能裁剪成圓形，但是添加此屬性后，下面設(shè)置的陰影就沒(méi)有了。layer.masksToBounds = YES;layer.borderColor = [UIColor whiteColor].CGColor;layer.borderWidth = 1;// 如果只是顯示圖片，不做其它處理，直接設(shè)置contents就可以了，也就不會(huì)出現(xiàn)// 繪圖和圖像倒立的問(wèn)題了layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"bb"].CGImage);[self.view.layer addSublayer:layer]; }

如果我們只是需要顯示圖片到圖層上，通過(guò)設(shè)置contents屬性就可以了，也就不用繪圖，也不會(huì)出現(xiàn)圖像倒立的問(wèn)題了。

通過(guò)層代理繪制圖片

---

上面的內(nèi)容呈現(xiàn)是很簡(jiǎn)單的，但是如果我們要增加其它效果呢？那就需要?jiǎng)e的方式了。如下效果圖：

代碼實(shí)現(xiàn)：

- (void)drawImage {CALayer *layer = [CALayer layer];layer.bounds = CGRectMake(0, 0, kPhotoWidth, kPhotoWidth);layer.position = self.view.center;layer.cornerRadius = kPhotoWidth / 2;// 要設(shè)置此屬性才能裁剪成圓形，但是添加此屬性后，下面設(shè)置的陰影就沒(méi)有了。layer.masksToBounds = YES;layer.borderColor = [UIColor whiteColor].CGColor;layer.borderWidth = 1;// // 陰影 // layer.shadowColor = [UIColor blueColor].CGColor; // layer.shadowOffset = CGSizeMake(4, 4); // layer.shadowOpacity = 0.9;// 指定代理layer.delegate = self;// 添加到父圖層上[self.view.layer addSublayer:layer];// 當(dāng)設(shè)置masksToBounds為YES后，要想要陰影效果，就需要額外添加一個(gè)圖層作為陰影圖層了CALayer *shadowLayer = [CALayer layer];shadowLayer.position = layer.position;shadowLayer.bounds = layer.bounds;shadowLayer.cornerRadius = layer.cornerRadius;shadowLayer.shadowOpacity = 1.0;shadowLayer.shadowColor = [UIColor redColor].CGColor;shadowLayer.shadowOffset = CGSizeMake(2, 1);shadowLayer.borderWidth = layer.borderWidth;shadowLayer.borderColor = [UIColor whiteColor].CGColor;[self.view.layer insertSublayer:shadowLayer below:layer];// 調(diào)用此方法，否則代理不會(huì)調(diào)用[layer setNeedsDisplay]; }#pragma mark - CALayerDelegate - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {// 將當(dāng)前上下文入棧CGContextSaveGState(ctx);// 注意：坐標(biāo)系統(tǒng)與UIView的不同，這里使用的是笛卡爾積坐標(biāo)系，也就是左下角為(0,0)// 所以，我們只要記住這點(diǎn)就可以很容易地變換了。// 處理圖片倒立的問(wèn)題// 默認(rèn)呈現(xiàn)是倒立的，因此需要將形變矩陣的sy設(shè)置為-1就成了正立的了// 先縮放后平移也可以 // CGContextScaleCTM(ctx, 1, -1); // CGContextTranslateCTM(ctx, 0, -kPhotoWidth);// 先向平移后旋轉(zhuǎn)也可以解決倒立的問(wèn)題CGContextTranslateCTM(ctx, kPhotoWidth, kPhotoWidth);CGContextRotateCTM(ctx, 3.1415926 / 180 * 180);UIImage *image = [UIImage imageNamed:@"bb"];CGContextDrawImage(ctx, CGRectMake(0, 0, kPhotoWidth, kPhotoWidth), image.CGImage);// 任務(wù)完成后，將當(dāng)前上下文退棧CGContextRestoreGState(ctx); }

我們需要注意，一旦設(shè)置了層的layer.masksToBounds為YES，那么陰影效果就沒(méi)有了，也就是不能直接對(duì)該層設(shè)置shadow相關(guān)的屬性了，設(shè)置了也沒(méi)有作用。因此，這里使用另外一個(gè)圖層來(lái)專門呈現(xiàn)陰影效果的。

我們需要將陰影層放在圖片層的下面，別把圖片層給擋住了。默認(rèn)是不會(huì)調(diào)用代理方法的，必須要調(diào)用setNeedsDisplay方法才會(huì)回調(diào)。因此，要繪制哪個(gè)層就調(diào)用哪個(gè)層對(duì)象調(diào)用該方法。

在代理方法中，我們介紹一下相關(guān)代碼。CGContextSaveGState方法是入棧操作，也就是將當(dāng)前設(shè)備上下文入棧。既然有入棧，自然也得有出棧，最后一行CGContextRestoreGState就是將設(shè)備上下文出棧。我們必須明確一點(diǎn)，繪圖是在設(shè)備上下文上操作的，因此，我們所進(jìn)行的繪圖操作都會(huì)是棧頂元素上的。

矩陣操作：通過(guò)CGContextDrawImage繪制的圖片是倒立的，因此我們需要進(jìn)行矩陣相關(guān)變換。關(guān)于矩陣變換的知識(shí)是數(shù)學(xué)知識(shí)，也是知識(shí)難點(diǎn)，關(guān)于此理論知識(shí)，大家可以閱讀：http://www.tuicool.com/articles/Er6VNf6

我們需要明確坐標(biāo)系為笛卡爾積坐標(biāo)系，坐標(biāo)原點(diǎn)在左下角。這里提供了兩種解決圖像倒立問(wèn)題的方法。

• 第一種：先綻放后平移
• 第二種：先平移后旋轉(zhuǎn)

對(duì)于第一種，我們先設(shè)置矩陣的sx,sy分別為1，-1，然后平移到(0, -kPhotoWidth)。對(duì)于這一種不好理解，因此，筆者提供了第二種方法，更容易理解一些。

第二種，先平移到右上角，然后再旋轉(zhuǎn)180度，正好正立。

網(wǎng)絡(luò)上的一張圖片：

坐標(biāo)原點(diǎn)在左下角，我們將倒立的圖片先平移到右上角，再順時(shí)針旋轉(zhuǎn)180度正好形成正立。

源代碼

---

小伙伴們可以到github下載源代碼哦：https://github.com/CoderJackyHuang/CALayerDemo

閱讀原文

關(guān)注我

---

微信公眾號(hào)：iOSDevShares
有問(wèn)必答QQ群：324400294

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CALayer精讲的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。