什么是CAShapeLayer
CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层CALayer的子类。你指定诸如颜色和线宽等属性，用CGPath来定义想要绘制的图形，最后CAShapeLayer就自动渲染出来了。
当然，你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径，相比直下，使用CAShapeLayer有以下一些优点：
-
渲染快速。
CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。 -
高效使用内存。一个
CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。 -
不会被图层边界剪裁掉。一个
CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。 -
不会出现像素化。当你给
CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。
简单实用
1 . 绘制原型进度条
进度条
//创建CAShapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
//设置动画开始点和结束点(不需要动画可忽略)
shapeLayer.strokeEnd = 0.7f;
shapeLayer.strokeStart = 0.1f;
//利用oc的 UIBezierPath 方法创建路径
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:_demoView.bounds];
//赋值路径给layer
shapeLayer.path = path.CGPath;
//个性化设置
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
//添加shapeLayer到view的layer
[_demoView.layer addSublayer:shapeLayer];
//添加动画
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = @(0.0);
pathAnima.toValue = @(1.0);
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
2 . 绘制折线图
折线图
//坐标点数组
NSArray *pointArray = @[[NSValue valueWithCGPoint:CGPointMake(110, 130)],
[NSValue valueWithCGPoint:CGPointMake(140, 220)],
[NSValue valueWithCGPoint:CGPointMake(170, 150)],
[NSValue valueWithCGPoint:CGPointMake(230, 110)],
[NSValue valueWithCGPoint:CGPointMake(270, 180)]];
//创建
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeEnd = 0.7f;
shapeLayer.strokeStart = 0.1f;
//创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:[pointArray.firstObject CGPointValue]];
for (int i = 0; i < pointArray.count; i++)
{
if (i) [path addLineToPoint:[pointArray[i] CGPointValue]];
}
//赋值路径
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:shapeLayer];
//添加动画
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = @(0.0);
pathAnima.toValue = @(1.0);
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
基于项目作的封装
因为项目有用到很多需要绘制图形的地方，比如分时线、k线、饼状图等等。于是对CAShapeLayer进行了简单的封装，便于方便的绘图。
工具类的声明和实现
声明
//
// UPShapeLayer.h
// UPBaseUI
//
// Created by Jimmy on 17/4/24.
// Copyright © 2017年 UpChina. All rights reserved.
//
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#define UPShapeLayerDefaultDuration 0.35
/**
基于CALayer的绘图工具
*/
@interface UPShapeLayer : CAShapeLayer
@property (nonatomic, strong) UIBezierPath *bezierPath;
@property (nonatomic, assign) BOOL animate;
+ (instancetype)shapeLayer;
/**
画折线的方法
@param pointArray 折线位置数组
@param strokeColor 折线颜色
@param lineWidth 线宽
*/
- (void)drawLineWithPointArray:(NSArray *)pointArray strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth;
/**
画直方图的方法
@param pointsArray 直方图坐标数组(每一条直方图包含起始点和结束点) NSArray<NSArray<startPoint,endPoint> *> *)
@param strokeColor 直方图颜色
@param lineWidth 线宽
*/
- (void)drawHistogramWithPointsArray:(NSArray<NSArray *> *)pointsArray strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth;
/**
画圆的方法
@param center 圆中心点
@param radius 圆半径
@param startAngle 起始角度
@param endAngle 结束角度
@param clockwise 绘图方向
@param strokeColor 笔划颜色
@param lineWidth 线宽
*/
- (void)drawArcWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth;
@end
实现
//
// UPShapeLayer.m
// UPBaseUI
//
// Created by Jimmy on 17/4/24.
// Copyright © 2017年 UpChina. All rights reserved.
//
#import "UPShapeLayer.h"
@implementation UPShapeLayer
+ (instancetype)shapeLayer
{
return [[self alloc] init];
}
- (instancetype)init
{
if (self = [super init])
{
self.fillColor = nil;
[self setupViews];
}
return self;
}
/**
初始化
*/
- (void)setupViews
{
}
- (void)drawLineWithPointArray:(NSArray *)pointArray strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint firstPoint = [pointArray.firstObject CGPointValue];
[path moveToPoint:firstPoint];
for (int i = 1; i < pointArray.count; i++)
{
CGPoint point = [pointArray[i] CGPointValue];
[path addLineToPoint:point];
}
self.strokeColor = strokeColor.CGColor;
self.lineWidth = lineWidth;
self.bezierPath = path;
}
- (void)drawHistogramWithPointsArray:(NSArray<NSArray *> *)pointsArray strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth
{
self.strokeColor = strokeColor.CGColor;
self.lineWidth = lineWidth;
UIBezierPath *path = [UIBezierPath bezierPath];
[pointsArray enumerateObjectsUsingBlock:^(NSArray * points, NSUInteger idx, BOOL * _Nonnull stop) {
[path moveToPoint:[points.firstObject CGPointValue]];
[path addLineToPoint:[points.lastObject CGPointValue]];
}];
self.bezierPath = path;
}
- (void)drawArcWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise strokeColor:(UIColor *)strokeColor lineWidth:(CGFloat)lineWidth
{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:clockwise];
self.strokeColor = strokeColor.CGColor;
self.lineWidth = lineWidth;
self.bezierPath = path;
}
#pragma mark - SETTER & GETTER
- (void)setBezierPath:(UIBezierPath *)bezierPath
{
_bezierPath = bezierPath;
self.path = bezierPath.CGPath;
}
- (void)setAnimate:(BOOL)animate
{
_animate = animate;
if (animate = YES)
{
// 创建Animation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0.0);
animation.toValue = @(1.0);
//
animation.duration = UPShapeLayerDefaultDuration;
// 设置layer的animation
[self addAnimation:animation forKey:@"ani"];
self.strokeEnd = 1;
}
else
{
[self removeAllAnimations];
}
}
@end
使用
//
// ViewController.m
// test
//
// Created by Jimmy on 17/4/27.
// Copyright © 2017年 upChina. All rights reserved.
//
#import "ViewController.h"
#import "UPShapeLayer.h"
@interface ViewController ()
@property (nonatomic, strong) UPShapeLayer *shapeLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
//坐标点数组
NSArray *pointArray = @[[NSValue valueWithCGPoint:CGPointMake(110, 130)],
[NSValue valueWithCGPoint:CGPointMake(140, 220)],
[NSValue valueWithCGPoint:CGPointMake(170, 150)],
[NSValue valueWithCGPoint:CGPointMake(230, 110)],
[NSValue valueWithCGPoint:CGPointMake(270, 180)]];
[self.shapeLayer drawLineWithPointArray:pointArray strokeColor:[UIColor grayColor] lineWidth:2];
}
- (UPShapeLayer *)shapeLayer
{
if (!_shapeLayer)
{
_shapeLayer = [UPShapeLayer shapeLayer];
//只需要一次动画的话在初始化方法设置
_shapeLayer.animate = YES;
[self.view.layer addSublayer:_shapeLayer];
}
return _shapeLayer;
}
@end
这样就能用简单的接口实现最高效的绘图，目前这个工具类还在继续完善，希望大家有需求都可以提出来，大家共同进步。
