0

円でアニメーション化された進行状況を描画するこのクラスを作成しました（フロート進行状況に基づいて円形セクターを描画します）

@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

今、私がやりたいのは、完全な円を塗りつぶすのではなく、同じ進行状況のアニメーションでリングの形を描くことです。これにより、円形の扇形が再び円の中心から始まらないようになります。

で試してみましCGContextAddEllipseInRectたCGContextEOFillPath(context);

成功しませんでした。

4

2 に答える 2

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);

注：上記のコードを自分で試したことはありません

于 2012-06-30T02:37:18.803 に答える
1

安くて厄介な解決策：

  • 描画するリングの厚さだけ元の円よりも小さい実線の円を描画します。
  • 元の円の上にこの円を描きます。アニメーションで表示されるのはリングだけです。
于 2012-06-30T08:24:20.983 に答える