您的位置:首页 > 移动开发 > IOS开发

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

2013-07-02 10:57 399 查看
我们要花的为一个黄色的五角星

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

首先要重写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范围进行黄色填充
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