Question

我使用HTML画布绘制线条，如下图所示，但这条线的两边都有一条边。

如图所示，两条边与主线垂直我尝试了以下解决方案，但它没有成功：
*旋转边线，但旋转会将它们从原始位置转换为
*找到主线的角度，然后绘制相对于线的线，但这个解决方案不容易实现（很可能我错误地实现了它）。

这是我的代码，但它总是绘制垂直边缘：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x1 = 100;
var x2 = 150;
var y1 = 50;
var y2 = 120;

ctx.beginPath();
ctx.strokeStyle = "purple";  // Purple path
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);            
ctx.stroke();  // Draw it

ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x1,y1+10);
ctx.stroke();


ctx.restore();
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x1,(y1-10));
ctx.stroke();


ctx.beginPath();
ctx.moveTo(x2,y2);
ctx.lineTo(x2,y2+10);
ctx.stroke();


ctx.restore();
ctx.beginPath();
ctx.moveTo(x2,y2);
ctx.lineTo(x2,(y2-10));
ctx.stroke();


</script>
</body>
</html>

任何人都可以帮我旋转两条边线，以便与主线垂直。感谢。

Answer 1

将任何向量旋转90度

如果你还记得向量的旋转90度规则，那么垂直线很容易获得。

矢量{x,y}可以顺时针旋转90度{-y,x}或逆时针{y,-x}。只需交换x和y，然后将y取消顺时针或取反时钟的x

因此，对于线段x1，y1到x2，y2转换为矢量，将该矢量标准化并旋转90度，如下所示

function getPerpOfLine(x1,y1,x2,y2){ // the two points can not be the same
    var nx = x2 - x1;  // as vector
    var ny = y2 - y1;
    const len = Math.sqrt(nx * nx + ny * ny);  // length of line
    nx /= len;  // make one unit long
    ny /= len;  // which we call normalising a vector
    return [-ny, nx]; // return the normal  rotated 90 deg
}

然后说你想在线段的末端绘制一条10像素的线

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.append(canvas);
ctx.strokeStyle = "black";
ctx.lineJoin = ctx.lineCap = "round";
ctx.lineWidth = 3;

// the line segment
const x1 = 40, y1 = 40, x2 = 260, y2 = 110;
const endLen = 10; // length of end lines

var px = y1 - y2; // as vector at 90 deg to the line
var py = x2 - x1;
const len = endLen / Math.hypot(px, py);
px *= len;  // make leng 10 pixels
py *= len; 

// draw line the start cap and end cap.
ctx.beginPath();

ctx.lineTo(x1, y1);   // the line start
ctx.lineTo(x2, y2);
ctx.moveTo(x1 + px, y1 + py); // the start perp line
ctx.lineTo(x1 - px, y1 - py);
ctx.moveTo(x2 + px, y2 + py); // the end perp line
ctx.lineTo(x2 - px, y2 - py);
ctx.stroke();

更新

沿着一条线渲染内容的简单解决方案，使用相同的90deg规则。

有另一种使用相同矢量旋转渲染的方法，但不是通过矢量乘法设置垂直轴，而是将变换的y轴设置为沿着x轴的x轴。将原点设置为直线的起点，然后只需相对于直线渲染。

`setTransformToLine(x1, y1, x2, y2)`

以下函数将画布变换设置为沿着

行

// Set 2D context  current transform along the line x1,y1,x2,y2 and origin to
// start of line. y Axis is rotated clockwise 90 from the line.
// Returns the line length as that is most frequently required when
// using the method saving some time.
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;
}

如何使用

此示例显示如何使用变换执行相同的行，但也添加注释长度。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.append(canvas);
ctx.strokeStyle = "black";
ctx.lineJoin = ctx.lineCap = "round";
ctx.lineWidth = 3;
ctx.font = "16px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";

const x1 = 40, y1 = 40, x2 = 260, y2 = 110;
const endLen = 10; 


function setTransformToLine(x1, y1, x2, y2) {
  const vx = x2 - x1; 
  const vy = y2 - y1;
  const len = Math.hypot(vx, vy); 
  const nx = vx / len; 
  const ny = vy / len;
  ctx.setTransform(nx, ny, -ny, nx, x1, y1);
  return len;
}

// Set the transform along the line. Keep the line length
// line len is need to get the x coord of the end of the line
const lineLen = setTransformToLine(x1, y1, x2, y2);

const lineLenStr = Math.round(lineLen) + "px";
const textWidth = ctx.measureText(lineLenStr).width;

const rlen = lineLen - textWidth - 16; // find the remaining line len after removing space for text

// Rendering is done in line local coordinates
// line is from (0,0) to (lineLen,0)

