Получить нормаль кривой Безье в 2D

Я пытаюсь обернуть текст кривой Безье и следующий учебник по этой ссылке, http://www.planetclegg.com/projects/WarpingTextToSplines.html Получить нормаль кривой Безье в 2D

я Производная по этому коду:

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; 
}

Так я рассчиты ваются Normal с кодом:

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 }; 
};

Итак, это результат: что-то не так, но я не знаю, где.

See image

Спасибо вам всем!

источник

2016-07-21 Nguyen Tien Dzung

Производная функции() в основном оценивает квадратичную кривую Безье с (x0, y0), (x1, y1) и (x2, y2) в качестве контрольных точек. Итак, если вы считаете, что для вычисления производной другой кривой, то, скорее всего, кривая в вашем уме на самом деле является кубической кривой Безье. Если это так, вам нужно будет передать x0 = P1x-P0x, x1 = P2x-P1x и x2 = P3x-P2x (то же самое для значений y0, y1, y2), где P0, P1, P2 и P3 являются контрольными точками кубической кривой Безье. – fang

Фактически кубический -> квадратичный P0, 2/3 P0-> P1, 2/3 P2-> p1, P2; – geowar

Изображение «Я хочу» очень похоже на мой bezierjs documentation, так что у вас есть правильная идея (возьмите производную, чтобы получить касательный вектор, затем поверните, чтобы получить нормальный), но обязательно получите эти производные правильно.

Если вы используете квадратичные кривые Безье, состоящие из трех 2d точек P1, P2 и P3, то функция Безье:

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

и производная (написано в России, но один из многих способов) является :

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

код вы показываете, как производная вычисления на самом деле регулярная квадратичная функция Безье, так что собирается дать вам достаточно неправильные результаты. Обновите код до нужной производной, и все будет в порядке.

источник

2016-07-26 00:17:55

ответ 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/

источник

2016-09-10 13:04:42 imbrizi

Получить нормаль кривой Безье в 2D

ответ

Смежные вопросы