curve()

Catmull-Romスプラインを使用して曲線を描画します。

スプライン曲線は、緩やかに傾斜する形状や曲線を形成できます。これらは 一連の点に取り付けられたケーブルのようなものです。スプラインは2つの アンカーポイントと2つの制御点によって定義されます。

最初の2つのパラメータ、x1y1は、最初の制御点を設定します。この 点は描画されず、曲線の開始点と考えることができます。

次の4つのパラメータ、x2y2x3y3は、2つのアンカー ポイントを設定します。アンカーポイントは、曲線の可視部分の開始点と終了点です。

7番目と8番目のパラメータ、x4y4は、最後の制御点を設定します。 この点は描画されず、曲線の終了点と考えることができます。

スプライン曲線は、WebGLモードを使用して3Dでも描画できます。3Dバージョンの curve()は12個の引数を持ちます。各点がx、y、z座標を持つためです。

実例

シンタックス

curve(x1, y1, x2, y2, x3, y3, x4, y4)
curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

パラメーター

x1
Number:

最初の制御点のx座標。

y1
Number:

最初の制御点のy座標。

x2
Number:

最初のアンカーポイントのx座標。

y2
Number:

最初のアンカーポイントのy座標。

x3
Number:

2番目のアンカーポイントのx座標。

y3
Number:

2番目のアンカーポイントのy座標。

x4
Number:

2番目の制御点のx座標。

y4
Number:

2番目の制御点のy座標。

z1
Number:

最初の制御点のz座標。

z2
Number:

最初のアンカーポイントのz座標。

z3
Number:

2番目のアンカーポイントのz座標。

z4
Number:

2番目の制御点のz座標。

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

関連するリファレンス