0

次のスクリーンショットでは:

ここに画像の説明を入力

吹き出しのしっぽ (吹き出しから人の口につながっているもの) をドラッグすると、形が曲がります (図の 2 つの吹き出しのしっぽの違いで示されているように)。私は疑問に思っています、これはどのように行われますか？CGPath から始めて何かをする必要があると思いますが、たまたまこれが何であるかを知っている人はいますか?

更新:次の形状を曲線にしたい場合:

ここに画像の説明を入力

次のコードを使用しますか？

CGPathAddCurveToPoint(mutablePath, NULL, x1, y1, x2, y2 + constant, x5, y5);
CGPathAddCurveToPoint(mutablePath, NULL, x3, y3, x4, y4 + constant, x5, y5);

曲線を作成するために定数がポイント 2 とポイント 4 の y 位置を再調整する場所はどこですか?

4

2 に答える 2

6

数学的には、直線セグメントは一種の曲線セグメントにすぎないという事実を利用する必要があります。

（思ったより簡単です、信じてください。）

ベジェ パス セグメントには「順序」と呼ばれるものがあります。これは、元のポイントを数えずに、セグメント内にいくつのポイントがあるかを本質的に決定します。

  • 直線セグメントは 1 次曲線です。つまり、終点しかありません。これらの「カーブ」は、カーブするコントロール ポイントがないため、常に直線です。
  • 二次曲線は二次曲線です (1 つの制御点と目的地)。
  • 3 次曲線は 3 次曲線です (2 つの制御点)。
  • (数学ではこれに制限はありませんが、Quartz はここで停止します。独自のラスタライザーを展開しない限り、4 次曲線はありません。)

これは、直線を含む低次の曲線が高次の曲線として表現できるため、重要です。

それで、秘密は？

まっすぐなテールでも、カーブを使用します。

(つまり、曲線を 2 つの異なる方向に向けたいため、3 次曲線です。1 つは多かれ少なかれ尾に向かって、もう 1 つは多かれ少なかれ風船の端に沿って進みます。)

尾の付け根にある 2 つのポイントのそれぞれから、コントロール ポイントの 1 つが目的地までの約半分になるようにします。このくらいは無条件です。

各コントロール ポイントの方向には、次の 3 つのオプションがあります。

ストレートテール

2 つの基点の間で尾の先端が水平になり、制御点が各基点と先端点のちょうど中間にある、まっすぐ下向きの尾の図。

画像の垂直方向の中央にある青い線に沿った 2 つのコントロール ポイントに注目してください。

これらの 2 つの制御点の方向に注意してください。接続先の基点を基準にしています。それらは、先端に向かって内側に角度が付けられています。実際、先端までの直線上にあります。

斜めの尾

傾斜しているが曲がっていない尾の写真。

ここで、先端点は 2 つの基点の間で水平ではなくなります。制御点は移動しましたが、追従するだけです。各制御点は、対応する基点と先端の間の直線に沿った中間にあります。

湾曲した尾

湾曲した尻尾の写真。

曲がった尾の場合は先端を動かしますが、制御点はまっすぐな尾の場合と同じ位置に保ちます。このように、尻尾は (コントロール ポイントに沿って) 真っ直ぐに伸びますが、ベース ポイントから遠ざかるにつれて、その影響が弱まり、尻尾は先端に向かって曲がり始めます。

これは、コードに記述するよりも視覚的に説明する方がはるかに簡単です。そのため、PaintCode や Opacity などを使用して、ペン ツールを使用して各種のしっぽを描画し、それらが生成するコードがどのように見えるかを確認することを検討してください。

于 2013-05-28T01:14:22.170 に答える