swift:打造你自己的折线图

看到苹果Health里的折线图了吗。我们就是要打造一个这样的折线图。没看过的请看下图。

我们的主题在于折线图本身。其他的包括步数、日平均值等描述类的内容这里就不涉及了。

 

首先观察，这个图种包含些什么组成部分。线？这个太明显都看见了。还有每个节点的小圆圈，还有折线图里从上到下的渐变。这里是白色的从上到下逐渐透明的效果。还有一条虚线。这个暂时先不考虑了。你能绘制出来最下面的x轴标尺，绘制个虚线还不是小菜？

为什么说是绘制呢，因为显然我们不想用一个UIView把像素设置为1，背景色设置为UIColor.whiteColor()，然后设置View的倾斜度的方式来堆砌这个line chat。首先必须严重的鄙视这种做法。在开发中不能光是把各种UIButton、UILabel什么的设定好了frame就网上没完没了的堆。或者更有甚者直接拖动这些控件到Storyboard上。摆个位置，设置个宽和高别的就完全不管了。autolayout什么的一概不问，使用了storyboard也适配不了多分辨率。这样的结果是谁维护代码谁遭殃。

正确的做法是提升代码。有多个地方都用到同样的组合控件的时候，比如多选框、单选框，就自定义一个。这样，至少可以达到一改全改的效果。代码维护简单了很多。同时需要考虑效率的问题。比如我们的line chart，就使用Core Graphics和QuartzCore框架中的CAShapeLayer绘制。这样执行效率明显比堆砌UIView的方法效率高--占用资源少，执行快。

看看CALayer的定义：

class CALayer : NSObject, NSCoding, CAMediaTiming

再看看UIView的定义：

class UIView : UIResponder, NSCoding, UIAppearance, NSObjectProtocol, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace

你就应该知道为什么完全不能用UIView来堆砌这个图了。

言归正传！画线可以用Core Graphics一点点的画，也可以用CALayer来话，准确的说是CAShapeLayer更方便，所以我们用CAShapeLayer来画线。用CAShapeLayer画线灰常之简单。总的来说就是设定路线（Path），然后把这个路线赋值给这个layer画线就完成了。比如，初始化一条贝塞尔曲线，然后指定好center point和半径，起始角度和结束角度，然后“BANG”。“BANG”是一个象声词，龙珠里很多。指定你的CAShapeLayer实例的path属性值为这个path。此处略去一堆什么给你的view.layer.addsublayer什么的细节。运行后你就会看到一个从起始角度到结束角度的一个半圆。

运行起来之后，你会看到这个半圆和你需要的起始角度、结束角度差很多。所以，还是画一个正圆比较容易一些。尤其现在我们才刚刚开始接触这个神秘的东东。等下还有更神秘的。。。要画正圆只要指定起始角度为0（这里需要严重说明一下，角度都是弧度制的，比如，π、2π什么的）。结束角度为2π，也就是(M_PI * 2)。半径随便，圆心最好设定在屏幕的中心，也就是：

UIScreen.mainScreen().bounds.height / 2和UIScreen.mainScreen().bounds.width / 2。这样就是在屏幕中心点，以你给定的值为半径画了一个圆圈。效果如图：

给的贝塞尔曲线是这样的：

UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(bounds) / 2 - 30.0, startAngle: 0, endAngle: CGFloat(M_PI * 2.0), clockwise: true).CGPath

这里需要注意的是一定要在最后调用属性CGPath，这个才是CAShapeLayer可以接受的Path的类型。直接赋值是会报错的。在贝塞尔曲线初始化的过程中角度值需要使用CGFloat类型。M_PI是Double类型的。这里需要类型转换一下。否则报错会报在radius的身上，但是起始是角度的类型问题。

圆是画出来了，但是我们要绘制的是line chart，是直线。该如何解决呢。这里就需要说明一下绘制线的一般感性认识。首先CAShapeLayer需要知道绘制的起始点在哪里，其次，从哪一点到哪一点绘制一条线。对于圆的贝塞尔曲线来说自然是从角度为0的，半径长度和圆心来开始画线，线一直延续到结束角度2π（PI）。对于一条直线就简单多了。起点是指定的一个点。然后，添加一条线到另一个点。来看看如何具体的用代码画一条线。

        var path = CGPathCreateMutable()
        var x = UIScreen.mainScreen().bounds.width / 2, y = UIScreen.mainScreen().bounds.height / 5
        CGPathMoveToPoint(path, nil, 0, y * 2)

          CGPathAddLineToPoint(path, nil, 0, 0)

          CGPathAddLineToPoint(path, nil, x - kRadiusLength, 0)

        CGPathAddLineToPoint(path, nil, bounds.size.width, bounds.size.height)

        progressLayer.path = path

