IOS之Quartz2D绘图2.随机绘制五角星

1.   单个五角星绘制

上次讲了在IOS中使用quartz2d绘制基本的图形，今天来绘制一个比较复杂的图形—五角星，五角星大家都很熟悉。

先来分析下五角星的画法，一个五角星如图所示。

1.   先把一个圆周平均五等分，那么每个角度是360/5,然后隔点进行连线就可以绘制五角星

2.   每个连线的夹角就是360/5*2,但是在IOS的正弦余弦计算采用的是弧度制。这里有必要复习下弧度的知识，弧度就是弧的长度，把等于半径的弧度定义为一弧度。那么360度就是2pi. 如图所示

3.   复习完弧度知识，我们就可以绘制五角星了

绘制代码和截图

-(void) drawStar:(CGContextRef) context{

    [[UIColor redColor] set];

   

    //确定中心点

    CGPoint centerPoint=CGPointMake(160, 230);

    //确定半径

    CGFloat radius=100.0;

    //五角星到顶点

    CGPoint p1=CGPointMake(centerPoint.x, centerPoint.y-radius);

    CGContextMoveToPoint(context, p1.x, p1.y);

    //五角星每个点之间点夹角，采用弧度计算。没两个点进行连线就可以画出五角星

    //点与点之间点夹角为2*M_PI/5.0，

    CGFloat angle=4*M_PI/5.0;

    for (int i=1; i<=5; i++) {

        CGFloat x=centerPoint.x-sinf(i*angle)*radius;

        CGFloat y=centerPoint.y-cosf(i*angle)*radius;

        CGContextAddLineToPoint(context, x, y);

    }

    CGContextDrawPath(context, kCGPathFillStroke);

}

2.   多个五角星随机绘制

1.API介绍

CGContextSaveGState(context);保存上下文

CGContextRestoreGState(context);回复上下文

CGContextTranslateCTM(context, x, y);画布移动

CGContextRotateCTM(context, angle);画布旋转

CGContextScaleCTM(context, scale, scale);画布缩放

2.运行效果截图

-(void) drawMultiStar:(CGContextRef) context starCount:(int) count{

    //确定中心点

    CGPoint centerPoint=CGPointMake(0, 0);

    //确定半径

    CGFloat radius=100.0;

    //五角星五点数组

    CGPoint points[5];

    points[0]=CGPointMake(centerPoint.x,centerPoint.y-radius);

    //五角星每个点之间点夹角，采用弧度计算。没两个点进行连线就可以画出五角星

    //点与点之间点夹角为2*M_PI/5.0，

    CGFloat angle=4*M_PI/5.0;

    for (int i=1; i<5; i++) {

        CGFloat x=centerPoint.x-sinf(i*angle)*radius;

        CGFloat y=centerPoint.y-cosf(i*angle)*radius;

        points[i]=CGPointMake(x, y);

    }

   

    for (int i=0; i<count; i++) {

        //保存上下文

        CGContextSaveGState(context);

        int randomX=arc4random_uniform(320);

        int randomY=arc4random_uniform(480);

        //随机移动画布位置

        CGContextTranslateCTM(context, randomX,randomY);

        //随机旋转画布

        CGFloat roate=arc4random_uniform(90)*M_PI/180.0;

        CGContextRotateCTM(context, roate);

        //随机缩放画布

        float scale=arc4random_uniform(5)/10.0+0.2;

        CGContextScaleCTM(context, scale, scale);

        [[self randomColor] set];

        CGContextMoveToPoint(context, points[0].x,points[0].y);

        for (int i=1; i<5; i++) {

           CGContextAddLineToPoint(context, points[i].x,points[i].y);

        }

        CGContextDrawPath(context, kCGPathFillStroke);

        //回复上下文

        CGContextRestoreGState(context);

    }

}

3.   源代码下载

某戳此处下载