Question

我有一条带有起始坐标（x1，y1）和结束坐标（x2，y2）的线。我想在Canvas Tag中从该行的中间画出垂直线。

热烈的回复或指导将不胜感激。

Answer 1

要绘制垂直线，只需将其旋转90º，按照包含一些示例函数的this question answered before进行操作，例如：

function setTransformToLine(x1, y1, x2, y2) {
  const vx = x2 - x1;   // get the line as vector
  const vy = y2 - y1;
  const len = Math.hypot(vx, vy); // For <= IE11 use Math.sqrt(vx * vx + vy * vy)
  const nx = vx / len; // Normalise the line vector. Making it one
  const ny = vy / len; // pixel long. This sets the scale

  // The transform is the normalised line vector for x axis, y at 90 deg 
  // and origin at line start
  ctx.setTransform(nx, ny, -ny, nx, x1, y1); // set transform

  return len;
}

Answer 2

线条中间的坐标是两端坐标的平均值：

var midX = (x1 + x2) / 2;
var midY = (y1 + y2) / 2;

垂直的方向向量与原始线相同，除了坐标被翻转并且其中一个坐标乘以-1（您乘以哪一个决定该线是从原始线顺时针还是逆时针方向）。将该方向向量添加到中点，您就可以垂直。

var dx = (x2 - x1);
var dy = (y2 - y1);
context.moveTo(midX, midY);
context.lineTo(midX + dy, midY - dx);
context.stroke();

这将绘制一条与原始线长度相同的垂线。如果要绘制不同的长度，则需要调整方向向量。阅读坐标几何和向量以获取更多详细信息。

如何在Canvas html标记中绘制垂直线

2 个答案: