IOS-使用CAShapLayer绘制扇形

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日

IOS-使用CAShapLayer绘制扇形,,5-wow.com