Question

除了使用查找表外，还有另一种方法来优化这样的三次Bézier曲线的参数化算法吗？（对于速度较慢的PC来说，5000步的良好参数设置实在太多了，因为我需要在1秒钟内多次调用此函数）：

function parameterizeCurve(path, partArc, initialT)
{
   // curve length is already known and globally defined
   // brute force
   var STEPS = 5000; // > precision
   var t = 1 / STEPS;
   var aX=0;
   var aY=0;
   var bX=path[0], bY=path[1];
   var dX=0, dY=0;
   var dS = 0;
   var sumArc = 0;
   var arrT = new Array(Math.round(partArc)); 
   var z = 1;
   arrT[0] = -1;

   var oldpartArc = partArc;
   partArc = partArc - initialT;

   var j = 0;

   for (var i=0; i<STEPS; j = j + t) {
      aX = bezierPoint(j, path[0], path[2], path[4], path[6]);
      aY = bezierPoint(j, path[1], path[3], path[5], path[7]);

      dX = aX - bX;
      dY = aY - bY;
      // deltaS. Pitagora
      dS = Math.sqrt((dX * dX) + (dY * dY));
      sumArc = sumArc + dS;
      if (sumArc >= partArc) {
         arrT[z] = j; // save current t
         z++;
         sumArc = 0;
         partArc = oldpartArc;
      }
      bX = aX;
      bY = aY;
      i++;
   }

   return arrT;
}


    function bezierPoint(t, o1, c1, c2, e1) {
        var C1 = (e1 - (3.0 * c2) + (3.0 * c1) - o1);
        var C2 = ((3.0 * c2) - (6.0 * c1) + (3.0 * o1));
        var C3 = ((3.0 * c1) - (3.0 * o1));
        var C4 = (o1);

        return ((C1*t*t*t) + (C2*t*t) + (C3*t) + C4)
    }

Answer 1

如果我猜对了，你试图想出一个沿曲线以恒定速度移动的三次贝塞尔曲线参数化。

那么，为什么你需要5000个步骤？可以沿曲线移动的最小值是一个像素。 Bezier保持在其四个控制点的凸包内，因此曲线的长度将小于折线P0 -> P1 -> P2 -> P3的长度。所以找到以像素为单位的长度，并使用它（而不是5000）。

如果这样可以加快速度，请告诉我。

优化三次贝塞尔曲线的参数化算法

1 个答案: