利用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范围进行黄色填充
浙公网安备 33010602011771号