线就是这么画出来的。有线了以后就需要考虑另一个问题了，线下面的渐变色。这个就需要用到另一种Layer：CAGradientLayer。CAGradientLayer有一个属性可以做到这一点，这个属性就是colors。给这个属性多少颜色，CAGradientLayer就会出现多少从一个颜色到另一个颜色的渐变。注意一点，这里需要的颜色都是UIColor.yellowColor().CGColor。看到这个CGColor了吗？一定要这个颜色才行。否则，不报错，也不显示任何的颜色！

代码：

        var gradientLayer2 = CAGradientLayer()
        gradientLayer2.startPoint = CGPointMake(0.5, 1.0)
        gradientLayer2.endPoint = CGPointMake(0.5, 0.0)
        gradientLayer2.frame = CGRectMake(0, 0, bounds.size.width, bounds.size.height)
        gradientLayer2.colors = [UIColor.yellowColor().CGColor, UIColor.blueColor().CGColor, UIColor.greenColor().CGColor]
        self.view.layer.addSublayer(gradientLayer2)

这效果就出来了：

到这里你应该就明白了。图一种的白色到透明的渐变其实就是不同alpha的白色赋值给了colors属性。 

gradientLayer2.colors = [UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.0).CGColor,
            UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.5).CGColor,
            UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 0.8).CGColor]

看效果，白色从上到下的渐变填充已经出来了。画线前面已经讲过。现在的问题就是让这个填充按照画得线剪裁。这个非常简单。

我们来给上面的CAShapeLayer这样的一个路线：

var path = CGPathCreateMutable()
        CGPathMoveToPoint(path, nil, 0, UIScreen.mainScreen().bounds.height)
        CGPathAddLineToPoint(path, nil, 0, 0)
        CGPathAddLineToPoint(path, nil, x - kRadiusLength, 0)
        CGPathAddLineToPoint(path, nil, bounds.size.width, bounds.size.height / 2)

然后，就让CAGradientLayer的mask属性为这个CAShapeLayer。

gradientLayer.mask = progressLayer

这样一来。效果就出来了。

但是。。仔细一个，填充的渐变白色图是有了，那么线呢？白色的线没有。CAShapeLayer的线最终都只是成为CAGradientLayer的剪裁线。要解决这个问题就要上下面的重头戏了。

为了解决这个问题，我们不得不祭出Core Graphics神器了。总体的构造思路是在Controller中添加一个View，在这个View中使用Core Graphics来画线，之后在上面添加我们上文说到的两个Layer。也就是下面画线，然后用Layer来完成渐变色的填充和对这个填充色的剪裁。

Core Graphics画线比CALayer还是麻烦一些的，但是思路总体上一致。也是把画笔放到起始点（在哪里开始画线）。之后也是从哪里到哪里画线。总体来说，画线的思路就是这样。

首先，需要在Core Graphics中铺上画布：

var context = UIGraphicsGetCurrentContext()

2. 指定线的颜色和线的宽度：

CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextSetLineWidth(context, 1.0)

3. 开始画线：

CGContextMoveToPoint(context, kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)

这里必须补充一点。在画线的时候，我们需要一些列的点坐标。暂时，只是用模拟的方式实现。var x = calculateX(0)和var y = calculateY(0)就是第一个点得x，y坐标的计算方法。具体的代码在后面。这些给定的点需要映射到你的画布的坐标系中。calculateX、Y就是做这个映射的。虽然省略了一些步骤。但是你应该可以从初中的数学基础中明白这个是怎么回事的，所以此处只做解释其他省略。

    func calculateX(i: Int) -> CGFloat {
        var x = kBottomMargin + CGFloat(i) * kUnitLabelWidth!
        return x
    }

