IOS-使用CAShapLayer绘制扇形
为了增加应用体验感,我们动态绘制扇形或者饼状图效果。
这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形
参考代码
-(void)reDraw
{
CAShapeLayer *chartLine;
if (chartLine!=nil)
{
[chartLine removeAllAnimations];//这样就能重复绘制饼状图了
}
else
{
chartLine = [CAShapeLayerlayer];
chartLine.lineWidth = 40;//这里设置填充线的宽度,这个参数很重要
chartLine.lineCap = kCALineCapButt;设置线端点样式,这个也是非常重要的一个参数
chartLine.strokeColor = [[UIColor redColor] CGColor];//绘制的线的颜色
chartLine.fillColor = nil;
self.clipsToBounds = NO;//该属性表示如果图形绘制超过的容器的范围是否被裁掉,这里我们设置为YES ,表示要裁掉超出范围的绘制
[self.layer addSublayer:chartLine];
}
CGMutablePathRef pathRef = CGPathCreateMutable();
CGPathAddArc(pathRef, &CGAffineTransformIdentity,
CGRectGetWidth(self.frame)/2, CGRectGetHeight(self.frame)/2, 60, 0, M_PI*3/2, NO);
chartLine.path = pathRef;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.1;//设置绘制动画持续的时间
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.autoreverses = NO;//是否翻转绘制
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.repeatCount = 1;
[chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
chartLine.strokeEnd=1.0f;//表示绘制到百分比多少就停止,这个我们用1表示完全绘制
}
我们先来看看绘制的效果图:
这里我们有必要说下,扇形(饼状图的原理),我们绘制的其实不是扇形,可以说是圆形,我们只是将圆形的边线宽度变得很宽,比如:我们想要绘制的圆形的半径是 R = 100,如果我们想绘制扇形就可以设置变宽为 200,因为,线是从中间到圆心来标定半径的,这样,边线宽度= 200,那么,从边线重新到圆心的距离就是200/2 = 100,这样你看,100==R,这样,效果就看起来我们绘制的是饼状图了。我们绘制的不是真正的饼状图,而是用其他的方法绘制饼状图的效果而已,这里我们特别需要主要的是,如果你想成功的绘制饼状图,那么你就需要掌握好,圆形半径以及圆形边线的宽度值,以及他们之间的比例关系,因为他们之间的关系决定了你要绘制的饼状图的效果以及形状,比如:时候中间有空心,以及空心的大小。
Jason
2014年03月21日