如何使用javascript绘制箭头 [英] How to draw an arrow using javascript
本文介绍了如何使用javascript绘制箭头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嗨..
我正在创建类似于gmail注册页面的注册页面。为此我使用自定义样式的气球弹出扩展器。但它只显示没有箭头的形状，如矩形或云中的样式。我尝试用css，但箭头没有进入标注。如何使用javascript绘制箭头？
Hi..
Im creating signup page similar to gmail signup page. For that im using balloon popup extender in a custom style. But it displays only the shape without arrows like styles in rectangle or cloud. I tried with css,but arrow not coming in callout. How to draw that arrow using javascript?
推荐答案
您好，
请参阅以下链接;
jsDraw2D：用于JavaScript的2D图形库 [ ^ ]
文档：如何使用JavaScript图形库 [ ^ ]
--Amit
Hi,
Refer the links below;
jsDraw2D : 2D Graphics Library for JavaScript[^]
Documentation: How to Use the JavaScript Graphics Library[^]
--Amit
请参阅HTML Canvas - 脚本解决方案希望这会有所帮助。我也在互联网上寻找解决方案，但没有太多寻找解决方案。
使用此代码复制并粘贴到<体>< /体> HTML文件。
Please see HTML Canvas - Script solution hopefully this will help. I have also looked around the internet to find a solution, but didn't have much look in finding a solution.
To use this code copy and paste into <body></body> of HTML file.
<script>
function Arrow(x1, y1, x2, y2, Arrow_Type, Hex_Color, L_Width, Element_ID) {
var c = document.getElementByID(Element_ID);
var ctx = c.getContext("2d");
//SOHCAHTOA = SOH ( Sin(Radians) = Opposite / Hypotenuse ) - CAH ( Cos(Radians) = Adjacent / Hypotenuse ) - TOA ( Tan(Radians) = Opposite / Adjacent
//Set-Points for Arrow Head
var A_start = 10;
var O_start = 3.75;
var H_start = Math.sqrt(Math.pow(A_Start, 2) + Math.pow(O_start, 2));
var change_arrow_radians = Math.atan2(O_start, A_start);
//Calculate the change of the arrow head (i.e. horizontal, vertical or diagonal)
var change_x_main = Math.abs(x1 - x2); //Adjacent, Calculate difference as an absolute value
var change_y_main = Math.abs(y1 - y2); //Opposite, Calculate difference as an absolute value
var change_angle_radians = Math.atan2(change_y_main, change_x_main);
var change_angle_degrees = change_angle_radians * ( 180 / Math.PI); //Not Used, but could be used as below to confirm angle of arrow head
//alert("Angle of Arrow: " + change_angle_degrees); //remove comment
var change_x_0_arrowhead = Math.cos(change_angle_radians + change_arrow_radians) * H_start;
var change_y_0_arrowhead = Math.sin(change_angle_radians + change_arrow_radians) * H_start;
var change_x_1_arrowhead = Math.cos(change_angle_radians - change_arrow_radians) * H_start;
var change_y_1_arrowhead = Math.sin(change_angle_radians - change_arrow_radians) * H_start;
//draw arrow
ctx.beginPath();
ctx.lineWidth = L_Width;
ctx.strokeStyle = Hex_Color;
//Determines type of arrow
if (Arrow_Type == true) { //To the inside of the circle
if (((x1 < x2) && (y1 > y2)) || ((x1 == x2) && (y1 > y2))) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 + change_x_0_arrowhead, y1 - change_y_0_arrowhead);
ctx.lineTo(x1, y1);
ctx.lineTo(x1 + change_x_1_arrowhead, y1 - change_y_1_arrowhead);
} else if ((x1 > x2) && (y1 > y2)) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 - change_x_0_arrowhead, y1 - change_y_0_arrowhead);
ctx.lineTo(x1, y1);
ctx.lineTo(x1 - change_x_1_arrowhead, y1 - change_y_1_arrowhead);
} else if (((x1 < x2) && (y1 < y2)) || ((x1 < x2) && (y1 == y2))) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 + change_x_0_arrowhead, y1 + change_y_0_arrowhead);
ctx.lineTo(x1, y1);
ctx.lineTo(x1 + change_x_1_arrowhead, y1 + change_y_1_arrowhead);
} else if (((x1 > x2) && (y1 < y2)) || ((x1 > x2) && (y1 == y2)) || ((x1 == x2) && (y1 < y2))) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 - change_x_0_arrowhead, y1 + change_y_0_arrowhead);
ctx.lineTo(x1, y1);
ctx.lineTo(x1 - change_x_1_arrowhead, y1 + change_y_1_arrowhead);
}
} else { //To the outside of the circle
if (((x1 < x2) && (y1 > y2)) || ((x1 < x2) && (y1 == y2)) || ((x1 == x2) && (y1 > y2))) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x2 - change_x_0_arrowhead, y2 + change_y_0_arrowhead);
ctx.lineTo(x2, y2);
ctx.lineTo(x2 - change_x_1_arrowhead, y2 + change_y_1_arrowhead);
} else if (((x1 > x2) && (y1 > y2)) || ((x1 > x2) && (y1 == y2))
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x2 + change_x_0_arrowhead, y2 + change_y_0_arrowhead);
ctx.lineTo(x2, y2);
ctx.lineTo(x2 + change_x_1_arrowhead, y2 + change_y_1_arrowhead);
} else if ((x1 < x2) && (y1 < y2)) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x2 - change_x_0_arrowhead, y2 - change_y_0_arrowhead);
ctx.lineTo(x2, y2);
ctx.lineTo(x2 - change_x_1_arrowhead, y2 - change_y_1_arrowhead);
} else if (((x1 > x2) && (y1 < y2)) || ((x1 == x2) && (y1 < y2))) {
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x2 + change_x_0_arrowhead, y2 - change_y_0_arrowhead);
ctx.lineTo(x2, y2);
ctx.lineTo(x2 + change_x_1_arrowhead, y2 - change_y_1_arrowhead);
}
}
ctx.stroke();
}
</script>
希望这很容易要理解，这可能是一个漫长的方式，但我发现这更容易理解。
要使用上述功能将以下内容复制到HTML文件中
Hopefully this is easy enough to understand, it might be a long winded way of doing it but I find this easier to understand.
To use the above function copy the following into HTML file
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<title></title></head>
<body>
<canvas id="FIG1" width="1000" height="1000" style="border-style:none; border-width:thin">
This text is displayed if your browser does not support HTML5 Canvas.</canvas>
<script>
Arrow(250, 400, 250, 0, true, "#000000", 1, "FIG1");
Arrow(250, 600, 250, 1000, true, "#000000", 1, "FIG1");
Arrow(240, 500, 0, 500, true, "#000000", 1, "FIG1");
Arrow(260, 500, 490, 500, true, "#000000", 1, "FIG1");
Arrow(240, 400, 0, 0, true, "#000000", 1, "FIG1");
Arrow(240, 600, 0, 1000, true, "#000000", 1, "FIG1");
Arrow(260, 400, 490, 0, true, "#000000", 1, "FIG1");
Arrow(260, 600, 490, 1000, true, "#000000", 1, "FIG1");
Arrow(750, 400, 750, 0, false, "#000000", 1, "FIG1");
Arrow(750, 600, 750, 1000, false, "#000000", 1, "FIG1");
Arrow(740, 500, 510, 500, false, "#000000", 1, "FIG1");
Arrow(760, 500, 1000, 500, false, "#000000", 1, "FIG1");
Arrow(740, 400, 510, 0, false, "#000000", 1, "FIG1");
Arrow(740, 600, 510, 1000, false, "#000000", 1, "FIG1");
Arrow(760, 400, 1000, 0, false, "#000000", 1, "FIG1");
Arrow(760, 600, 1000, 1000, false, "#000000", 1, "FIG1");
</script>
</body>
我将不胜感激任何对上述代码的评论
谢谢
I would appreciate any comments on the above code
Thank You
如果您正在寻找泡泡，请检查这个：语音泡沫 [ ^ ]
希望有所帮助。
If you are looking for speech bubbles, check this out: speech-bubble[^]
Hope it helps.
这篇关于如何使用javascript绘制箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
