iOS之Quartz2D繪圖隨機繪製五角星

標籤：

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);

    }

 }

iOS之Quartz2D繪圖隨機繪製五角星