• 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日

  • 相关阅读:
    Jmeter系列(64)- JMeter JSR223 入门
    Jmeter系列(63)- Beanshell 入门
    Jmeter系列(62)- 详解 JSON 断言
    Jmeter系列(61)- 详解断言持续时间
    Jmeter系列(60)- 详解响应断言
    取球游戏|2012年蓝桥杯B组题解析第十题-fishers
    夺冠概率|2012年蓝桥杯B组题解析第九题-fishers
    密码发生器|2012年蓝桥杯B组题解析第八题-fishers
    放棋子|2012年蓝桥杯B组题解析第七题-fishers
    大数乘法|2012年蓝桥杯B组题解析第六题-fishers
  • 原文地址:https://www.cnblogs.com/xingchen/p/3615346.html
Copyright © 2020-2023  润新知