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

Posted 2023-03-05

【中文标题】如何在 Canvas html 标记中绘制垂直线

【英文标题】：How to Draw Perpendicular line in Canvas html tag [closed]

【发布时间】：2018-10-01 06:03:30

【问题描述】：

我有一个起始坐标（x1，y1）和结束坐标（x2，y2）的线。

context.beginPath();
context.lineTo(x1,y1);
context.lineTo(x2,y2);
context.stroke()

我想在 Canvas Tag 中从该线的中间画一条垂直线。

非常感谢热情的回复或指导。

【问题讨论】：

请添加您当前的代码

我只是使用下面的代码 context.lineTo(x,y) context.stroke() 在 Canvas Tag 中绘制一条线，并想绘制与该线垂直的线

【参考方案1】：

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

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

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

【讨论】：

完美为我工作 感谢您的指导

【参考方案2】：

要绘制一条垂直线，您只需将其旋转 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;

【讨论】：

代码运行良好，但我想从基线的中点绘制垂直线

那么在这种情况下，您需要获得中间位置，对于 X var midX=line.x0+(line.x1-line.x0)*0.50; 和对于 Y var midY=line.y0+(line.y1-line.y0)*0.50;

我已经得到了基线的中点。我想从那个中间点画一条垂直线