用弧点的相对坐标用 bezierCurveTo 绘制弧答案

【问题标题】：Draw arc with bezierCurveTo with relative coordinates for the arc points用弧点的相对坐标用 bezierCurveTo 绘制弧
【发布时间】：2018-08-24 22:35:01
【问题描述】：

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

这就是我现在所拥有的，我了解到 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();

【问题讨论】：

您是否尝试过我在回答中提到的弧线？
嘿抱歉！感谢您的回答，它对我帮助很大，但在这里仍然有些挣扎。假设点之间有一条水平线，这给了我正确的形状，但是由于我的起点和终点位于可变位置，因此它可以处于任何角度，并且绘制的门将保持不动并且看起来很奇怪。我正在尝试使用旋转功能，但它很困难。
我对我的答案做了一些更改...将代码移动到功能并绘制对角开门...您只需要使用起始角度即可
如果您有更复杂的场景，请创建一个适当的 sn-p 重现您的问题。
我猜最后一个版本是为你做的......

标签： javascript canvas html5-canvas

【解决方案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);

&lt;canvas id="canvas" width="300" height="150"&gt;&lt;/canvas&gt;

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

【讨论】：