Quartz2D 绘五角星

五角星.png
#pragma mark 画五角星
- (void) _drawStarWithContext:(CGContextRef)ctx
{
// 1. 基本数据
// 圆心 与 半径
CGPoint centerPoint = CGPointMake(170., 170.);
CGFloat radius = 90.;

// 2. 绘制路径
UIBezierPath *path = [UIBezierPath bezierPath];

// 两个点的夹角弧度
CGFloat angle = 2 * (2 * M_PI / 5.);

// 第一个点
CGPoint point1 = CGPointMake(centerPoint.x, centerPoint.y - radius);
[path moveToPoint:point1];

// 其他点
for (int i = 1; i <= 5; i++) {
    /** 
     1.0 确定了 point1 后，要确定连线的下一个点，由于 point1 与坐标 x 轴夹角为90度，所以与下一个点的夹角要加上90度。
     1.1 五角星是跨越一个点连线的，point1 与 point3 的夹角为 2 * 72度。
     1.2 计算把角度转换成弧度。
     1.3 结合圆弧上任意一点的坐标计算公式：
         '如果是圆O：
         x^2 + y^2 = 1
         {x = cosθ
         {y = sinθ
         '如果是圆C(a,b)
         (x - a)^2 + (y - b)^2 = r^2
         {x = a + r * cosθ
         {y = b + r * sinθ
     得出：
     CGFloat x = centerPoint.x + radius * cos((90. + i * 72. * 2) * M_PI / 180.);
     CGFloat y = centerPoint.y - radius * sin((90. + i * 72. * 2) * M_PI / 180.);
     
     1.4 结合转换公式：
         sin（π / 2 + θ）= cosθ
         cos（π / 2 + θ ）= －sinθ
     简化后：
     CGFloat angle = 2 * (2 * M_PI / 5.);
     CGFloat x = centerPoint.x - sinf(i * angle) * radius;
     CGFloat y = centerPoint.y - cosf(i * angle) * radius;
     
     */
    
    CGFloat x = centerPoint.x - sinf(i * angle) * radius;
    CGFloat y = centerPoint.y - cosf(i * angle) * radius;
    
     // 连线
    [path addLineToPoint:CGPointMake(x, y)];
}

// 上下文的状态
CGContextSetLineWidth(ctx, 1.);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
[[UIColor whiteColor] set];

// 3. 把绘制的内容保存到上下文当中。
CGContextAddPath(ctx, path.CGPath);

// 4. 把上下文的内容显示到View上
//CGContextStrokePath(ctx);
CGContextFillPath(ctx);

// 辅助圆
CGContextBeginPath(ctx);
[[UIColor whiteColor] set];
CGContextAddArc(ctx, centerPoint.x, centerPoint.y, radius, 0, 2. * M_PI, 1);
CGContextStrokePath(ctx);
}
Quartz2D 绘五角星

推荐阅读更多精彩内容
