Canvas HTML |追踪垂直于两点并通过一个点的直线

Question

在 html canvas 中，我画了一条线，从 A 点开始，到 B 点结束。给定一个 C 点，我应该画一条垂直于 A 和 B 的直线并从 C 穿过的直线。

下面是我如何创建从 A 和 B 穿过的线（点作为输入，为了方便起见，在本例中它们由变量提供。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

现在给定C（例如C = 80, 130）我想画一条垂直于A和B之间的线并从C经过的线如何计算允许我创建这条线的点数？

例如这个：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(80, 10);
ctx.lineTo(80, 130);
 ctx.arc(80, 130, 2, 0, 360, false); // C
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

非常感谢您的帮助！

Answer 1

在非平凡（线不是垂直或水平）的情况下，您只需要知道垂直线的梯度比直线的梯度减一。我希望下面的代码片段对您有所帮助。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var pointA = {
  x: 0.0,
  y: 0.0
};
var pointB = {
  x: 200.0,
  y: 150.0
};
var pointC = {
  x: 80.0,
  y: 130.0
};
var pointD = {
  x: 0.0,
  y: 0.0
};

if (pointA.y == pointB.y) { // AB is horizontal
  pointD.x = pointC.x
  pointD.y = pointA.y
} else if (pointA.x == pointB.x) { // AB is vertical
  pointD.x = pointA.x
  pointD.y = pointC.y
} else { // need some geometry
  var gradientOfAB = (pointA.y - pointB.y) / (pointA.x - pointB.x);
  var interceptOfAB = pointA.y - gradientOfAB * pointA.x;

  var gradientOfCD = -1 / gradientOfAB;
  var interceptOfCD = pointC.y - gradientOfCD * pointC.x;

  pointD.x = (interceptOfAB - interceptOfCD) / (gradientOfCD - gradientOfAB);
  pointD.y = gradientOfCD * pointD.x + interceptOfCD;
}

ctx.beginPath();
ctx.moveTo(pointA.x, pointA.y);
ctx.lineTo(pointB.x, pointB.y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(pointD.x, pointD.y);
ctx.lineTo(pointC.x, pointC.y);
ctx.arc(pointC.x, pointC.y, 2, 0, 360, false);
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

Canvas HTML |追踪垂直于两点并通过一个点的直线

Canvas HTML | Track a line perpendicular to two point and passing through a point

html

javascript

geometry

html5-canvas

geometry-surface