HTML5和javascript:在线条上绘制箭头

HTML5 & javascript: Drawing arrowheads on lines

本文关键字：绘制 在线 javascript HTML5      更新时间：2023-09-26

我有一个项目，其中包括许多动画流程图，这些流程图广泛使用箭头来指示流程。我创建了一个函数，它将绘制一条线并用箭头盖住它：这条线从终点向上延伸一半宽度，然后向右和向下延伸线的全宽，然后向下和向左镜像箭头的顶部， 最后回到原来的线尾。

我做了一个JSFiddle来演示这一点。

如您所见，它可以正常工作，但前提是线条完全水平并且从左到右运行。由于会有线向任何方向延伸，我需要能够将箭头设置为指向与线的角度相同的方向，箭头的背面垂直于该角度。有人对如何做到这一点有任何想法吗？

这是我正在使用的代码：

function drawLine(xStart, yStart, xEnd, yEnd, strokeColour, strokeWidth) {
var r = document.getElementById('theCanvas');
r = r.getContext('2d');
r.beginPath();
r.strokeStyle = strokeColour;
r.lineWidth = strokeWidth;
r.moveTo(xStart, yStart);
r.lineTo(xEnd, yEnd);
r.lineTo(xEnd, yEnd - (strokeWidth / 2));
r.lineTo(xEnd + strokeWidth, yEnd);
r.lineTo(xEnd, yEnd + (strokeWidth / 2));
r.lineTo(xEnd, yEnd);
r.stroke();
}
drawLine(100, 100, 400, 100, '#000', 20);

就像@JamesThorpe说的，用数学！

一些伪代码：

dY = yEnd - yStart;
dX = xEnd - xEnd;
angle = atan2(dY / dX) * 180 / PI; // angle, in degrees, from horizontal

然后，将箭头定位在直线的终点，并使用从上述计算中获得的角度旋转它。 可能需要一些调整才能使您的原产地正确。

我还不熟悉使用canvas，所以也许这个关于从上下文旋转的链接会对这部分有所帮助。

这是假设你总是有一条直线，从A点到B点。

相关文章：