看看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