iOS图形绘制 UIBezierPath 绘制折线图、柱状图、饼形图

最新推荐文章于 2024-01-25 10:21:34 发布
最新推荐文章于 2024-01-25 10:21:34 发布
阅读量1.5k 收藏
点赞数
分类专栏： ios 文章标签： ios 折线图 柱状图 饼形图 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012661893/article/details/55048845
版权

iOS图形绘制 UIBezierPath 绘制折线图、柱状图以及饼形图（感谢Mr_Wendao，如果想查看饼形图源码请点击连接，饼形图我借鉴了Mr_Wendao的代码学习，再次感谢）。

先看一下代码的效果图 如下图
这里写图片描述

下面是主要代码

在初始化的时候设置绘图类型
typedef NS_ENUM(NSInteger) {
    LineChart_Type = 0,//折线图
    PieChart_Type = 1, //饼形图
    BarChart_Type = 2  //柱状图
}DrawViewType;

@interface AXDrawView : UIView<CAAnimationDelegate>

//自定义初始化方法
-(id)initWithFrame:(CGRect)frame type:(DrawViewType)type;

//绘图类型
@property(nonatomic ,assign)DrawViewType drawType;
//折线图数据数组
@property(nonatomic ,strong)NSMutableArray *arrayPoint;
//折线图开始点
@property(nonatomic ,assign)CGPoint startPint;
//折线图结束点
@property(nonatomic ,assign)CGPoint endPoint;

//饼形图颜色数据
@property(nonatomic ,strong)NSArray *colorItems;

@end

下面是实现代码

//图标上下左右边距
#define UP    10.0
#define BELOW 30.0
#define LEFT  30.0
#define RIGHT 10.0

自定义初始化方法
-(id)initWithFrame:(CGRect)frame type:(DrawViewType)type
{
    self = [super initWithFrame:frame];
    if (self) {
        if (!_scaleArray) {
            _scaleArray = [[NSArray alloc] initWithObjects:@"iOS",@"Java",@"PHP",@"HTML",@"Android",@"C语言",@"C++", nil];
        }
        _drawType = type;
        switch (_drawType) {
            case LineChart_Type:
            {
                UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPressAction:)];
                [self addGestureRecognizer:longPressGesture];
            }
                break;
            case PieChart_Type:
            {

            }
                break;
            case BarChart_Type:
            {
                UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPressAction:)];
                [self addGestureRecognizer:longPressGesture];
            }
                break;
            default:
                break;
        }
    }
    return self;
}

重写drawRect方法
- (void)drawRect:(CGRect)rect {
    // Drawing code
    [super drawRect:rect];

    if (_drawType != PieChart_Type) {
        [self drawScale];
    }

    switch (_drawType) {
        case LineChart_Type:
        {
            [self drawLineChart];
        }
            break;
        case PieChart_Type:
        {
            [self pieChartAction];
        }
            break;
        case BarChart_Type:
        {
            [self drawBarChart];
        }
            break;
        default:
            break;
    }
}

