如何在没有 ctx.bezierCurveTo 的情况下使用原生 Javascript 代码绘制 Bezier 曲线？

Question

我需要在没有 ctx.bezierCurveTo 方法的情况下使用原生 Javascript 绘制和获取每个步骤的贝塞尔曲线的坐标。

我找到了几个资源，但我很困惑。 特别是这看起来很接近，但我无法清楚地实现。

我怎样才能做到这一点？

Answer 1

您可以绘制贝塞尔曲线：

bezier = function(t, p0, p1, p2, p3){
  var cX = 3 * (p1.x - p0.x),
      bX = 3 * (p2.x - p1.x) - cX,
      aX = p3.x - p0.x - cX - bX;

  var cY = 3 * (p1.y - p0.y),
      bY = 3 * (p2.y - p1.y) - cY,
      aY = p3.y - p0.y - cY - bY;

  var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
  var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;

  return {x: x, y: y};
},

(function(){
  var accuracy = 0.01, //this'll give the bezier 100 segments
      p0 = {x: 10, y: 10}, //use whatever points you want obviously
      p1 = {x: 50, y: 100},
      p2 = {x: 150, y: 200},
      p3 = {x: 200, y: 75},
      ctx = document.createElement('canvas').getContext('2d');

  ctx.width = 500;
  ctx.height = 500;
  document.body.appendChild(ctx.canvas);

  ctx.moveTo(p0.x, p0.y);
  for (var i=0; i<1; i+=accuracy){
     var p = bezier(i, p0, p1, p2, p3);
     ctx.lineTo(p.x, p.y);
  }

  ctx.stroke()
})()

这是一个小提琴http://jsfiddle.net/fQYsU/

Answer 2

这是您要添加以制作贝塞尔曲线的任意数量的点的代码示例。 您将传递的点是一个包含点的 x 和 y 值的对象数组。 [ { x: 1,y: 2 } , { x: 3,y: 4} ... ]

function factorial(n) {
    if(n<0)    
        return(-1); /*Wrong value*/      
    if(n==0)    
        return(1);  /*Terminating condition*/    
    else    
    {    
        return(n*factorial(n-1));        
    }
}

function nCr(n,r) {
    return( factorial(n) / ( factorial(r) * factorial(n-r) ) );
}

function BezierCurve(points) {
    let n=points.length;
    let curvepoints=[];
    for(let u=0; u <= 1 ; u += 0.0001 ){

        let p={x:0,y:0};

        for(let i=0 ; i<n ; i++){
            let B=nCr(n-1,i)*Math.pow((1-u),(n-1)-i)*Math.pow(u,i);
            let px=points[i].x*B;
            let py=points[i].y*B;
            
            p.x+=px;
            p.y+=py;
            
        }

        curvepoints.push(p);
    }
    
    return curvepoints;
}