在 html 畫布中繪制箭頭的大多數(shù)代碼都涉及旋轉(zhuǎn)畫布上下文并繪制線條。我的用例是使用三角學(xué)繪制它們而不旋轉(zhuǎn)畫布。或者你稱之為矢量算法？感謝幫助。這就是我所擁有的（忘記了大部分代碼是從哪里得到的）。根據(jù)最后兩個(gè)布爾參數(shù) arrowStart 和 arrowEnd 在開始和結(jié)束處繪制 2 個(gè)箭頭。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); },
1 回答
jeck貓
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
請(qǐng)參閱下面的代碼，只是一些三角學(xué)知識(shí)。
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.lineCap = "round";
ctx.lineWidth = 5;
function drawLineArrowhead(p1, p2, startSize, endSize) {
ctx.beginPath()
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
if (startSize > 0) {
lineAngle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
delta = Math.PI/6
for (i=0; i<2; i++) {
ctx.moveTo(p1.x, p1.y);
x = p1.x + startSize * Math.cos(lineAngle + delta)
y = p1.y + startSize * Math.sin(lineAngle + delta)
ctx.lineTo(x, y);
delta *= -1
}
}
if (endSize > 0) {
lineAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x);
delta = Math.PI/6
for (i=0; i<2; i++) {
ctx.moveTo(p2.x, p2.y);
x = p2.x + endSize * Math.cos(lineAngle + delta)
y = p2.y + endSize * Math.sin(lineAngle + delta)
ctx.lineTo(x, y);
delta *= -1
}
}
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">
如果運(yùn)行它，您應(yīng)該會(huì)看到一些示例。
有drawLineArrowhead4 個(gè)參數(shù)，(p1, p2, startSize, endSize) 前兩個(gè)是線條的起點(diǎn)和終點(diǎn)，最后兩個(gè)是箭頭大小，只是為了讓最終用戶控制末端的箭頭有多大，如果我們想要的話刪除它們我們?cè)O(shè)置為0。
- 1 回答
- 0 關(guān)注
- 120 瀏覽
添加回答
舉報(bào)
0/150
提交
取消