折线图以及柱状图需要坐标刻度，在绘制这两种图标是需要调用一下方法
//绘制刻度
-(void)drawScale
{
    UIBezierPath *scalePath = [UIBezierPath bezierPath];
    [scalePath moveToPoint:CGPointMake(30, 10)];
    [scalePath addLineToPoint:CGPointMake(30, self.frame.size.height - BELOW)];
    [scalePath moveToPoint:CGPointMake(30, self.frame.size.height - BELOW)];
    [scalePath addLineToPoint:CGPointMake(self.frame.size.width - RIGHT, self.frame.size.height - BELOW)];
    CGFloat scaleY = (self.frame.size.height - UP - BELOW) / 10.0;
    for (int i = 0; i < 10; i++) {
        [scalePath moveToPoint:CGPointMake(LEFT, (self.frame.size.height - BELOW) - (scaleY * i))];
        [scalePath addLineToPoint:CGPointMake(LEFT + 2, (self.frame.size.height - BELOW) - (scaleY * i))];
        UILabel *yLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 30, 20)];
        yLabel.textColor = [UIColor redColor];
        yLabel.font = [UIFont systemFontOfSize:10];
        yLabel.textAlignment = NSTextAlignmentCenter;
        yLabel.text = [NSString stringWithFormat:@"%d",i * 10];
        yLabel.center = CGPointMake(LEFT / 2, (self.frame.size.height - BELOW) - (scaleY * i));
        [self addSubview:yLabel];
    }
    CGFloat scaleX = (self.frame.size.width - LEFT - RIGHT) / 8.0;
    for (int i = 0; i < 8; i++) {
        [scalePath moveToPoint:CGPointMake((LEFT + scaleX * i), self.frame.size.height - BELOW)];
        [scalePath addLineToPoint:CGPointMake((LEFT + scaleX * i), self.frame.size.height - BELOW - 2)];
        if (i > 0) {
            UILabel *xLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scaleX, 20)];
            xLabel.textColor = [UIColor redColor];
            xLabel.font = [UIFont systemFontOfSize:10];
            xLabel.textAlignment = NSTextAlignmentCenter;
            xLabel.text = [_scaleArray objectAtIndex:i - 1];
            xLabel.center = CGPointMake((LEFT + scaleX * i), self.frame.size.height - BELOW / 2);
            [self addSubview:xLabel];
        }
    }

    CAShapeLayer *shaperLayer = [CAShapeLayer layer];
    shaperLayer.path = scalePath.CGPath;
    shaperLayer.lineWidth = 1.0;
    shaperLayer.lineCap = kCALineCapRound;
    shaperLayer.lineJoin = kCALineJoinRound;
    shaperLayer.strokeColor = [UIColor grayColor].CGColor;
    [self.layer addSublayer:shaperLayer];
}

当获取到数据，需要对数据进行处理主要代码如下
//重写set方法，图标数据信息信息
-(void)setArrayPoint:(NSArray *)arrayPoint
{
    if (!_arrayPoint) {
        _arrayPoint = [NSMutableArray array];
    }
    if (_drawType == LineChart_Type) {
        [_arrayPoint addObjectsFromArray:[self disposePointArray:arrayPoint]];
        _startPint = CGPointFromString([_arrayPoint objectAtIndex:0]);
        [self drawAction];
    }else if (_drawType == PieChart_Type){
        [_arrayPoint addObjectsFromArray:[self disposePointArray:arrayPoint]];
        [self setNeedsDisplay];
    }else if (_drawType == BarChart_Type){
        [_arrayPoint addObjectsFromArray:[self disposePointArray:arrayPoint]];
        _startPint = CGPointMake((self.frame.size.width - LEFT - RIGHT) / 8 + LEFT, self.frame.size.height - BELOW);
        _endPoint = CGPointFromString([_arrayPoint objectAtIndex:0]);
        [self setNeedsDisplay];
    }
}

//处理数据获取绘图点
-(NSMutableArray *)disposePointArray:(NSArray *)array
{
    if (_drawType == PieChart_Type) {
        NSMutableArray *points = [NSMutableArray array];
        CGFloat allFloat = 0.0;
        for (NSString *string in array) {
            allFloat = allFloat + [string floatValue];
        }
        for (NSString *string in array) {
            CGFloat f = [string floatValue] / allFloat;
            [points addObject:[NSString stringWithFormat:@"%.2f",f]];
        }
        return points;
    }else{
        NSMutableArray *points = [NSMutableArray array];
        for (int i = 0; i < array.count; i++) {
            NSString *string = [array objectAtIndex:i];
            CGFloat y = (self.frame.size.height - BELOW) - ([string floatValue] / 100.0 * (self.frame.size.height - BELOW - UP));
            CGPoint point = CGPointMake(LEFT + ((self.frame.size.width - LEFT - RIGHT) / 8.0 * (i + 1)), y);
            [points addObject:NSStringFromCGPoint(point)];
        }
        return points;
    }
}

