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.
源代码下载

某戳此处下载