1

私はこのようなものを作りたいです：

サークルプログレスバーグラデーション

私はこのようなコアグラフィックスでそれを作ろうとしました：

    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はこのようなものを描くことができますか？どうやって？

4

1 に答える 1

4

クリップとして使用するベジェパスは円のほんの一部のように見えますが、表示する画像では、パスはより複雑です。2本の線でリンクされた円の2つの部分で、パス全体に「リング」があります。形。

このアプローチはうまくいくはずです、私は同じ種類の外観のタイマーにそれを使用しました。AngleGradientLayerを直接使用しませんでしたが- (CGImageRef)newImageGradientInRect:(CGRect)rect、UIImageを返すようにメソッドを変更しました。しかし、パブロフ勾配の角度勾配は水平方向に始まるため、この画像を+ PI/2だけ回転させる必要がありました。

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.

}

これが私が得るものです：

ここに画像の説明を入力してください

于 2013-02-17T18:05:29.607 に答える