CALayer精講

---

CALayer包含在QuartzCore框架中，這是一個跨平臺的框架，既可以用在iOS中又可以用在Mac OS X中。后面要學Core Animation就應該先學好Layer（層）。

我們看一下UIView與Layer之間的關系圖（圖片來源于網絡）：

我們知道，UIView有一個屬性layer，這個是在視圖創建時就會自動創建一個圖層。想要呈現出來，就需要到Layer。層是可以放很多個子層的，也就可以實現多種多樣的效果。

CALayer關鍵屬性說明

---

// 與UIView的bounds類似的，獲取或設置圖層的大小 @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. */ // 獲取或設置在父圖層中對齊位置，默認為(0,0)，也就是左上角。 // 這個屬性與UIView的center屬性類似，不過在圖層中使用的是position // 這里關系到錨點，關于錨點在游戲世界里是非常關鍵的概念 // 支持隱式動畫 @property CGPoint position;/* The Z component of the layer's position in its superlayer. Defaults* to zero. Animatable. */ // 層與層之間有上下層的關系，設置Z軸方向的值，可以指定哪個層在上，哪個層在下 // 支持隱式動畫 @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. */ // 這個就是游戲中必須要懂的錨點，默認為(0.5, 0.5)，也就是正中央。 // 關于錨點的知識，當年自學cocos2d-x的時候也困擾過我一段時間，這個有專門的文章講解的 // 大家可以查一查相關專題講解。因為這個確實不好理解，一時說不通。 // 支持隱式動畫 @property CGPoint anchorPoint;/* A transform applied to the layer relative to the anchor point of its* bounds rect. Defaults to the identity transform. Animatable. */ // 圖層形變，做動畫常用 // 支持隱式動畫 @property CATransform3D transform;

溫馨提示：在CALayer中很少使用frame屬性，因為frame本身不支持動畫效果，通常使用bounds和position代替。CALayer中透明度使用opacity表示而不是alpha；中心點使用position表示而不是center。

實戰點擊放大移動效果

---

先看看效果圖：

實現代碼邏輯：

#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);// 指定中心點self.movableCircleLayer.position = self.view.center;// 變成圓形self.movableCircleLayer.cornerRadius = kLayerWidth / 2;// 指定背景色self.movableCircleLayer.backgroundColor = [UIColor blueColor].CGColor;// 設置陰影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);// 將中心位置放到點擊位置self.movableCircleLayer.position = [[touches anyObject] locationInView:self.view];// 再修改成圓形self.movableCircleLayer.cornerRadius = width / 2; }@end

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

通過層內容呈現圖片

---

效果圖片：

代碼實現：

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

如果我們只是需要顯示圖片到圖層上，通過設置contents屬性就可以了，也就不用繪圖，也不會出現圖像倒立的問題了。

通過層代理繪制圖片

---

上面的內容呈現是很簡單的，但是如果我們要增加其它效果呢？那就需要別的方式了。如下效果圖：

代碼實現：

- (void)drawImage {CALayer *layer = [CALayer layer];layer.bounds = CGRectMake(0, 0, kPhotoWidth, kPhotoWidth);layer.position = self.view.center;layer.cornerRadius = kPhotoWidth / 2;// 要設置此屬性才能裁剪成圓形，但是添加此屬性后，下面設置的陰影就沒有了。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];// 當設置masksToBounds為YES后，要想要陰影效果，就需要額外添加一個圖層作為陰影圖層了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];// 調用此方法，否則代理不會調用[layer setNeedsDisplay]; }#pragma mark - CALayerDelegate - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {// 將當前上下文入棧CGContextSaveGState(ctx);// 注意：坐標系統與UIView的不同，這里使用的是笛卡爾積坐標系，也就是左下角為(0,0)// 所以，我們只要記住這點就可以很容易地變換了。// 處理圖片倒立的問題// 默認呈現是倒立的，因此需要將形變矩陣的sy設置為-1就成了正立的了// 先縮放后平移也可以 // CGContextScaleCTM(ctx, 1, -1); // CGContextTranslateCTM(ctx, 0, -kPhotoWidth);// 先向平移后旋轉也可以解決倒立的問題CGContextTranslateCTM(ctx, kPhotoWidth, kPhotoWidth);CGContextRotateCTM(ctx, 3.1415926 / 180 * 180);UIImage *image = [UIImage imageNamed:@"bb"];CGContextDrawImage(ctx, CGRectMake(0, 0, kPhotoWidth, kPhotoWidth), image.CGImage);// 任務完成后，將當前上下文退棧CGContextRestoreGState(ctx); }

我們需要注意，一旦設置了層的layer.masksToBounds為YES，那么陰影效果就沒有了，也就是不能直接對該層設置shadow相關的屬性了，設置了也沒有作用。因此，這里使用另外一個圖層來專門呈現陰影效果的。

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

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

矩陣操作：通過CGContextDrawImage繪制的圖片是倒立的，因此我們需要進行矩陣相關變換。關于矩陣變換的知識是數學知識，也是知識難點，關于此理論知識，大家可以閱讀：http://www.tuicool.com/articles/Er6VNf6

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

• 第一種：先綻放后平移
• 第二種：先平移后旋轉

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

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

網絡上的一張圖片：

坐標原點在左下角，我們將倒立的圖片先平移到右上角，再順時針旋轉180度正好形成正立。

源代碼

---

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

閱讀原文

關注我

---

微信公眾號：iOSDevShares
有問必答QQ群：324400294

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CALayer精讲的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。