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
网友评论