math - 二次ベジエ曲線: ポイントの計算

Question

二次曲線上の点を計算したいと思います。HTML5 の canvas 要素で使用します。

JavaScript でこの関数を使用するとquadraticCurveTo()、ソース ポイント、ターゲット ポイント、およびコントロール ポイントがあります。

t=0.5この3点を「知っている」だけで、作成された2次曲線上の点をどのように計算できますか?

Answer 1

たとえば、ウィキペディアのベジエ曲線のページにある二次ベジエ式を使用します。

疑似コードでは、それは

t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

p[0]は始点、p[1]は制御点、p[2]は終点です。tはパラメータで、0 から 1 になります。

Answer 2

誰かが立方体を必要とする場合:

        //B(t) = (1-t)**3 p0 + 3(1 - t)**2 t P1 + 3(1-t)t**2 P2 + t**3 P3

        x = (1-t)*(1-t)*(1-t)*p0x + 3*(1-t)*(1-t)*t*p1x + 3*(1-t)*t*t*p2x + t*t*t*p3x;
        y = (1-t)*(1-t)*(1-t)*p0y + 3*(1-t)*(1-t)*t*p1y + 3*(1-t)*t*t*p2y + t*t*t*p3y;

Answer 3

このデモを作成しました：

// x = a * (1-t)³ + b * 3 * (1-t)²t + c * 3 * (1-t)t² + d * t³
//------------------------------------------------------------
// x = a - 3at + 3at² - at³ 
//       + 3bt - 6bt² + 3bt³
//             + 3ct² - 3ct³
//                    + dt³
//--------------------------------
// x = - at³  + 3bt³ - 3ct³ + dt³
//     + 3at² - 6bt² + 3ct²
//     - 3at + 3bt
//     + a
//--------------------------------
// 0 = t³ (-a+3b-3c+d) +  => A
//     t² (3a-6b+3c)   +  => B
//     t  (-3a+3b)     +  => c
//     a - x              => D
//--------------------------------

var A = d - 3*c + 3*b - a,
    B = 3*c - 6*b + 3*a,
    C = 3*b - 3*a,
    D = a-x;

// So we need to solve At³ + Bt² + Ct + D = 0 

完全な例はこちら

誰かを助けるかもしれません。

Answer 4

注意: ここに示す通常の式を使用している場合、t = 0.5 で曲線の長さの半分の点が返されるとは思わないでください。ほとんどの場合、そうではありません。

詳細については、「§23 — 一定の距離間隔でカーブをトレースする」と、こちらを参照してください。