// Now draw the line the ends first and then along the line leaving gap for text
ctx.beginPath();
ctx.lineTo(0, -endLen);             // start perp line
ctx.lineTo(0,  endLen); 

ctx.moveTo(lineLen, -endLen);       // end of line is at lineLen
ctx.lineTo(lineLen,  endLen); 

ctx.moveTo(0,0);                    // line start segment
ctx.lineTo(rlen / 2, 0);

ctx.moveTo(lineLen - rlen / 2,0);   // line end segment
ctx.lineTo(lineLen, 0);

ctx.stroke(); // render it.

// now add text at the line center
ctx.fillText(lineLenStr, lineLen / 2, 0);

// To restore the transform to its default use identity matrix
ctx.setTransform(1, 0, 0, 1, 0, 0);

Answer 2

这样的东西？

var canvas = document.getElementById('canvas');
var c      = canvas.getContext('2d');

//save orientation of context
c.save();

// Rotate the plane of the drawing context around centre.
// The canvas is defined in HTML as 100x100 so centre is at 50, 50
c.translate(50, 50);
c.rotate(45 * Math.PI / 180); //45°
c.translate(-50, -50);

//draw as if your lines were parallel to the X & Y axes
c.beginPath();
c.moveTo(20, 45);
c.lineTo(20, 55);
c.stroke();

c.beginPath();
c.moveTo(20, 50);
c.lineTo(80, 50);
c.stroke();

c.beginPath();
c.moveTo(80, 45);
c.lineTo(80, 55);
c.stroke();

//restore context to original orientation
c.restore()

canvas {background: lime;}

<canvas id="canvas" width="100" height="100">
</canvas>

Answer 3

您只需要计算原始线的斜率，即(y2 - y1)/(x2 - x1)，然后使用它来斜率原始边缘的新线。这是一个简单的例子：

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var x1 = 100;
var x2 = 150;
var y1 = 50;
var y2 = 120;

ctx.beginPath();
ctx.strokeStyle = "purple"; // Purple path
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke(); // Draw it

var slope = (y2 - y1) / (x2 - x1);

ctx.beginPath();
ctx.lineTo(x1 + slope * 4, y1 - slope * 4);
ctx.lineTo(x1 - slope * 4, y1 + slope * 4);
ctx.stroke();

ctx.beginPath();
ctx.lineTo(x2 - slope * 4, y2 + slope * 4);
ctx.lineTo(x2 + slope * 4, y2 - slope * 4);
ctx.stroke();

＆＃13;

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">

＆＃13;

请注意，这更像是一个数学理论问题，因此这个例子只是展示了如何做到这一点的想法。您应该花点时间阅读有关数学和几何的更多信息，以完美地实现其背后的逻辑。

在旁注中，您的代码已经简化，因为垂直线的一些绘制调用是多余的并且可能已合并。

Answer 4

您可以找到第一条线的斜率（请参见下面的代码），然后是垂直斜率，沿着这些线的移动（再次如图所示）。

ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.moveTo(firstPoint.x, firstPoint.y);
ctx.lineTo(secondPoint.x, secondPoint.y);

const slope = getSlope(firstPoint, secondPoint);
const perpSlope = getPerpSlope(slope);

let perpPointOne = findPointOnLine(firstPoint, perpSlope, 10);
let perpPointTwo = findPointOnLine(firstPoint, perpSlope, -10);

ctx.moveTo(perpPointOne.x, perpPointOne.y);
ctx.lineTo(perpPointTwo.x, perpPointTwo.y);

perpPointOne = findPointOnLine(secondPoint, perpSlope, 10);
perpPointTwo = findPointOnLine(secondPoint, perpSlope, -10);

ctx.moveTo(perpPointOne.x, perpPointOne.y);
ctx.lineTo(perpPointTwo.x, perpPointTwo.y);

ctx.stroke();

function getSlope(pointA, pointB)
{
    return (pointB.y - pointA.y) / (pointB.x - pointA.x);
}

function getPerpSlope(slope)
{
  return -1 / slope;
}

function findPointOnLine(startPoint, slope, distance)
{
    const newPoint = { };

    if (slope === 0) {
       newPoint.x = startPoint.x + distance; 
       newPoint.y = startPoint.y; 

    } else if (slope === Infinity) {

       newPoint.x = startPoint.x; 
       newPoint.y = startPoint.y + distance; 

    } else { 

       dx = (distance / Math.sqrt(1 + (slope * slope))); 
       dy = slope * dx; 

       newPoint.x = startPoint.x + dx; 
       newPoint.y = startPoint.y + dy; 
    }
    return newPoint;
}

HTML画布绘制线垂直于另一条线

4 个答案:

将任何向量旋转90度

`setTransformToLine(x1, y1, x2, y2)`

如何使用