canvas - キャンバスのベジェ曲線の特定の点のY座標を見つける方法は？

Question

キャンバスのベジェ曲線の特定の点のY座標を見つける必要があります。あなたはそれを見つける方法を知っていますか？ありがとうございました

Answer 1

de Casteljau のアルゴリズムを使用すると、任意の t、パーセンテージ、または補間ステップのベジエ曲線の座標 x と y を見つけることができます。したがって、at of .1 は、最初から曲線の 10% の x と y を示します。.9 の t は、最初から 90% ということになります。

3 次ベジエには、p0 (ポイント 0)、cp0 (コントロール ポイント 0)、cp1 (コントロール ポイント 1)、および p1 (ポイント 1) があります。

アルゴリズムの最初のステップでは、p0 と cp0 を結ぶ線、cp0 と cp1 を結ぶ別の線、さらに cp1 と p1 を結ぶ別の線を描画します。次に、これら 3 行すべてについて、それらの開始点から t % の点を見つけます。

ポイントを次のように呼びます。

• p0 -> cp0 = A
• cp0 -> cp1 = B

• cp1 -> p1 = C

  Ax = ( (1 - t) * p0x ) + (t * cp0x);
  Ay = ( (1 - t) * p0y ) + (t * cp0y);
  Bx = ( (1 - t) * cp0x ) + (t * cp1x);
  By = ( (1 - t) * cp0y ) + (t * cp1y);
  Cx = ( (1 - t) * cp1x ) + (t * p1x);
  Cy = ( (1 - t) * cp1y ) + (t * p1y);
  

2 番目のステップは、最初のステップと非常によく似ています。最初に、4 つの点を線で結び、その上に 3 つの新しい点を見つけました。このステップでは、これらの 3 点を線で結び、その上に 2 つの新しい点を見つけます。この 2 つの新しい点を D と E と呼びます。

    Dx = ( (1 - t) * Ax ) + (t * Bx);
    Dy = ( (1 - t) * Ay ) + (t * By);

    Ex = ( (1 - t) * Bx ) + (t * Cx);
    Ey = ( (1 - t) * By ) + (t * Cy);

最後に、これらの最後の 2 点を別の線で結び、最後の点を見つけて、その t のベジエ曲線上の点を得ることができます。この点を P とします。

    Px = ( (1 - t) * Dx ) + (t * Ex);
    Py = ( (1 - t) * Dy ) + (t * Ey);

これで、開始から t% のベジエ上の点の x 座標と y 座標が得られました。私はすぐにいくつかの写真を追加します。

Answer 2

@DerekR: あなたがここで提示したことは明確で、おそらく多くの人にとって役立つものですが、答えと、あなた自身と immo による次のすべてのコメントは問題に対処していないと思います。

（私の数学は苦手で、同じ問題を解こうとしてきたので、フォローアップのコメントが理解できないかもしれません。）

問題は次のとおりだと思います: 2 つの終点と 2 つの制御点の X、Y 座標を知り、範囲が 0 から 1 であると仮定すると、Y が与えられると、Y とは何ですか?

私は初心者で、まだ画像を投稿できませんが、duck.cc/images/beziercurve_findY.png で曲線を確認できます。

Answer 3

円の方程式は次のとおりです: (xh)^2 + (yk)^2 = r^2 ここで、h、k は中心の x、y 座標です。したがって、y の式は y = sqrt(r^2 - (xh)^2) + k になります。ほとんどの言語には Math パッケージが付属していますMath.sqrt(..)。Math.pow(..)

私の数学がずれている場合は、誰でも私を修正してください。