在画布中绘制线箭头而不旋转

Question

在 html 画布中绘制箭头的大多数代码都涉及旋转画布上下文并绘制线条。

我的用例是使用三角学绘制它们而不旋转画布。或者你称之为矢量算法？感谢帮助。

这就是我所拥有的（忘记了大部分代码是从哪里得到的）。根据最后两个布尔参数 arrowStart 和 arrowEnd 在开始和结束处绘制 2 个箭头。

drawLineArrowhead: function(context, arrowStart, arrowEnd) {

        // Place start end points here.

        var x1 = 0;

        var y1 = 0;

        var x2 = 0;

        var y2 = 0;

        var distanceFromLine = 6;

        var arrowLength = 9;

        var dx = x2 - x1;

        var dy = y2 - y1;

        var angle = Math.atan2(dy, dx);

        var length = Math.sqrt(dx * dx + dy * dy);

        context.translate(x1, y1);

        context.rotate(angle);

        context.beginPath();

        context.moveTo(0, 0);

        context.lineTo(length, 0);

        if (arrowStart) {

            context.moveTo(arrowLength, -distanceFromLine);

            context.lineTo(0, 0);

            context.lineTo(arrowLength, distanceFromLine);

        }

        if (arrowEnd) {

            context.moveTo(length - arrowLength, -distanceFromLine);

            context.lineTo(length, 0);

            context.lineTo(length - arrowLength, distanceFromLine);

        }

        context.stroke();

        context.setTransform(1, 0, 0, 1, 0, 0);

    },

Answer 1

请参阅下面的代码，只是一些三角学知识。canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");ctx.lineCap = "round";ctx.lineWidth = 5;function drawLineArrowhead(p1, p2, startSize, endSize) {&nbsp; ctx.beginPath()&nbsp; ctx.moveTo(p1.x, p1.y);&nbsp; ctx.lineTo(p2.x, p2.y);&nbsp;&nbsp;&nbsp; if (startSize > 0) {&nbsp; &nbsp; lineAngle = Math.atan2(p2.y - p1.y, p2.x - p1.x);&nbsp; &nbsp; delta = Math.PI/6&nbsp;&nbsp;&nbsp; &nbsp; for (i=0; i<2; i++) {&nbsp; &nbsp; &nbsp; ctx.moveTo(p1.x, p1.y);&nbsp; &nbsp; &nbsp; x = p1.x + startSize * Math.cos(lineAngle + delta)&nbsp; &nbsp; &nbsp; y = p1.y + startSize * Math.sin(lineAngle + delta)&nbsp; &nbsp; &nbsp; ctx.lineTo(x, y);&nbsp; &nbsp; &nbsp; delta *= -1&nbsp; &nbsp; }&nbsp; }&nbsp; if (endSize > 0) {&nbsp; &nbsp; lineAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x);&nbsp; &nbsp; delta = Math.PI/6&nbsp;&nbsp;&nbsp; &nbsp; for (i=0; i<2; i++) {&nbsp; &nbsp; &nbsp; ctx.moveTo(p2.x, p2.y);&nbsp; &nbsp; &nbsp; x = p2.x + endSize * Math.cos(lineAngle + delta)&nbsp; &nbsp; &nbsp; y = p2.y + endSize * Math.sin(lineAngle + delta)&nbsp; &nbsp; &nbsp; ctx.lineTo(x, y);&nbsp; &nbsp; &nbsp; delta *= -1&nbsp; &nbsp; }&nbsp; }&nbsp; ctx.stroke();}drawLineArrowhead({x:10, y:10}, {x:100, y:20}, 0, 30)drawLineArrowhead({x:20, y:25}, {x:140, y:120}, 20, 20)drawLineArrowhead({x:140, y:20}, {x:80, y:50} , 20, 0)drawLineArrowhead({x:150, y:20}, {x:150, y:90}, 20, 5)drawLineArrowhead({x:180, y:90}, {x:180, y:20}, 20, 5)drawLineArrowhead({x:200, y:10}, {x:200, y:140}, 10, 10)drawLineArrowhead({x:220, y:140}, {x:220, y:10}, 10, 20)<canvas id="canvas">如果运行它，您应该会看到一些示例。有drawLineArrowhead4 个参数，(p1, p2, startSize, endSize)&nbsp;前两个是线条的起点和终点，最后两个是箭头大小，只是为了让最终用户控制末端的箭头有多大，如果我们想要的话删除它们我们设置为0。