カスタム形状にスプライン曲線セグメントを追加します。
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つのパラメータ、x
とy
は、頂点の位置を設定します。 例えば、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!