CALayer
當利用drawRect:方法繪圖的本質就是繪制到了UIView的layer（屬性）中。
CALayer很多屬性在修改時都能形成動畫效果，這種屬性稱為“隱式動畫屬性”。但是對于UIView的根圖層而言屬性的修改并不形成動畫效果，因為很多情況下根圖層更多的充當容器的做用。并且UIView的根圖層創建工作完全由iOS負責完成，無法重新創建。
直接在圖層中繪圖
當時調用了UIView的drawRect:方法繪制圖形、圖像，這種方式本質還是在圖層中繪制。只是drawRect:方法是由UIKit組件進行調用，因此里面可以使用一些UIKit封裝的方法進行繪圖，而直接繪制到圖層的方法由于并非UIKit直接調用因此只能用原生的Core Graphics方法繪制。
CALayer圖層內部繪圖有兩個方法:(都需要調用setNeedDisplay方法)
- 通過圖層代理繪制 (CALayerDelegate)
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx; - 通過自定義圖層繪制 (CALayer)
- (void)drawInContext:(CGContextRef)ctx;
使用圖層代理繪圖
只要指定某圖層(CALayer)的代理，然后在代理對象中重寫-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法。這里不需要手動實現CALayerDelegate，因為CALayer定義中給NSObject做了分類擴展，所有的NSObject都包含這個方法。
//
// ViewController.m
// CartoonLearn
//
// Created by xiaodoubaba on 16/2/1.
// Copyright ? 2016年 xiaodoubaba. All rights reserved.
//
#import "ViewController.h"
#define Photo_Height 150
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
CGPoint position = CGPointMake(160, 200);
CGRect bounds = CGRectMake(0, 0, Photo_Height, Photo_Height);
CGFloat cornerRadius = Photo_Height / 2;
CGFloat borderWidth = 2;
//陰影圖層
CALayer *layerShadow = [[CALayer alloc]init];
layerShadow.bounds = bounds;
layerShadow.position = position;
layerShadow.cornerRadius = cornerRadius;
layerShadow.shadowColor = [UIColor grayColor].CGColor;
layerShadow.shadowOffset = CGSizeMake(2, 1);
layerShadow.shadowOpacity = 1;
layerShadow.borderColor = [UIColor whiteColor].CGColor;
layerShadow.borderWidth = borderWidth;
[self.view.layer addSublayer:layerShadow];
//容器圖層
CALayer *layer = [[CALayer alloc] init];
layer.bounds = bounds;
layer.position = position;
layer.backgroundColor = [UIColor orangeColor].CGColor;
layer.cornerRadius = cornerRadius;
//子圖層是否剪切圖層邊界，默認為NO
layer.masksToBounds = YES;
/*陰影效果無法和masksToBounds同時使用，因為masksToBounds的目的就是剪切外邊框，
而陰影效果剛好在外邊框
換個思路:使用兩個大小一樣的圖層，下面的圖層負責繪制陰影，上面的圖層用來顯示圖片。
layer.shadowColor=[UIColor grayColor].CGColor;
layer.shadowOffset=CGSizeMake(2, 2);
layer.shadowOpacity=1;
*/
layer.borderColor = [UIColor grayColor].CGColor;
layer.borderWidth = 2;
/*利用圖層形變解決圖像倒立問題
在動畫開發中形變往往不是直接設置transform，而是通過keyPath進行設置。
這種方法設置形變的本質沒有區別，只是利用了KVC可以動態修改其屬性值而已。
下面的代碼可以替換為：
[layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];
*/
layer.transform=CATransform3DMakeRotation(M_PI, 1, 0, 0);
/*如果僅僅就顯示一張圖片在圖層中，直接設置圖層contents就可以了。無需delegate
UIImage *image = [UIImage imageNamed:@"picture"];
layer.contents = (id)image.CGImage;
[layer setContents:(id)image.CGImage];
*/
layer.delegate = self;
[self.view.layer addSublayer:layer];
//調用圖層setNeedDisplay,否則代理方法不會被調用
[layer setNeedsDisplay];
}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
/*如果沒有設置layer.transform,需要加上
CGContextSaveGState(ctx);
//圖形上下文形變，解決圖片倒立的問題
CGContextScaleCTM(ctx, 1, -1);
CGContextTranslateCTM(ctx, 0, -Photo_Height);
*/
UIImage *image = [UIImage imageNamed:@"picture"];
//相對于圖層位置,不是屏幕
CGContextDrawImage(ctx, CGRectMake(0, 0, Photo_Height, Photo_Height), image.CGImage);
/*如果沒有設置layer.transform,需要加上
CGContextRestoreGState(ctx);
*/
}
@end
圖層代理繪圖.png
使用自定義圖層繪圖
編寫一個類繼承于
CALayer然后在drawInContext:中使用CGContext繪圖。同樣需要調用setNeedDisplay方法。
//
// XDLayer.m
// CartoonLearn
//
// Created by xiaodoubaba on 16/2/2.
// Copyright ? 2016年 xiaodoubaba. All rights reserved.
//
#import "XDLayer.h"
@implementation XDLayer
- (void)drawInContext:(CGContextRef)ctx
{
NSLog(@"3-drawInContext:");
NSLog(@"CGContext:%@",ctx);
CGContextSetRGBFillColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
CGContextSetRGBStrokeColor(ctx, 135.0/255.0, 232.0/255.0, 84.0/255.0, 1);
CGContextMoveToPoint(ctx, 94.5, 33.5);
//// Star Drawing
CGContextAddLineToPoint(ctx,104.02, 47.39);
CGContextAddLineToPoint(ctx,120.18, 52.16);
CGContextAddLineToPoint(ctx,109.91, 65.51);
CGContextAddLineToPoint(ctx,110.37, 82.34);
CGContextAddLineToPoint(ctx,94.5, 76.7);
CGContextAddLineToPoint(ctx,78.63, 82.34);
CGContextAddLineToPoint(ctx,79.09, 65.51);
CGContextAddLineToPoint(ctx,68.82, 52.16);
CGContextAddLineToPoint(ctx,84.98, 47.39);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);
}
@end
//
// XDView.m
// CartoonLearn
//
// Created by xiaodoubaba on 16/2/2.
// Copyright ? 2016年 xiaodoubaba. All rights reserved.
//
#import "XDView.h"
#import "XDLayer.h"
@implementation XDView
- (instancetype)initWithFrame:(CGRect)frame
{
NSLog(@"initWithFrame:");
if (self = [super initWithFrame:frame]) {
XDLayer *layer = [[XDLayer alloc] init];
layer.bounds = CGRectMake(0, 0, 185, 185);
layer.position = CGPointMake(160, 284);
layer.backgroundColor = [UIColor lightGrayColor].CGColor;
[layer setNeedsDisplay];
[self.layer addSublayer:layer];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
NSLog(@"2-drawRect:");
//得到當前圖形上下文是drawLayer中傳遞的
NSLog(@"CGContext:%@",UIGraphicsGetCurrentContext());
[super drawRect:rect];
}
/*UIView在顯示時其根圖層會自動創建一個CGContextRef（CALayer本質使用的是位圖上下文）
同時調用圖層代理（UIView創建圖層會自動設置圖層代理為其自身）的draw: inContext:方法
并將圖形上下文作為參數傳遞給這個方法。
UIView自動就是根圖層的代理*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
NSLog(@"1-drawLayer:inContext:");
NSLog(@"CGContext:%@",ctx);
[super drawLayer:layer inContext:ctx];
/*UIView會在這個方法中調用其drawRect:方法*/
}
@end
//
// SecondViewController.m
// CartoonLearn
//
// Created by xiaodoubaba on 16/2/2.
// Copyright ? 2016年 xiaodoubaba. All rights reserved.
//
#import "SecondViewController.h"
#import "XDView.h"
@interface SecondViewController ()
@end
@implementation SecondViewController
- (void)viewDidLoad {
[super viewDidLoad];
XDView *view=[[XDView alloc]initWithFrame:[UIScreen mainScreen].bounds];
view.backgroundColor=[UIColor whiteColor];
[self.view addSubview:view];
}
@end
自定義圖層繪圖.png
