Swift - LineChart绘制折线图

本文介绍了如何在Swift中使用CAShapeLayer和Core Graphics绘制折线图。首先,通过CAShapeLayer利用贝塞尔曲线绘制圆形,然后通过调整角度绘制直线。接着,使用CAGradientLayer实现线下的渐变色,并通过mask属性进行剪裁。最后,通过Core Graphics在Controller的View中画线,以实现完整的折线图效果。
摘要由CSDN通过智能技术生成
LineChart,就使用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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值