のように、あなたは4点が必要なベジェ曲線を定義するには(x)の
あなたが曲線y = fであるとしましょう: P1xと、P1Y、P2xの、P2Y、P3X、P3yとP4xをとP4yを
P1とP4は曲線の始点/終点です。 P2およびP3は制御点である。 カーブの開始点と終了点はすでにわかっています。あなたはP2とP3を計算しなければなりません。 x座標P2xとP3xは、曲線のt
を例えば1/3と2/3に選択して選択するだけなので、簡単です。だからあなたはP2xとP3xを持っています 次に、2つの方程式と2つの未知数(P2yとP3y)のシステムになります。 は、あなたがこのようなもので終わるいくつかの数学をクランチした後:
(私のf(x)はまた、私はまさにそれに1本の立方ベジエ曲線にフィットすることができるだろうことを保証三次多項式であった。)
/**
@params {Object} firstPoint = {x:...,y...}
@params {Object} lastPoint = {x:...,y...}
@params {Object} cubicPoly Definition of a cubic polynomial in the form y=ax^3+bx^2+c.
Has a method EvaluateAt, which calculates y for a particular x
*/
var CalcBezierControlPoints = function(firstPoint, lastPoint, cubicPoly) {
var xDiff = lastPoint.X - firstPoint.X;
var x1 = firstPoint.X + xDiff/3.0;
var x2 = firstPoint.X + 2.0 * xDiff/3.0;
var y1 = cubicPoly.EvaluateAt(x1);
var y2 = cubicPoly.EvaluateAt(x2);
var f1 = 0.296296296296296296296; // (1-1/3)^3
var f2 = 0.037037037037037037037; // (1-2/3)^3
var f3 = 0.296296296296296296296; // (2/3)^3
var b1 = y1 - firstPoint.Y * f1 - lastPoint.Y/27.0;
var b2 = y2 - firstPoint.Y * f2 - f3 * lastPoint.Y;
var c1 = (-2 * b1 + b2)/-0.666666666666666666;
var c2 = (b2 - 0.2222222222222 * c1)/0.44444444444444444;
var p2 = {};
var p3 = {};
p2.X = x1;
p2.Y = c1;
p3.X = x2;
p3.Y = c2;
return ([p2, p3]);
}
クイックアンサーに感謝します。私は代数が必要になるだろうと思ったが、カーブが何千もの点を持つことができれば、少しばかげてしまうかもしれない。大きな曲線を小さな曲線に分割し、2点法を適用しようとします。もしうまく動かない場合は、2点以上を試してみてください! – Everlag
曲線の正確さがそれほど問題にならない場合は、2点を選んで2点法を試してみることができます。:) – tfinniga
sobel演算子で隔てられたエッジの適切なレクリエーションを目指しています。もっと好ましい。 – Everlag