利用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范围进行黄色填充