CALayer绘制折线图

来源：互联网发布：淘宝号信誉查询网址编辑：程序博客网时间：2024/05/20 14:42

calyer现在逐渐熟练，折线图的绘制有好几种，最常见的是CGContextRef和CALayer。

CGContextRef跟CALayer流程差不多，今天就简单把折线图的流程总结下。

第一步：画出坐标轴（没有箭头）。效果图如下：
坐标轴效果

-(void)drawAxes{    //起点    CGPoint startP = CGPointMake(20, 80);    //坐标轴的拐点    CGPoint axesP = CGPointMake(20, self.view.frame.size.height - 80);    //终点    CGPoint endP = CGPointMake(self.view.frame.size.width - 20, self.view.frame.size.height - 80);}

第二步：给坐标轴X、Y轴设定单位，相当于刻度
效果图如下：
刻度单位

-(void)drawLineX{    NSInteger month = 12;    CGFloat oneth = (self.view.frame.size.width - 40) / 12;    for (NSInteger i=0; i<month; i++) {        UILabel *monthLable = [UILabel new];        monthLable.frame = CGRectMake(20+oneth*i, self.view.frame.size.height - 75, oneth, 20);        monthLable.font = [UIFont fontWithName:@"Arial Rounded MT Bold" size:8];        monthLable.backgroundColor = [UIColor clearColor];        monthLable.textColor = [UIColor blackColor];        monthLable.text = [NSString stringWithFormat:@"%ld月",i+1];        monthLable.transform = CGAffineTransformMakeRotation(M_PI * 0.3);        [self.view addSubview:monthLable];    }}-(void)drawLineY{    NSInteger month = 20;    CGFloat oneth = (self.view.frame.size.height - 160) / 20;    for (NSInteger i=month; i>0; i--) {        UILabel *degreeLable = [UILabel new];        degreeLable.frame = CGRectMake(0,70 + (oneth *i), 20, oneth);        degreeLable.font = [UIFont fontWithName:@"MarkerFelt-Thin" size:8];        degreeLable.backgroundColor = [UIColor clearColor];        degreeLable.textAlignment = NSTextAlignmentCenter;        degreeLable.textColor = [UIColor blackColor];        degreeLable.numberOfLines = 0;        degreeLable.text = [NSString stringWithFormat:@"%ld度",(15-i)*3];        [self.view addSubview:degreeLable];    }}

第三步：绘画出坐标轴的背景(这一步纯粹是为了美观)；效果图如下：
背景颜色

-(void)makeUpgradedBedding{    CAGradientLayer *graditLayer = [CAGradientLayer layer];    graditLayer.frame = CGRectMake(23, 77, self.view.frame.size.width - 40, self.view.frame.size.height - 160);}

第四步：绘画出虚线：即每一个单位刻度的对应高度的虚线；效果图如下：
虚线刻度

-(void)makeUpDashLine{    NSInteger month = 19;    CGFloat oneth = (self.view.frame.size.height - 160) / 20;    for (NSInteger i=month; i>0; i--) {        //起点        CGPoint startP = CGPointMake(22, 80 + (oneth *i));        //终点        CGPoint endP = CGPointMake(self.view.frame.size.width - 20, 80 + (oneth *i));    }}

第五步：画出折线图，最后终于要上大头戏了。效果图如下：
折线效果图

- (void)dravLine{    CGFloat oneheight = (self.view.frame.size.height - 160) / 12;    CGFloat onewidth = (self.view.frame.size.width - 40) / 12;    //十二个月的坐标    CGPoint JanuaryPoint = CGPointMake(22, self.view.frame.size.height - 80);    CGPoint FebruaryPoint = CGPointMake(22+onewidth, self.view.frame.size.height - 80-oneheight);    CGPoint MarchPoint = CGPointMake(22+onewidth *2, self.view.frame.size.height - 80-oneheight*7);    CGPoint AprilPoint = CGPointMake(22+onewidth*3, self.view.frame.size.height - 80-oneheight*4);    CGPoint MayPoint = CGPointMake(22+onewidth*4, self.view.frame.size.height - 80-oneheight*10);    CGPoint JunePoint = CGPointMake(22+onewidth*5, self.view.frame.size.height - 80-oneheight*7);    CGPoint JulyPoint = CGPointMake(22+onewidth*6, self.view.frame.size.height - 80-oneheight*6);    CGPoint AugustPoint = CGPointMake(22+onewidth*7, self.view.frame.size.height - 80-oneheight*9);    CGPoint SeptemberPoint = CGPointMake(22+onewidth*8, self.view.frame.size.height - 80-oneheight*8);    CGPoint OctoberPoint = CGPointMake(22+onewidth*9, self.view.frame.size.height - 80-oneheight*10);    CGPoint NovemberPoint = CGPointMake(22+onewidth*10, self.view.frame.size.height - 80-oneheight*9);    CGPoint DecemberPoint = CGPointMake(22+onewidth*11, self.view.frame.size.height - 80-oneheight);    //下面的这块代码实现折线走势}

以上就是完成折线图的所有代码，完全是按照CALayer利用UIBezierPath写的。
代码部分不太全，如果想要下载的可以去我的资源库下载.m文件。下载CALayer折线图代码

0 0