利用IOS畫圖功能畫出五角星，並且可以調整五角星的填充範圍

不曾擁有發表於2013-07-02
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範圍進行黃色填充

相關文章