Question

我有一个包含许多动画流程图的项目，它广泛使用箭头来指示流程。我已经创建了一个绘制线条并用箭头盖住它的函数：线条从端点向上延伸一半宽度，然后向右和向下延伸线条以它的全宽度延伸，然后向下和向左镜像箭头的顶部，最后回到原始行结束。

我做了一个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);

Answer 1

就像@JamesThorpe说的那样，用数学！

一些伪代码：

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

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

我还不熟悉使用canvas，所以也许this link on rotating from a context会对这部分有帮助。

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

HTML5＆amp; javascript：在线上绘制箭头

1 个答案: