貝塞爾曲線輔助

Question

我正在嘗試獲取貝塞爾曲線，並在中心添加更多曲線（請參見圖片）。

目前，我的貝塞爾曲線不太彎曲。 我試過弄亂所有各種數字，但是我什么也沒得到。 請查看我的小提琴文件： 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的左邊緣。 之后，將邊緣的中心用作貝塞爾曲線的起點/終點，可以根據所連接的邊緣添加中間點（如果右側邊緣連接至左側邊緣或頂部/底部邊緣，則中間點可能會有所不同）。