Bezier曲线辅助

Question

我正在尝试取我的Bezier曲线，并在中间添加更多的曲线(见图)。

​

目前，我的贝塞尔曲线没有那么弯曲。我试过把所有的数字都弄乱了，但我什么也没得到。请看我的小提琴档案：http://jsfiddle.net/FVU47/

相关守则：

var rect1 = {
  x: 103,
  y: 262,
  w: 200,
  h: 100,
};

var rect2 = {
  x: 484,
  y: 170,
  w: 200,
  h: 100,
}

function drawBezier() {
  context.beginPath();
  context.moveTo(rect2.x + rect2.w/2, rect2.y + rect2.h/2);
  context.bezierCurveTo(434,314,354,218, rect1.x+rect1.w/2, rect1.y +rect1.h/2);
  context.lineWidth = 20;
  context.strokeStyle = 'white';
  context.stroke();
}

Answer 1

我的猜测是，如果你想对贝塞尔曲线这样的形状，你不应该使用矩形的中心，而是首先检索矩形的哪一边(边)面对(连接)，在你上面的例子中，它是Box1的右边连接到Box2的左边。然后，使用边的中心作为bezier曲线的起始点/终点，根据连接的边可以添加中间点(如果右边连接到左边或上/下边，则可能不同)。