zoukankan      html  css  js  c++  java
  • 动态绘制图形-线

    动态绘制图形-线段

    为了提高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日

     

  • 相关阅读:
    liunx 学习
    Tracert 命令使用说明图解
    好的程序员应该收集一些不错的 类和方法
    apache 多端口
    数组中随机抽取一个或多个单元 (0086一随机显示列表)
    PHP 应具备的知识 学习
    rdlc报表中不显示0
    教程:VS2010 之TFS入门指南
    ORA00161: 事务处理的分支长度 xx 非法 (允许的最大长度为 64) 解决方法
    DataGridView编辑
  • 原文地址:https://www.cnblogs.com/xingchen/p/3611542.html
Copyright © 2011-2022 走看看