2012-06-30 54 views
0

我寫了這個類,繪製一個圓一個動畫進度(它借鑑基礎上的浮動進步的扇形)Objecive-C畫出一環跟一圓形

@implementation MXMProgressView 

@synthesize progress; 

- (id)initWithDefaultSize { 
    int circleOffset = 45.0f; 
    self = [super initWithFrame:CGRectMake(0.0f, 
              0.0f, 
              135.0f + circleOffset, 
              135.0f + circleOffset)]; 
    self.backgroundColor = [UIColor clearColor]; 
    return self; 
} 

- (void)drawRect:(CGRect)rect { 

    CGRect allRect = self.bounds; 
    CGRect circleRect = CGRectMake(allRect.origin.x + 2, allRect.origin.y + 2, allRect.size.width - 4, 
            allRect.size.height - 4); 

    CGContextRef context = UIGraphicsGetCurrentContext(); 

    // background image 
    //UIImage *image = [UIImage imageNamed:@"loader_disc_hover.png"]; 
    //[image drawInRect:circleRect]; 

    // Orange: E27006 
    CGContextSetRGBFillColor(context, 
          ((CGFloat)0xE2/(CGFloat)0xFF), 
          ((CGFloat)0x70/(CGFloat)0xFF), 
          ((CGFloat)0x06/(CGFloat)0xFF), 
          0.01f); // fill 

    //CGContextSetLineWidth(context, 2.0); 
    CGContextFillEllipseInRect(context, circleRect); 
    //CGContextStrokeEllipseInRect(context, circleRect); 

    // Draw progress 
    float x = (allRect.size.width/2); 
    float y = (allRect.size.height/2); 

    // Orange: E27006 
    CGContextSetRGBFillColor(context, 
          ((CGFloat)0xE2/(CGFloat)0xFF), 
          ((CGFloat)0x70/(CGFloat)0xFF), 
          ((CGFloat)0x06/(CGFloat)0xFF), 
          1.0f); // progress 

    CGContextMoveToPoint(context, x, y); 
    CGContextAddArc(context, x, y, (allRect.size.width - 4)/2, -M_PI_2, (self.progress * 2 * M_PI) - M_PI_2, 0); 
    CGContextClosePath(context); 
    CGContextFillPath(context); 
} 

@end 

現在我想做的事我使用相同的進度動畫繪製環形圖形,而不是填充整個圓,因此圓形扇形再次不是從圓的中心開始。

我試着用CGContextAddEllipseInRectCGContextEOFillPath(context);

沒有成功。

+0

太過本地化。嘗試概括你的問題。更多,以便它可以幫助未來的遊客。 –

+1

您是否知道在筆畫路徑之前可以更改線寬? – NSResponder

回答

1

我想你會需要構建一個更復雜的路徑是這樣的:

// Move to start point of outer arc (which might not be required) 
CGContextMoveToPoint(context, x+outerRadius*cos(startAngle), y+outerRadius*sin(startAngle)); 
// Add outer arc to path (counterclockwise) 
CGContextAddArc(context, x, y, outerRadius, startAngle, endAngle, 0); 
// move *inward* to start point of inner arc 
CGContextMoveToPoint(context, x+innerRadius*cos(endAngle), y+innerRadius*sin(endAngle)); 
// Add inner arc to path (clockwise) 
CGContextAddArc(context, x, y, innerRadius, endAngle, StartAngle, 1); 
// Close the path from end of inner arc to start of outer arc 
CGContextClosePath(context); 

注:我沒有嘗試過上面的代碼自己

+0

我也喜歡@NSResponder的想法,只是用粗寬的線條撫摸單個弧線,而不是填充複雜的路徑。 –

0

廉價和骯髒的解決方案:

  • 通過要繪製的環的粗細繪製一個比原始圓小的實心圓。
  • 在原來的圓圈頂部繪製此圓圈,您將看到的所有動畫都是圓環。
+0

使用剪切路徑 – hypercrypt

+0

我說這是一個快速和骯髒的解決方案。你需要做的事情就是看看效果是什麼樣子的,然後在需要的時候以更有效的方式重寫它,然後再進行調整。 – Abizern