7

UIBezierPath を使用して、星、サンバースト、およびその他の「とがった」効果をプログラムで作成する方法を探しています。

スターバースト画像

UIBezierPath *sunbeamsPath = [UIBezierPath bezierPath];
[sunbeamsPath moveToPoint: CGPointMake(x, y)];

パスが重複することなく、サンバーストのような形状のポイントをプログラムで生成できるアルゴリズムはありますか?

下のような不規則な形状のサンバーストにも興味があります。

不規則なサンバースト

このようなアルゴリズムは、特定の数の光線を取り、円をいくつかのセグメントに大まかに分割し、そのようなセグメントのポイントを時計回りに生成すると想像します。私が説明しているようなアルゴリズムは既に存在しますか、それとも自分で作成する必要がありますか?

ありがとうございました！

4

4 に答える 4

7

私はこれが古いことを知っていますが、この質問の最初の部分に興味があり、jrturtonの投稿から離れて、ビューの中心からUIBezierPathを生成するカスタムUIViewを作成しました。ボーナスポイントのために回転するアニメーションもあります。結果は次のとおりです。

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

私が使用したコードはここにあります：

- (void)drawRect:(CGRect)rect {
CGFloat radius = rect.size.width/2.0f;

[self.fillColor setFill];
[self.strokeColor setStroke];

UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CGPoint centerPoint = CGPointMake(rect.origin.x + radius, rect.origin.y + radius);

CGPoint thisPoint = CGPointMake(centerPoint.x + radius, centerPoint.y);
[bezierPath moveToPoint:centerPoint];

CGFloat thisAngle = 0.0f;
CGFloat sliceDegrees = 360.0f / self.beams / 2.0f;

for (int i = 0; i < self.beams; i++) {

    CGFloat x = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x;
    CGFloat y = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y;
    thisPoint = CGPointMake(x, y);
    [bezierPath addLineToPoint:thisPoint];
    thisAngle += sliceDegrees;

    CGFloat x2 = radius * cosf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.x;
    CGFloat y2 = radius * sinf(DEGREES_TO_RADIANS(thisAngle + sliceDegrees)) + centerPoint.y;
    thisPoint = CGPointMake(x2, y2);
    [bezierPath addLineToPoint:thisPoint];
    [bezierPath addLineToPoint:centerPoint];
    thisAngle += sliceDegrees;

}

[bezierPath closePath];

bezierPath.lineWidth = 1;
[bezierPath fill];
[bezierPath stroke];

}

そして、ここからサンプルプロジェクトをダウンロードできます。

https://github.com/meekapps/Sunburst

于 2013-02-20T22:38:51.443 に答える
2

これらを作成するアルゴリズムについては知りませんが、いくつかのアドバイスがあります。(0,0) がサンバーストの中心になるようにベジェ パスを作成し、1 つの「ビーム」を描画するために必要なポイントの数を定義します。あなたのサンバーストは上向きになり、(0,0) に戻ります

次に、必要な数のビームに対してループを実行します。回転変換 (2 pi / ビームの数) をサンビーム ポイント (CGPointApplyTransform) に適用し、それらをパスに追加します。

終了したら、描画用にパスを変換およびスケーリングできます。

私は最近星の多角形を描くために同様のプロセスを使用しましたが、それは非常に簡単でした. このアイデアについては、Rob Napier の著書に感謝します。

于 2012-05-01T15:54:25.423 に答える