iOS中使用CoreGraphics中

我想要像這樣創建一個圓形漸變進度條：iOS中使用CoreGraphics中

Circle progress bar gradient

我試圖與核芯顯卡這樣使它：

float radius = CGRectGetWidth(rect)/2.0f - self.circleBorderWidth/2.0f; 
float angleOffset = 0; 

UIBezierPath *aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect)) 
                radius:radius 
               startAngle:-angleOffset 
                endAngle:(mCircleSegs + 1)/(float)kCircleSegs*M_PI*2 - angleOffset 
                clockwise:YES]; 

CGPathRef shape = CGPathCreateCopyByStrokingPath(aPath.CGPath, NULL, 3, kCGLineCapSquare, kCGLineJoinMiter, 1.0f); 

CGContextRef ctx = UIGraphicsGetCurrentContext(); 
CGContextAddPath(ctx, shape); 
CGContextClip(ctx); 

AngleGradientLayer *angle = [[AngleGradientLayer alloc] init]; 
angle.colors = [NSArray arrayWithObjects: 
       (id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor, 
       (id)[UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor, 
       nil]; 


CGContextClipToRect(ctx, self.bounds); 
[angle drawInContext:ctx]; 

[angle release];

但我認爲我在這裏錯了。它看起來不像這個例子。 CoreGraphics能夠繪製這樣的東西嗎？怎麼樣？

來源

2013-02-17 Hans

您用作剪輯的貝塞爾路徑似乎只是一個圓的一部分，而在您顯示的圖像中，路徑更復雜：一個圓的2個分數，由2行連接，整個路徑具有一個'環'形狀。

這種方法應該可以工作，我將它用於具有相同外觀的計時器。儘管我沒有直接使用AngleGradientLayer，但我修改了其- (CGImageRef)newImageGradientInRect:(CGRect)rect方法以返回UIImage。但我必須通過+ PI/2旋轉此圖像，因爲Pavlov梯度角度漸變水平開始。

我用一個UIImage，因爲它是不會改變的背景下，所以我在我的層保存在此UIImage的實例，並繪製它，每當我更新剪切路徑

- (void)drawInContext:(CGContextRef)ctx 
{ 

    UIBezierPath *currentPath = [self timerPath]; 
    // other drawing code for glow (shadow) and white stroke) 
    CGContextAddPath(ctx, currentPath.CGPath); 
    // clip ! 
    CGContextClip(ctx); 
    CGContextDrawImage(ctx, self.bounds, _circularGradientImage.CGImage); 

    //_circularGradientImage from modified newImageGradientInRect method. 

}

這裏就是我得到：

enter image description here

來源

2013-02-17 18:05:29 Vinzzz

問題不是圓的2個部分。問題在於漸變的繪製。我真的不知道如何用核心圖形繪製這樣的東西。 – Hans 2013-02-18 00:13:57

回答編輯，添加了我得到的截圖 – Vinzzz 2013-02-18 07:35:59

是的！但正如你在上面的圖片中看到的那樣，當進度條是20％，60％，80％時......第一部分的結尾總是最白的。所以背景層不是解決方案。事實上，我想我們需要一個適應進度本身的背景...... – Hans 2013-02-18 11:08:08

iOS中使用CoreGraphics中

回答

相關問題