私はこのコードにより、デリバティブ取得私はベジェ曲線でテキストを折り返すしようとしていると、このリンクからチュートリアルを、以下、<a href="http://www.planetclegg.com/projects/WarpingTextToSplines.html" rel="nofollow noreferrer">http://www.planetclegg.com/projects/WarpingTextToSplines.html</a></p> <p>よ2D

Question

でベジェ曲線の通常のGET：

function Derivative(x0,x1,x2,t) 
{ 
    var mt = 1-t; 
    var a = mt * mt; 
    var b = mt * t * 2; 
    var c = t * t; 
    var result=a * x0 + b * x1 + c * x2; 
    return result; 
} 

は、だから私は、通常のcalcu

function Normal(x0,x1,x2,y0,y1,y2,t) 
{  
    var dx = Derivative(x0,x1,x2,t);  
    var dy = Derivative(y0,y1,y2,t); 

    var q = Math.sqrt(dx*dx + dy*dy) 
    return { x: -dy/q, y: dx/q }; 
}; 

この結果は間違っていますが、私はどこがわからないのですか。

おかげで、あなたのすべて！

Answer 1

"私が欲しいもの"のイメージは、私のbezierjs documentationとよく似ています。正しいアイデアがあります（接線ベクトルを得るために導関数を取り、次に回転させて回転させます）が、右。

次の3つの2D点P1からなる、二次ベジェ曲線を使用している場合には、P2及びP3は、次いで、ベジェ関数である：

P1 * (1-t)² + P2 * 2 * (1-t)t + P3 * t² 

及び誘導体（で書かれた多くの方法のいずれか）であります：

P1 * (2t-2) + (2*P3-4*P2) * t + 2 * P2 

あなたが派生計算として示したコードは、実際には、通常の二次ベジェ関数であるので、それはあなたではなく、間違った結果を与えるために起こっています。コードを正しい派生物に更新すると、うまくいくはずです。

Answer 2

Pomax時の答えはあなたが必要なすべてのですが、ここでは、コードのビットの世話場合、いくつかのutilのメソッドをJavaScriptで実装されています：

// these methods are only for quadratic curves 

// p1: {x,y} start point 
// pc: {x,y} control point  
// p2: {x,y} end point 
// t: (float between 0 and 1) time in the curve 

getPointAt(t, p1, pc, p2) { 
    const x = (1 - t) * (1 - t) * p1.x + 2 * (1 - t) * t * pc.x + t * t * p2.x 
    const y = (1 - t) * (1 - t) * p1.y + 2 * (1 - t) * t * pc.y + t * t * p2.y 

    return { x, y }; 
} 

getDerivativeAt(t, p1, pc, p2) { 
    const d1 = { x: 2 * (pc.x - p1.x), y: 2 * (pc.y - p1.y) }; 
    const d2 = { x: 2 * (p2.x - pc.x), y: 2 * (p2.y - pc.y) }; 

    const x = (1 - t) * d1.x + t * d2.x; 
    const y = (1 - t) * d1.y + t * d2.y; 

    return { x, y }; 
} 

getNormalAt(t, p1, pc, p2) { 
    const d = getDerivativeAt(t, p1, pc, p2); 
    const q = sqrt(d.x * d.x + d.y * d.y); 

    const x = -d.y/q; 
    const y = d.x/q; 

    return { x, y }; 
} 

https://jsfiddle.net/Lupq8ejm/1/