CoreAnimation实现一个折线表

将折现表封装到一个view里，暴露给使用者的只有一个传入数据的方法。

//

//  ChartLine.h

//  BoxingChampion

//功能：根据传入的数组，绘制折线图  注意 其frame的宽 不能小于20，高不能小于50

//  Created by on 14-12-29.

//  Copyright (c) 2014年 . All rights reserved.

//

#import <UIKit/UIKit.h>

@interface ChartLine : UIView

/*

    功能：绘制折线图

    参数：折线图的数据，如@[@1,@2]

    返回值：无

 */

-(void)setData:(NSArray *)array_data;

@end

在.m文件中，重写-(id)initWithFrame:(CGRect)frame
方法。

一个折线表，我们可以将它分为三个图层来表示：1、坐标轴图层。2、背景色图层。3、数据折线图层。其中坐标图层应设定贝塞尔曲线，根据路径绘制坐标轴。

        // 添加坐标轴曲线路径

        UIBezierPath *path_coordinate=[[UIBezierPath alloc] init];

        [path_coordinate moveToPoint:CGPointMake(8, 12)]; //带有箭头状的坐标轴

        [path_coordinate addLineToPoint:CGPointMake(10, 10)];

        [path_coordinate addLineToPoint:CGPointMake(12, 12)];

        [path_coordinate addLineToPoint:CGPointMake(10, 10)];

        [path_coordinate addLineToPoint:CGPointMake(10, self.frame.size.height-10)];

        [path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-10, self.frame.size.height-10)];

        [path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-12, self.frame.size.height-12)];

        [path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-10, self.frame.size.height-10)];

        [path_coordinate addLineToPoint:CGPointMake(self.frame.size.width-12, self.frame.size.height-8)];

        //坐标轴路径图层

        CAShapeLayer *layer_coordinate=[CAShapeLayer layer];

        layer_coordinate.frame=

                            CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height);

        layer_coordinate.lineCap=kCALineCapButt;

        layer_coordinate.lineWidth=2;

        layer_coordinate.fillColor=[[UIColor clearColor] CGColor];

        layer_coordinate.strokeColor=[[UIColor orangeColor] CGColor];

        layer_coordinate.strokeEnd=1;

        layer_coordinate.path=[path_coordinate CGPath];

背景色图层应有渐变色效果，且背景色都在坐标轴所包围的象限内

 //淡色背景图层

        CAGradientLayer *layer_background=[CAGradientLayer layer];

        layer_background.frame=CGRectMake(11, 13, self.layer.frame.size.width-22,self.layer.frame.size.height-24);//保证在第一象限

        [layer_background setColors:[NSArray arrayWithObjects:

                                     (id)[[UIColor whiteColor] CGColor],

                                     [[UIColor colorWithRed:1.000 green:0.827 blue:0.000 alpha:1.000] CGColor] ,nil]];

        layer_background.locations=@[@0.1];//从0.1处开始渐变  location 坐标是左上角（0，0），在右下角（1，1） 使用时应注意

        layer_background.startPoint=CGPointMake(0,0);

        layer_background.endPoint=CGPointMake(0, 1);

将两个图层添加到视图图层上

      //添加图层

        [self.layer addSublayer:layer_coordinate];

        [self.layer addSublayer:layer_background];

最后当用户调用setData:方法时，绘制折线图

-(void)setData:(NSArray *)array_data

{

    //获取输入元素的个数

    NSInteger i_dataCount=[array_data count];

    //取出元素中得最大值和最小值

    CGFloat f_maxData=[[array_data objectAtIndex:0] floatValue];

    CGFloat f_minData=[[array_data objectAtIndex:0]floatValue];

    for (NSInteger i=0;i<i_dataCount; i++)

    {

        if (f_maxData<[[array_data objectAtIndex:i] floatValue])

        {

            f_maxData=[[array_data objectAtIndex:i] floatValue];

        }

        if (f_minData>[[array_data objectAtIndex:i] floatValue])

        {

            f_minData=[[array_data objectAtIndex:i] floatValue];

        }

    }

    //计算每个数据之间横坐标的间隔

    CGFloat x_perDataPointInterval=(self.layer.frame.size.width-20)/(i_dataCount+1);

    if (0==(f_maxData-f_minData))//防止分母为零

    {

        NSLog(@"Y轴逻辑最大值和逻辑最小值相同");

        return;

    }

    //计算每个数据1 占据几个像素点

    CGFloat y_perPointInterval=(self.layer.frame.size.height-50)/(f_maxData-f_minData);

    //折线路径

    UIBezierPath *path_data=[[UIBezierPath alloc] init];

    //第一个元素起始点的坐标

    [path_data moveToPoint:CGPointMake(10+x_perDataPointInterval,

                                       self.layer.frame.size.height-(20+([[array_data objectAtIndex:0] floatValue]-f_minData)*y_perPointInterval))];

    for (NSInteger i=0; i<i_dataCount-1; i++)

    {

        //每个元素在视图中的坐标

        [path_data addLineToPoint:CGPointMake(10+x_perDataPointInterval*(i+2),

                                             self.layer.frame.size.height-(20+([[array_data objectAtIndex:(i+1)] floatValue]-f_minData)*y_perPointInterval))];

    }

    //折线图层

    CAShapeLayer *layer_data=[CAShapeLayer layer];

    layer_data.frame=CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height);

    layer_data.lineCap=kCALineCapRound;

    layer_data.lineWidth=1;

    layer_data.fillColor=[[UIColor clearColor] CGColor];

    layer_data.strokeColor=[[UIColor redColor] CGColor];

    layer_data.strokeEnd=1;

    layer_data.path=[path_data CGPath];

    [self.layer addSublayer:layer_data];

}

巴特西

CoreAnimation实现一个折线表

最新文章

热门文章