CAShapeLayer绘图 及其 简单封装

什么是CAShapeLayer

CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层CALayer的子类。你指定诸如颜色和线宽等属性,用CGPath来定义想要绘制的图形,最后CAShapeLayer就自动渲染出来了。
当然,你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径,相比直下,使用CAShapeLayer有以下一些优点:

  1. 渲染快速CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。
  2. 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。
  3. 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
  4. 不会出现像素化。当你给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

这样就能用简单的接口实现最高效的绘图,目前这个工具类还在继续完善,希望大家有需求都可以提出来,大家共同进步。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容