0

现在我用的方法只能得到一条曲线的点，因为第二条曲线我不知道起点，我试着用第一条曲线的终点作为第二条曲线的起点，但这似乎是错误的，我尝试了多种变体，但似乎都不起作用。有任何想法吗？这是我的曲线，我将它们保存在一个数组中：

["M 326, 184 C326, 184",
"341, 197 426, 204 514, 210",
"643, 205 676, 184 677, 192",
"647, 251 674, 251 674, 251",
"666, 420 666, 420 666, 420",
"649, 815 647, 846 631, 877",
"557, 900 500, 898 450, 901",
"373, 877 355, 846 353, 798",
"346, 642 346, 642 346, 642 325, 228 326, 184 Z"]

var PI2=Math.PI*2;
var s={x:dis[i][0],y:dis[i][1]};
var c1={x:dis[i][2],y:dis[i][3]};
var c2={x:dis[i][4],y:dis[i][5]};
var e={x:dis[i][6],y:dis[i][7]};
// an array of points plotted along the bezier curve


// we use PI often so put it in a variable
var PI=Math.PI;

// plot 400 points along the curve
// and also calculate the angle of the curve at that point
// NOTE: You may need to adjust the point count (==100 here)
//      if the curve is much shorter or longer than this demo's curve
for(var t=0;t<=100;t+=0.25){

  var T=t/100;

  // plot a point on the curve
  var pos=getCubicBezierXYatT(s,c1,c2,e,T);

  // calculate the tangent angle of the curve at that point
  
  var tx = bezierTangent(s.x,c1.x,c2.x,e.x,T);
  var ty = bezierTangent(s.y,c1.y,c2.y,e.y,T);
  var a = Math.atan2(ty, tx)-PI/2;

  // save the x/y position of the point and the tangent angle
  // in the points array
  points.push({
    x:pos.x,
    y:pos.y,
    angle:a
  });
}
}

function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
  var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
  var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
  return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(T, a,b,c,d){
  var t2 = T * T;
  var t3 = t2 * T;
  return a + (-a * 3 + T * (3 * a - a * T)) * T
  + (3 * b + T * (-6 * b + b * 3 * T)) * T
  + (c * 3 - c * 3 * T) * t2
  + d * t3;
}

// calculate the tangent angle at interval T on the curve
function bezierTangent(a, b, c, d, t){
  return (3 * t * t * (-a + 3 * b - 3 * c + d) + 6 * t * (a - 2 * b + c) + 3 * (-a + b));
 
};```
4

0 回答 0