javascript - 使用 bezierCurveTo 绘制圆弧，圆弧点的相对坐标

Question

我什至不确定我是否在问这个问题。这是用于平面图绘制的东西，现在我在每一端都有带有可移动点的线条，因此 Canvas 是交互式的。我想用一条曲线来创建一个门口弧线，沿着这条线绘制。我有现有代码的起点和终点，从哪里开始和结束曲线，但是弧控制是针对一个特定的坐标，这个坐标不是计算出来的，所以弧永远不会到达它应该去的地方。

这就是我现在所拥有的，我了解到 moveTo() 和 lineTo() 是控制其起点和终点的东西。感谢您的帮助，我以前从未玩过 Canvas

activeLineDrawing.beginPath();
activeLineDrawing.moveTo(lineSegments[lineSeg].panels[i].getX2(),lineSegments[lineSeg].panels[i].getY2());
activeLineDrawing.lineTo(lineSegments[lineSeg].panels[i].getX1(),lineSegments[lineSeg].panels[i].getY1());
activeLineDrawing.bezierCurveTo(100, 75, 50, 1, lineSegments[lineSeg].panels[i].getX2(),lineSegments[lineSeg].panels[i].getY2());
activeLineDrawing.fillStyle = 'lightgrey';
activeLineDrawing.strokeStyle = 'lightgrey';
activeLineDrawing.stroke();
activeLineDrawing.closePath();

Answer 1

尝试使用规则弧，这里是示例代码

function drawDoor(ctx, color, sx, sy, ex, ey, offset) {
  var mx = (sx + (sx + ex) / 2) /2
  var my = (sy + (sy + ey) / 2) /2
  var iniAng = Math.atan2(ey-sy, ex-sx)/Math.PI - offset;
  var endAng = (iniAng + offset);
  
  ctx.beginPath();
  ctx.moveTo(sx, sy);  
  ctx.strokeStyle = color;
  ctx.lineWidth=3;
  ctx.lineTo(mx, my);  
  ctx.arc(mx, my, 45, iniAng * Math.PI, endAng * Math.PI, offset<0);
  ctx.lineTo(ex, ey);
  ctx.stroke();
  ctx.closePath();
}

var canvas = document.getElementById("canvas");
var activeLineDrawing = canvas.getContext("2d");


// Door opening to the left
drawDoor(activeLineDrawing, "black", 180, 60, 270, 60, 0.5);

// Door opening to the right
drawDoor(activeLineDrawing, "red", 200, 100, 290, 100, -0.5);

// Diagonal door opening right
drawDoor(activeLineDrawing, "blue", 20, 20, 75, 80, -0.5);

// Diagonal door opening left
drawDoor(activeLineDrawing, "green", 50, 30, 140, 90, 0.5);

// Closet doors double opening
drawDoor(activeLineDrawing, "cyan", 145, 30, 145, 90, 0.25);
drawDoor(activeLineDrawing, "cyan", 145, 150, 145, 90, -0.25);

<canvas id="canvas" width="300" height="150"></canvas>

我的建议是花一些时间阅读和理解我在这里所做的事情背后的数学原理，这同样适用于许多其他地方。