动态绘制图形-线

动态绘制图形-线段

为了提高IOS的应用体验，我们可以动态的绘制曲线或者柱状图等图形。

我们可以使用CAShapeLayer这个类,我们通过这个类来动态的绘制图形，所有步骤也不多，首先制定动态绘制的路线，然后指定动态绘制的动画。

1：创建CAShapeLayer对象

chartLine = [CAShapeLayer layer];

chartLine.lineCap = kCALineCapSquare;

//chartLine.fillColor   = [[UIColor whiteColor] CGColor];

chartLine.strokeEnd   = 0.1;

chartLine.lineWidth = 5.0f;//绘制的图形的边框的宽度

self.clipsToBounds = YES;//该属性表示如果图形绘制超过的容器的范围是否被裁掉，这里我们设置为YES ，表示要裁掉超出范围的绘制

[self.layer addSublayer:chartLine];

 

2：创建path对象

UIBezierPath *progressline = [UIBezierPathbezierPath];

[progressline addArcWithCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0)

                            radius:self.frame.size.width/2-2.5 startAngle:0 endAngle:M_PI*3/2 clockwise:YES];

 

chartLine.path = progressline.CGPath;//指定需要绘制的图形的绘制路线

chartLine.strokeColor = [[UIColorredColor] CGColor];//绘制的线的颜色

 

3：指定绘制动画

    CABasicAnimation *pathAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

    pathAnimation.duration = 1.0;

    pathAnimation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseOut];

    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];

    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];

    pathAnimation.autoreverses = NO;

    pathAnimation.fillMode = kCAFillModeRemoved;

    pathAnimation.repeatCount = 1;

    

    [chartLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

 

 

这样就不需要再Draw函数内绘制图形了。

上面的代码绘制了 UIBezierPath（贝塞尔曲线）曲线，当然也可以使用这个绘制直线，折线等等。

CAShapeLayer与Draw函数的主要区别是 前者可以动态的绘制对应的图形

 

Jason

2014年03月19日