利用IOS画图功能画出五角星,并且可以调整五角星的填充范围

我们要花的为一个黄色的五角星并且其中的填充黄色能够任意调整,比如只填满半个五角星,或者只填满一个角等等。

首先要重写DrawRect 方法,然后在这里实现我们的画图代码。

- (void)drawRect:(CGRect)rect
{
    
    
    CGFloat centerX = rect.size.width / 2;
    CGFloat centerY = rect.size.height / 2;
    
    CGFloat r0 = self.radius * sin(18 * th)/cos(36 * th); /*计算小圆半径r0 */
    CGFloat x1[5]={0},y1[5]={0},x2[5]={0},y2[5]={0};
    
    for (int i = 0; i < 5; i ++)
    {
        x1[i] = centerX + self.radius * cos((90 + i * 72) * th); /* 计算出大圆上的五个平均分布点的坐标*/
        y1[i]=centerY - self.radius * sin((90 + i * 72) * th);
        x2[i]=centerX + r0 * cos((54 + i * 72) * th); /* 计算出小圆上的五个平均分布点的坐标*/
        y2[i]=centerY - r0 * sin((54 + i * 72) * th);
    }
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGMutablePathRef startPath = CGPathCreateMutable();
    CGPathMoveToPoint(startPath, NULL, x1[0], y1[0]);
    
    
    for (int i = 1; i < 5; i ++) {
     
        
        CGPathAddLineToPoint(startPath, NULL, x2[i], y2[i]);
        CGPathAddLineToPoint(startPath, NULL, x1[i], y1[i]);
    }

    CGPathAddLineToPoint(startPath, NULL, x2[0], y2[0]);
    CGPathCloseSubpath(startPath);
    

    CGContextAddPath(context, startPath);		

    CGContextSetFillColorWithColor(context, self.startColor.CGColor);

    CGContextSetStrokeColorWithColor(context, self.boundsColor.CGColor);
    CGContextStrokePath(context);
    
    CGRect range = CGRectMake(x1[1], 0, (x1[4] - x1[1]) * self.value , y1[2]);

    CGContextAddPath(context, startPath);
    CGContextClip(context);
    CGContextFillRect(context, range);


    CFRelease(startPath);
    


}

  

由于这样的五角星是中空的,所以我们选取十个点,首先五角星五个尖在一个大圆上,且在大圆上平均分布,内角的五个点在一个小圆上,也是平均分布。

最后创建路径。创建好路径后要进行色彩填充,分为描边以及内容。

描边为黑色,内容为黄色

这里的self.value是一个0-1的值,用来表示星星填充的范围,为1代表整个星星全部填充为黄色。

这里设置一个变量range 描绘了这个星星需要填充的范围

最后利用CGContextFillRect  这个方法  将range范围进行黄色填充

posted @ 2013-07-02 10:57  不曾拥有  阅读(6986)  评论(4编辑  收藏  举报