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

我不确定我是否要问这个权利。这是用于平面图绘制的东西，现在我的线的两端都有可移动的点，因此画布是交互式的。我想使用一条曲线来创建一条沿该线绘制的门口弧。我有现有代码的起点和终点，曲线的起点和终点在哪里，但是弧线控件是针对未计算的特定坐标的，因此弧线永远不会到达应该到达的位置。

这就是我现在所拥有的，我了解到moveTo（）和lineTo（）是控制其起点和终点的原因。感谢您的帮助，我以前从未玩过帆布

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();

最佳答案

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

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>

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

关于javascript - 使用bezierCurveTo绘制圆弧，并带有相对于圆弧点的坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51847007/