//获取开始、结束点
-(void)drawAction
{
    _number++;
    if (_drawType == LineChart_Type) {
        if (_number < _arrayPoint.count) {
            NSString *pointStr = [_arrayPoint objectAtIndex:_number];
            _endPoint = CGPointFromString(pointStr);
            [self setNeedsDisplay];
        }
    }else if (_drawType == BarChart_Type){
        if (_number < _arrayPoint.count) {
            CGFloat scaleX = (self.frame.size.width - LEFT - RIGHT) / 8.0;
            _startPint = CGPointMake((self.frame.size.width - LEFT - RIGHT) / 8 + LEFT + scaleX * _number, self.frame.size.height - BELOW);
            NSString *pointStr = [_arrayPoint objectAtIndex:_number];
            _endPoint = CGPointFromString(pointStr);
            [self setNeedsDisplay];
        }
    }
}

下面的代码是绘图的主要代码

折线图
-(void)drawLineChart
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    //绘制圆点
    [path addArcWithCenter:_startPint radius:3.0 startAngle:0.0 endAngle:M_PI*2 clockwise:YES];
    //设置描边宽度（为了让描边看上去更清楚）
    [path setLineWidth:3.0];
    //描边和填充
    [path stroke];
    [path fill];
    //绘制折线图
    [path moveToPoint:_startPint];
    [path addLineToPoint:_endPoint];
    path.lineJoinStyle = kCGLineJoinRound;
    //设置layer层
    CAShapeLayer *shaperLayer = [CAShapeLayer layer];
    shaperLayer.path = path.CGPath;
    shaperLayer.lineWidth = 2.0;
    shaperLayer.lineCap = kCALineCapRound;
    shaperLayer.lineJoin = kCALineJoinRound;
    shaperLayer.strokeColor = [UIColor whiteColor].CGColor;
    shaperLayer.fillColor = [UIColor whiteColor].CGColor;

    //设置动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
    anim.delegate = self;
    anim.fromValue = @0;
    anim.toValue = @1;
    anim.duration = 0.1;

    [shaperLayer addAnimation:anim forKey:NSStringFromSelector(@selector(strokeEnd))];
    [self.layer addSublayer:shaperLayer];
    //将结束点设置为起始点
    _startPint = _endPoint;
    //绘制最后一个点
    if (_number == _arrayPoint.count - 1) {
        UIBezierPath *paths = [UIBezierPath bezierPath];
        // 添加圆到path
        [paths addArcWithCenter:_startPint radius:3.0 startAngle:0.0 endAngle:M_PI*2 clockwise:YES];
        // 设置描边宽度（为了让描边看上去更清楚）
        [paths setLineWidth:3.0];
        // 描边和填充
        [paths stroke];
        [paths fill];

        CAShapeLayer *shaperLayer = [CAShapeLayer layer];
        shaperLayer.path = paths.CGPath;
        shaperLayer.lineWidth = 2.0;
        shaperLayer.strokeColor = [UIColor whiteColor].CGColor;
        shaperLayer.fillColor = [UIColor whiteColor].CGColor;

        CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
        anim.delegate = self;
        anim.fromValue = @0;
        anim.toValue = @1;
        anim.duration = 0.5;

        [shaperLayer addAnimation:anim forKey:NSStringFromSelector(@selector(strokeEnd))];
        [self.layer addSublayer:shaperLayer];
    }
}

柱状图
//绘制柱状图
-(void)drawBarChart
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    //绘制折线图
    [path moveToPoint:_startPint];
    [path addLineToPoint:_endPoint];
    path.lineJoinStyle = kCGLineJoinRound;
    //设置layer层
    CAShapeLayer *shaperLayer = [CAShapeLayer layer];
    shaperLayer.path = path.CGPath;
    CGFloat scaleX = (self.frame.size.width - LEFT - RIGHT) / 8.0;
    shaperLayer.lineWidth = scaleX;
    shaperLayer.strokeColor = kPieRandColor.CGColor;
    //shaperLayer.fillColor = kPieRandColor.CGColor;
    //设置动画
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];
    anim.delegate = self;
    anim.fromValue = @0;
    anim.toValue = @1;
    anim.duration = 0.1;

    [shaperLayer addAnimation:anim forKey:NSStringFromSelector(@selector(strokeEnd))];
    [self.layer addSublayer:shaperLayer];
}