kBottomMargin是x点在左侧的一个margin。只是展示需要，不用关心。 CGFloat(i) * kUnitLabelWidth!，i是第几个点，也就是x轴上的index。kUnitLabelWidth!是x轴上两点之间的距离，至于感叹号就不多解释了，那个是swift的基础。

 

func calculateY(i: Int) -> CGFloat {
        var y: CGFloat = 0
        switch(i){
        case 0:
            y = kTotalYValue! * 0.5
            break
        case 1:
            y = kTotalYValue! * 0.3
            break
        case 2:
            y = kTotalYValue! * 0.7
            break
        case 3:
            y = kTotalYValue! * 0.7
            break
        case 4:
            y = kTotalYValue! * 0.2
            break
        case 5:
            y = kTotalYValue! * 0.8
            break
        default:
            y = 0
            break
        }
        return y
    }

这里主要计算，每个x点对应的y点（这里就摸你了y值对应在画布坐标系的方法）。

有了以上的只是就可以画出折线图了。具体的方法如下：

override func drawRect(rect: CGRect) {
        println("drawRect")

        var context = UIGraphicsGetCurrentContext()

//        CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)
//        CGContextSetLineWidth(context, 4.0)
//        CGContextMoveToPoint(context, kBottomMargin, kBottomMargin)
//        CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
//        CGContextStrokePath(context)

        CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
        CGContextSetLineWidth(context, 1.0)
        CGContextMoveToPoint(context, kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
        CGContextAddLineToPoint(context, CGRectGetWidth(rect) - kBottomMargin, CGRectGetHeight(rect) - kBottomMargin)
//        CGContextStrokePath(context)

        CGContextSetFillColorWithColor(context, UIColor.orangeColor().CGColor)

        var x = calculateX(0)
        var y = calculateY(0)
        var prePoint: CGPoint = CGPointMake(x, y)

        for var index = 0; index < 6; index++ {
            var x = calculateX(index)
            var y = calculateY(index)
            var textY = CGRectGetHeight(rect) - kBottomMargin + 3

            CGContextMoveToPoint(context, x, CGRectGetHeight(rect) - kBottomMargin)
            CGContextAddLineToPoint(context, x, CGRectGetHeight(rect) - kBottomMargin + kUnitLabelHeight)

            var labelString = NSString(string: "\(kBaseLabelString) \(index)")
            labelString.drawAtPoint(CGPointMake(x + kUnitLabelHeight, textY), withAttributes: [NSFontAttributeName: kLabelFont, NSForegroundColorAttributeName: kLabelFontColor])

            CGContextStrokePath(context)

            CGContextMoveToPoint(context, x, y)
//            CGContextSetLineWidth(context, 2.0)
            var path = UIBezierPath(arcCenter: CGPointMake(x, y), radius: kCircleRadiusLength, startAngle: CGFloat(0.0)
                , endAngle: CGFloat(2 * M_PI), clockwise: true)
            CGContextAddPath(context, path.CGPath)
//            CGContextFillPath(context)

            CGContextStrokePath(context)

//            var offset: CGFloat = kCircleRadiusLength * CGFloat(sin(M_PI_4))
            var offset = calculateOffset(prePoint.x, prePoint.y, x, y, kCircleRadiusLength)
            if prePoint.x != x /*&& prePoint.y != y*/ {

                if y > prePoint.y {
                    CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y + offset.offsetY)
                    CGContextAddLineToPoint(context, x - offset.offsetX, y - offset.offsetY)
                }
                else if y < prePoint.y {
                    CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y - offset.offsetY)
                    CGContextAddLineToPoint(context, x - offset.offsetX, y + offset.offsetY)
                }
                else{
                    CGContextMoveToPoint(context, prePoint.x + offset.offsetX, prePoint.y)
                    CGContextAddLineToPoint(context, x - offset.offsetX, y)
                }

                CGContextStrokePath(context)

                prePoint = CGPointMake(x, y)
            }
        }

//        CGContextMoveToPoint(context, x, y)
        CGContextSetLineWidth(context, 3)
        CGContextSetStrokeColorWithColor(context, UIColor.greenColor().CGColor)
        CGContextSetFillColorWithColor(context, UIColor.blueColor().CGColor)
        var circleRect = CGRectMake(x, y, 15, 15)
        circleRect = CGRectInset(circleRect, 3, 3)
        CGContextFillEllipseInRect(context, circleRect)
        CGContextStrokeEllipseInRect(context, circleRect)
    }

