CALayer简介
CALayer主要是展示内容和动画操作，CALayer不包含在UIKit中，不能响应事件，由于CALayer在设计之初就考虑它的动画操作功能，CALayer很多属性在修改时都能形成动画效果，这种属性称为“隐式动画属性”。对于UIView的根图层而言属性的修改并不形成动画效果，因为很多情况下根图层更多的充当容器的做用，如果它的属性变动形成动画效果会直接影响子图层。另外，UIView的根图层创建工作完全由iOS负责完成，无法重新创建，但是可以往根图层中添加子图层或移除子图层。
CALayer属性：
| 属性 | 说明 | 是否支持隐式动画 |
|---|---|---|
| anchorPoint | 和中心点position重合的一个点，称为“锚点”，锚点的描述是相对于x、y位置比例而言的默认在图像中心点(0.5,0.5)的位置 | 是 |
| backgroundColor | 图层背景颜色 | 是 |
| borderColor | 边框颜色 | 是 |
| borderWidth | 边框宽度 | 是 |
| bounds | 图层大小 | 是 |
| contents | 图层显示内容，例如可以将图片作为图层内容显示 | 是 |
| contentsRect | 图层显示内容的大小和位置 | 是 |
| cornerRadius | 圆角半径 | 是 |
| doubleSided | 图层背面是否显示，默认为YES | 否 |
| frame | 图层大小和位置，不支持隐式动画，所以CALayer中很少使用frame，通常使用bounds和position代替 | 否 |
| hidden | 是否隐藏 | 是 |
| mask | 图层蒙版 | 是 |
| maskToBounds | 子图层是否剪切图层边界，默认为NO | 是 |
| opacity | 透明度 ，类似于UIView的alpha | 是 |
| position | 图层中心点位置，类似于UIView的center | 是 |
| shadowColor | 阴影颜色 | 是 |
| shadowOffset | 阴影偏移量 | 是 |
| shadowOpacity | 阴影透明度，注意默认为0，如果设置阴影必须设置此属性 | 是 |
| shadowPath | 阴影的形状 | 是 |
| shadowRadius | 阴影模糊半径 | 是 |
| sublayers | 子图层 | 是 |
| sublayerTransform | 子图层形变 | 是 |
| transform | 图层形变 | 是 |
-CALayer中透明度使用opacity而不是我们平常使用的alpha，中心点使用position而不是center </br>
-CALayer中很少使用frame属性,frame属性不支持动画，可以用bounds、position代替 </br>
-anchorPoint图层的锚点，范围在（01,01）表示在x、y轴的比例，这个点永远可以同position（中心点）重合，当图层中心点固定后，调整anchorPoint即可达到调整图层显示位置的作用（因为它永远和position重合）</br>
CALayer绘图
UIView中drawRect方法绘制图形、图像，本质是在图层中绘制。而这里介绍如何直接在图层中绘制。在图层中绘图基本没有什么区别，只是drawRect方法是由UIKit组件进行调用，因此可以调用一些UIKit封装的方法进行绘图，而直接绘制到图层的方法只能用原生的Core Graphics方法绘制。
图层绘图有两种方法，不管使用哪种方法都要调用setNeedsDisplay(UIView和CALayer都有setNeedsDisplay方法, 而这里调用的是图层的方法)</br>
1、定义图层绘制
// 继承CALayer 实现方法
- (void)drawInContext:(CGContextRef)ctx {
}
2、图层代理绘制
// CALayerDelegate 代理方法
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
}
使用定义图层绘制
在自定义图层时，需要继承CALayer创建文件，在.m文件中实现-(void)drawInContext:(CGContextRef)ctx {}，显示图层中绘制的内容也要调用图层的setNeedDisplay方法，否则drawInContext方法将不会调用。
#import "MyCALayer.h"
#import <UIKit/UIKit.h>
@implementation MyCALayer
- (void)drawInContext:(CGContextRef)ctx {
CGContextSaveGState(ctx);
//图形上下文形变，解决图片倒立的问题
CGContextScaleCTM(ctx, 1, -1);
CGContextTranslateCTM(ctx, 0, -100);
UIImage *image = [UIImage imageNamed:@"vehicleResource.png"];
//注意这个位置是相对于图层而言的不是屏幕
CGContextDrawImage(ctx, CGRectMake(0, 0, 100, 100), image.CGImage);
CGContextRestoreGState(ctx);
}
@end
#import "ViewController.h"
#import "MyCALayer.h"
@interface ViewController ()
@property (nonatomic, strong) MyCALayer *myCALayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
self.myCALayer = [[MyCALayer alloc] init];
self.myCALayer.bounds = CGRectMake(0, 0, 100, 100);
self.myCALayer.position = CGPointMake(50, 50);
[showView.layer addSublayer:self.myCALayer];
showView.backgroundColor = [UIColor redColor];
[self.view addSubview:showView];
[self.myCALayer setNeedsDisplay];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
图2.png
使用图层代理绘制
首先设置图层代理，实现代理协议方法- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx，设置完代理后必须要调用图层的setNeedDisplay方法，否则绘制的内容无法显示。
#import "ViewController.h"
@interface ViewController () <CALayerDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
// 设置背景
showView.layer.backgroundColor = [UIColor redColor].CGColor;
//注意仅仅设置圆角，对于图形而言可以正常显示，但是对于图层中绘制的图片无法正确显示
//如果想要正确显示则必须设置masksToBounds=YES，剪切子图层
showView.layer.cornerRadius = 50;
showView.layer.masksToBounds = YES;
//阴影效果无法和masksToBounds同时使用，因为masksToBounds的目的就是剪切外边框，
//设置阴影 颜色 偏移量 透明度
// showView.layer.shadowColor = [UIColor grayColor].CGColor;
// showView.layer.shadowOffset = CGSizeMake(2, 2);
// showView.layer.shadowOpacity = 1;
//设置边框 颜色 宽度
showView.layer.borderColor = [UIColor whiteColor].CGColor;
showView.layer.borderWidth = 2;
//设置图层代理
showView.layer.delegate = self;
[self.view addSubview:showView];
#warning 必须调用 不然无法绘制
[showView.layer setNeedsDisplay];
}
/**
绘制图形、图像到图层，注意参数中的ctx是图层的图形上下文，其中绘图位置也是相对图层而言的
@param layer 图层
@param ctx 图形上下文
*/
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
CGContextSaveGState(ctx);
//图形上下文形变，解决图片倒立的问题
CGContextScaleCTM(ctx, 1, -1);
CGContextTranslateCTM(ctx, 0, -100);
UIImage *image = [UIImage imageNamed:@"vehicleResource.png"];
//注意这个位置是相对于图层而言的不是屏幕
CGContextDrawImage(ctx, CGRectMake(0, 0, 100, 100), image.CGImage);
CGContextRestoreGState(ctx);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
图1.png
使用代理方法绘制图形、图像时，通过- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx方法获取图形上下文，图形上下文指的当前图层的上下文，绘图中的位置是相对于当前图层而言的。
在上述代码中masksToBounds不设置是无法显示圆形效果，但是对于其他图形没有这个限制，是因为绘制一张图片到图层上的时候会重新创建一个图层添加到当前图层，设置圆角的图层是底图层，子图层还是矩形，只有设置了masksToBounds为YES让子图层按底图层剪切才能显示圆角效果。
如果我们同时需要圆形图像又要阴影效果，我们只需要在添加一个图层就能完美解决，只要把阴影图层放在绘制图形的下一层就好。我们在使用Core Graphics绘制图片时会倒立显示，对图层的图形上下文进行了反转。其实可以控制图层直接旋转而不用借助于图形上下文的形变操作，只需要设置图层的transform属性即可。需要注意的是transform是CATransform3D类型，形变可以在三个维度上进行。
形变对于动画有特殊的意义。在动画开发中形变往往不是直接设置transform，而是通过keyPath进行设置。这种方法设置形变的本质和前面没有区别，只是利用了KVC可以动态修改其属性值而已，但是这种方式在动画中确实很常用的，因为它可以很方便的将几种形变组合到一起使用。同样是解决动画旋转问题，只要将前面的旋转代码改为下面的代码即可：
[layer setValue:@M_PI forKeyPath:@"transform.rotation.x"];
当然，通过key path设置形变参数就需要了解有哪些key path可以设置.
网友评论