获取二维贝塞尔曲线的法线

Question

我正在尝试在贝塞尔曲线中包装文本并遵循此链接中的教程，http://www.planetclegg.com/projects/WarpingTextToSplines.html

我通过此代码获得衍生：

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

所以我用这个代码计算正常：

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 文档，因此：您有正确的想法（取导数以获得切线向量，然后旋转以获得法线），但请确保正确获得这些导数。

如果您使用由三个二维点 P1、P2 和 P3 组成的二次贝塞尔曲线，则贝塞尔函数为：

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

和派生（以多种方式之一编写）是：

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

您显示为导数计算的代码实际上是常规的二次贝塞尔函数，因此会给您提供相当错误的结果。将代码更新为正确的衍生物，你应该没问题。