这一段代码：

var path = UIBezierPath(arcCenter: CGPointMake(x, y), radius: kCircleRadiusLength, startAngle: CGFloat(0.0)
                , endAngle: CGFloat(2 * M_PI), clockwise: true)
            CGContextAddPath(context, path.CGPath)

就是用来在各条线之间画圆圈的。

以几乎略有不同的算法可以在calayer上绘制出CAGradientLayer的mask路线。也就是在core graphics里画得白线和在纸上铺上去的mask以后的gradient layer可以严丝合缝的组合在一起。这是看起来才能和苹果的health app一样的效果。这里需要说明，在添加了圆圈之后，每次画线的时候需要考虑要把线缩短。如果直接按照原来的方式的话，会优先穿过圆圈。

 

欢迎加群互相学习，共同进步。QQ群：iOS: 58099570 | Android: 330987132 | Go：217696290 | Python：336880185 | 做人要厚道，转载请注明出处！http://www.cnblogs.com/sunshine-anycall/p/4240666.html

时间： 2024-02-25 00:41:17

swift:打造你自己的折线图的相关文章

ASP.NET画柱状图和折线图

asp.net|折线图|柱状图 using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Drawing;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlContro

raphael-Raphael做折线图时怎么设置图例？

问题描述 Raphael做折线图时怎么设置图例? Raphael做折线图时怎么设置图例?,网上的资料不是很多,麻烦请举例,研究了一下没研究出来

ASP生成柱型体、折线图、饼图源代码

饼图|源代码|折线图 终于将这三个写成函数,可以方便大家调用,示例如下,如果有不妥之处,希望和大家多交流.如果你喜欢这个程序的话,请回复一下,是对我的支持,也希望和大家交朋友,多切磋.也请斑竹多支持! 因本站为PHP空间所以不提供演示地址 代码:<%function table2(total,table_x,table_y,all_width,all_height,line_no)'参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,折线条数)'纯ASP代码生成图表函数2--折线图li

ASP生成柱型体，折线图，饼图源代码

饼图|源代码|折线图    <%   function table2(total,table_x,table_y,all_width,all_height,line_no)   '参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,折线条数)   '纯ASP代码生成图表函数2--折线图   '作者:龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com   '本人非常愿意和ASP,VML,

纯ASP结合VML生成完美图-折线图

折线图 演示地址:http://61.172.255.65/dvbbs/t3/t18.asp <%dim total(7,3)total(1,0)="中国经营报"total(2,0)="招聘网"total(3,0)="51Job"total(4,0)="新民晚报"total(5,0)="新闻晚报"total(6,0)="南方周末"total(7,0)="羊城晚报"

用代码画折线图／柱形图／条形图／饼图

饼图|折线图|柱形图 本文将介绍在．Net中如何使用代码画图表,就像用MS Excel生成的图表一样.也可以画像DataGrid一样的表格. 在．Net中,微软给我们提供了画图类(System.Drawing.Imaging),在该类中画图的基本功能都有.比如:直线.折线.矩形.多边形.椭圆形.扇形.曲线等等,因此一般的图形都可以直接通过代码画出来.接下来介绍一些画图函数:Bitmap bMap=new Bitmap(500,500) //定义图像大小:bMap.Save(Stream,Imag

用GD图库生成横竖柱状图折线图的类

折线图|柱状图 最近写的一个GD图库用以生成横竖柱状图和折线图的类库,算是一个教学例程吧  <? Class ImageReport{ var $X;//图片大小X轴 var $Y;//图片大小Y轴 var $R;//背影色R值 var $G;//...G. var $B;//...B. var $TRANSPARENT;//是否透明1或0 var $IMAGE;//图片对像 //------------------- var $ARRAYSPLIT;//指定用于分隔数值的符号 var $ITE

C#画折线图

折线图 using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlCon

ASP生成柱状图，折线图，饼图源代码函数

饼图|函数|源代码|折线图|柱状图 以下是柱状图代码:<% function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type) '参数含义(传递的数组,横坐标,纵坐标,柱子的厚度,柱子的宽度,图表的宽度,图表的高度,图表的类型) '纯ASP代码生成图表函数1--柱状图 '欢迎您再次访问阿里西西WEB开发社区,http://www.alixixi.com.dim tb_color(