リファレンス curveVertex()

curveVertex()

カスタム形状にスプライン曲線セグメントを追加します。

curveVertex()はカスタム形状に曲線セグメントを追加します。作成される スプライン曲線は、curve()関数で作成される ものと同様に定義されます。curveVertex()beginShape()endShape()関数の間で呼び出す必要があります。

スプライン曲線は、緩やかに傾斜する形状や曲線を形成することができます。それらは 一連の点に取り付けられたケーブルのようなものです。スプラインは2つの アンカーポイントと2つの制御点によって定義されます。曲線を描画するためには、 curveVertex()beginShape()endShape()の間で少なくとも4回呼び出す必要があります:

beginShape(); <p>// 最初の制御点を追加します。 curveVertex(84, 91);</p> <p>// 描画するアンカーポイントを追加します。 curveVertex(68, 19); curveVertex(21, 17);</p> <p>// 2番目の制御点を追加します。 curveVertex(32, 91);</p> <p>endShape(); </p>

上記のコードスニペットは、curve()関数と 同様に、アンカーポイント間の曲線のみを描画します。制御点と アンカーポイント間のセグメントを描画するには、制御点の座標で curveVertex()を呼び出すことができます:

beginShape(); <p>// 最初の制御点を追加し、そこまでのセグメントを描画します。 curveVertex(84, 91); curveVertex(84, 91);</p> <p>// 描画するアンカーポイントを追加します。 curveVertex(68, 19); curveVertex(21, 17);</p> <p>// 2番目の制御点を追加します。 curveVertex(32, 91);</p> <p>// 2番目の制御点までのセグメントを描画するには、次の行のコメントを解除します。 // curveVertex(32, 91);</p> <p>endShape(); </p>

最初の2つのパラメータ、xyは、頂点の位置を設定します。 例えば、curveVertex(10, 10)を呼び出すと、 (10, 10)に点が曲線に追加されます。

スプライン曲線はWebGLモードを使用して3Dでも描画できます。3Dバージョンの curveVertex()は3つの引数を持ちます。各点がx、y、z座標を 持つためです。デフォルトでは、頂点のz座標は0に設定されます。

注意:curveVertex()beginShape()に引数が渡された場合は 機能しません。

実例

シンタックス

curveVertex(x, y)
curveVertex(x, y, [z])

パラメーター

x
Number:

頂点のx座標

y
Number:

頂点のy座標

z
Number:

頂点のz座標。

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!

関連するリファレンス