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＆＃ 39;右边缘连接到Box2左边缘。之后，使用边缘中心作为贝塞尔曲线的起点/终点，可以根据连接边缘添加中间点（如果右边缘连接到左边缘或上边缘/下边缘，则可能不同）。