web-dev-qa-db-ja.com

UIBezierPathの開始角度と終了角度？

UIBezierPathとCAShapeLayerを使用して、iOSの半円を以下のようにコーディングしました。

 clockWiseLayer = [[CAShapeLayer alloc] init];

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

CGFloat width = CGRectGetWidth(imageView.frame)/2.0f + 30;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f +50;
CGPoint centerPoint = CGPointMake(width, height);

float radius = CGRectGetWidth(imageView.frame)/2+10;

clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                    radius:radius
                                                startAngle:startAngle
                                                  endAngle:endAngle
                                                 clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor redColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 0.5f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;

clockWiseLayer.shouldRasterize = NO;
[self.layer addSublayer:clockWiseLayer];

これは次のようになります。

enter image description here

ワールドグローブの反対側にあるこの青い半円が欲しいです。

ハーフサークルですが、反対側にもCounterClockWiseが欲しいです。

時計回り：NOの間、開始角度と終了角度を設定できません。

ありがとう。

iosangleuibezierpathcashapelayer
12
Sam Shaikh

座標についてはドキュメントを確認してください： http://i.stack.imgur.com/1yJo6.png

enter image description here

Y軸は、数学の標準座標系とは逆になっています。

1/2 * PI（下部アンカー）から3/2 * PI（上部アンカー）まで描画してから、strokeStartを0.0fに設定し、strokeEndを1.0fに設定します（パス全体を埋めるようにします）。

IOS定数を使用した作業コード：

CGFloat startAngle = M_PI_2;
CGFloat endAngle = startAngle + M_PI;
CGFloat width = CGRectGetWidth(imageView.frame)/2.0f;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f;
CGPoint centerPoint = CGPointMake(width, height);
float radius = CGRectGetWidth(imageView.frame)/2+10;
CAShapeLayer* clockWiseLayer = [[CAShapeLayer alloc] init];
clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                     radius:radius
                                                 startAngle:startAngle
                                                   endAngle:endAngle
                                                  clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor redColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 1.0f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;
[self.layer addSublayer:clockWiseLayer];
24
Grzegorz Krukowski

円の先頭から-M_PI_2で始まり、M_PI + M_PI_2で終わります（完全な円を作成し、strokeEnd、strokeStartを使用して制限する場合）。次に、円のパスを、パスの最初から半分（画像の右側）ではなく、パスの最後の半分（画像の左側）から描画するように設定します。

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

clockWiseLayer.strokeStart = .5f;
clockWiseLayer.strokeEnd = 1.0f;
6
libec

私はbezierPathWithArcCenterで遊んだことがありますが、clockwise = NO。ただし、反時計回りの方向で円のベジェパスを作成する場合は、時計回りのパスを作成してから、 bezierPathByReversingPath で元に戻すことができます。

同じパス形状であるが、パスが逆方向に作成された新しいパスオブジェクト。

1
Avt