这里监听绘图动画结束，折线图以及柱状图实现绘制动画
#pragma mark CAAnimationDelegate 监听动画结束
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (_drawType == LineChart_Type) {
        if (flag) {
            [self drawAction];
        }
    }else if (_drawType == BarChart_Type){
        if (flag) {
            [self drawAction];
        }
    }
}

以上就是绘制图标的主要代码，希望对大家有帮助，如果大家有更好的思路或者更简洁的方法，希望大家多多指教。下面是源码连接
DEMO源码连接

问傲雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 绘制不规则图形，并且添加点击事件 的两种方法
04-27
iOS 绘制不规则图形，并且添加点击事件 的两种方法
iOS绘制折线图、树状图等图形
dangpf520的博客
10-20 3545
项目中需要将数据以折线的形式展示出来，于是乎在网上找了一大堆相关资料，最后觉得还是PNChart这个第三方库可以满足我的需求，并且不是很有难度 1、首先下载PNChart（俩种方法，cocoapods和直接下载导入） pod search PNChart之后我们直接下载最新的0.8.8版本就可以， 2、将PNChart.h和PNChartDelegate.h头文件引入需要用的类里面 3、直接
ios 绘制线框_iOS使用Charts框架绘制折线图
weixin_39724441的博客
12-19 501
首先先看一下效果:折线图一、 初始化折线图对象创建一个折线图的用到的类是LineChartView.h, 代码如下:self.LineChartView = [[LineChartView alloc] init];self.LineChartView.delegate = self;//设置代理[self.view addSubview:self.LineChartView];[self.Lin...
UIBezierPath绘制柱状图、折线图和饼状图
小天空的博客
01-24 378
最近用UIBezierPath绘制了一些图形，像柱状图、折线图和饼状图之类的图形。先上效果图：   基本原理： 利用UIBezierPath能够创建基于矢量路径的特性来绘制图形的路径，然后将UIBezierPath和CAShapeLayer建立关系，让后者在前者提供的路径中进行渲染，最后生成我们所需的各种图形。而且可以给CAShapeLayer添加动画特效。 一、柱状图 实现思路： ...
iOS开发（OC）——折线图的绘制（带动画）
菜鸟历程
09-21 4999
新建一个DrawLine类继承UIView DrawLine.h代码 @property (nonatomic,strong)NSMutableArray *data;@property (nonatomic, strong) CAShapeLayer *lineChartLayer; @property (nonatomic, strong)UIBezierPath * path1; /** 渐变
[Cocoa]_[画直线、矩形、文字]
yepeng2014的专栏
10-13 4201
总结Cocoa下画直线、矩形、文字的方法，在界面开发种经常会遇到。 1.画直线，有两种方法。 （1）把直线看成是一个高度较小的的矩形 //(1)直线的本质是一个高度较小的矩形 NSRect rect5 = NSMakeRect(50, 70, 350, 5); NSBezierPath *path1 = [NSBezierPath bezierPathWithRect
UIBezierPath类绘制几何图型 直线 折线 曲线 矩形 圆 弧 阴影等 Swift
kicinio的博客
08-29 1218
前言： iOS里进行几何图形绘制大体可分为三类，如下： 自定义UIView类，重写draw() 方法并调用UIBezierPath类相关方法 UIBezierPath类与CAShaperLayer类搭配 自定义UIView类，重写draw() 方法并调用UIGraphicsGetCurrentContext类相关方法 以上三种方法几乎可以看作独立的UIView类与Context结合的变体。UIBezierPath类实际上是对Context类的变体。如果不独立View，则须CAShaperLayer类结合
iOS使用Charts框架绘制—柱形图
最新发布
st646889325的博客
01-25 608
当选中一个柱形图后，在空白处双击，就可以取消选择，此时会回调此方法.首先需要先获取到barChartView的X轴，然后进行设置.通过labelCount属性设置Y轴要均分的数量.3.设置barChartView的X轴样式。4.设置barChartView的Y轴样式。5.设置barChartView的其它样式。2.barChartView的交互设置。
iOS绘图 - 自定义柱状图绘制
chinnyman的博客
04-07 5921
I. 创建 自定义柱状图类(UIView的子类) HistogramView.h #import <UIKit/UIKit.h>@interface HistogramView : UIView@end HistogramView.m #import "HistogramView.h"@implementation HistogramView- (void)drawRect:(CGRect)rect
使用CAShapeLayer与UIBezierPath画动态柱状图
阿道夫·二皮
09-22 1487
// // TextView.m // 练习 // // Created by 王文杰 on 16/9/20. // Copyright © 2016年 王文杰. All rights reserved. // #import "TextView.h" @implementation TextView // Only override drawRect: if you perfor
iOS中的折线图绘制
12-19
iOS折线图。重写drawRect，再用CGContextRef画线。主要是坐标点的转换。
IOS条形图、柱状图demo
02-19
一个非常不错IOS条形图、柱状图实例demo，封装的很好，使用很简单，可以直接使用
ios自定义折线图（带动画效果）
10-13
用法： //***************用法************* NSMutableArray *dataTitleArray=[[NSMutableArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9", nil]; NSMutableArray *dataArray=[[NSMutableArray alloc] initWithObjects:@"86",@"2",@"45",@"92",@"65",@"15",@"37",@"51",@"94",nil]; myLineChat *mylinechart=[[myLineChat alloc] initWithFrame:CGRectMake(10,150, 300, 300)]; mylinechart.backgroundColor=[UIColor clearColor]; mylinechart.titleArray=dataTitleArray; mylinechart.valueArray=dataArray; mylinechart.lineChartBgColor=[UIColor whiteColor]; mylinechart.lineTitleWidth=30; mylinechart.lineBetweenWidth=30; mylinechart.lineWidth=2; mylinechart.lineHeight=150; mylinechart.lineColor=[UIColor purpleColor]; [mylinechart initWithView]; [self.view addSubview:mylinechart]; 参数说明： CAShapeLayer *lineChart：折线线条 UIColor *lineChartBgColor：折线图背景颜色 NSMutableArray *valueArray：折线图值数组 NSMutableArray *titleArray：折线图标题数组（x轴标题） float lineWith，lineTitleWidth，lineBetweenWidth，lineHeight：分别为折线图折线的宽度、标题宽度、折线间隔宽度、折线高度。 UIColor *lineColor：折线图折线颜色 参数方法： -(void)initWithView; 必选方法，在设置完所有属性后调用。
iOS使用Charts框架绘制折线图
08-31
本文主要介绍了iOS使用Charts框架绘制折线图的方法，具有一定的参考价值，下面跟着小编一起来看下吧
iOS绘制折线统计图(可多条)
10-23
在iphone上绘制折线统计图，可支持多条同时绘制，一步创建，非常方便，可拓展性强
iOS开发 图表Chart 折线图、柱状图
11-04
iOS开发 图表Chart 折线图、柱状图
ios开发一个好看的折线图
08-28
本文文章教给大家在IOS开发中制作一个高颜值好看的折线图，用处非常广泛，有兴趣的朋友参考下吧。
iOS UITextField自动换行
热门推荐
u012661893的专栏
08-11 4万+
在网上查了一下，UITextField没有自动换行的代码，所以呢，我就用了一种相对 liu mang的方式实现了一下，但是也有不足，光标无法移动，（其实根本就没有光标。。。(⊙﹏⊙)b） 如果大家有什么好的方法希望大家多多指教。。。 废话不多说，代码如下：主要代码#import <UIKit/UIKit.h>@interface CustomTextField : UITextField<UIT
iOS获取当前时间 NSDate（NSCalendar）获取当前时间
u012661893的专栏
02-12 5806
iOS获取当前时间 NSDate（NSCalendar）获取当前时间 新人一枚，如果大家有更好的方法，请大家多多指教。。。 通过NSDate获取当前时间，并格式化输出，以及将已有的字符串（如：@”2015-02-12 13:23:20”）转换为NSDate /* 获取争取的当地时间 */
uni-app canvas绘制雷达图
09-11
Uni-app是一种支持跨平台开发的框架，可以同时在Web、iOS、Android以及各种小程序平台上运行。而Canvas是HTML5提供的功能强大的绘图API。因此，在uni-app中使用Canvas绘制雷达图是可行的。 常用的绘图库uCharts是一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值