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

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 documentation ，所以:你有正确的想法(取导数得到切向量，然后旋转得到法线)，但一定要正确地得到这些导数。

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

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

和派生(以多种方式之一编写)是:

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

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