知识总结

CODE IS POETRY

canvas 画箭头

使用Canvas画箭头

canvas是HTML5的一个新添加的元素，HTML5 canvas是一个原生HTML绘图薄，用于Javascript代码，不使用第三方工具。

下面为实现的canvas箭头源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
//polygonVertex存储模式：
//polygonVertex[0,1]=beginPoint;
//polygonVertex[2,3]=polygonVertex[triangle]右边坐标点
//polygonVertex[4,5]=三角形右边坐标
//polygonVertex[6,7]=三角形顶点坐标   stopPoint
//polygonVertex[8,9]=三角形左边坐标
//polygonVertex[10,11]=polygonVertex[triangle]左边坐标点

$(document).ready(function() {
   var beginPoint = {},
       stopPoint = {},
   polygonVertex = [],
   CONST = {
       edgeLen: 50,
       angle: 25
   };
   //封装的作图对象
   var Plot = {

       angle: "",

       //在CONST中定义的edgeLen以及angle参数
       //短距离画箭头的时候会出现箭头头部过大，修改：
       dynArrowSize: function() {
           var x = stopPoint.x - beginPoint.x,
               y = stopPoint.y - beginPoint.y,
               length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
           if (length < 250) {
               CONST.edgeLen = CONST.edgeLen/2;
               CONST.angle = CONST.angle/2;
           }
           else if(length<500){
               CONST.edgeLen=CONST.edgeLen*length/500;
               CONST.angle=CONST.angle*length/500;
           }
           // console.log(length);
       },

       //getRadian 返回以起点与X轴之间的夹角角度值
       getRadian: function(beginPoint, stopPoint) {
           Plot.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
           console.log(Plot.angle);
           paraDef(50,25);
           Plot.dynArrowSize();
       },

       ///获得箭头底边两个点
       arrowCoord: function(beginPoint, stopPoint) {
           polygonVertex[0] = beginPoint.x;
           polygonVertex[1] = beginPoint.y;
           polygonVertex[6] = stopPoint.x;
           polygonVertex[7] = stopPoint.y;
           Plot.getRadian(beginPoint, stopPoint);
           polygonVertex[8] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[9] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle + CONST.angle));
           polygonVertex[4] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle - CONST.angle));
           polygonVertex[5] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle - CONST.angle));
       },

       //获取另两个底边侧面点
       sideCoord: function() {
           var midpoint = {};
           // midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
           // midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
           midpoint.x=(polygonVertex[4]+polygonVertex[8])/2;
           midpoint.y=(polygonVertex[5]+polygonVertex[9])/2;
           polygonVertex[2] = (polygonVertex[4] + midpoint.x) / 2;
           polygonVertex[3] = (polygonVertex[5] + midpoint.y) / 2;
           polygonVertex[10] = (polygonVertex[8] + midpoint.x) / 2;
           polygonVertex[11] = (polygonVertex[9] + midpoint.y) / 2;
       },

       //画箭头
       drawArrow: function() {
           var ctx;
           ctx = $(".drawArrow")[0].getContext('2d');
           ctx.fillStyle = "red";
           ctx.beginPath();
           ctx.moveTo(polygonVertex[0], polygonVertex[1]);
           ctx.lineTo(polygonVertex[2], polygonVertex[3]);
           ctx.lineTo(polygonVertex[4], polygonVertex[5]);
           ctx.lineTo(polygonVertex[6], polygonVertex[7]);
           ctx.lineTo(polygonVertex[8], polygonVertex[9]);
           ctx.lineTo(polygonVertex[10], polygonVertex[11]);
           // ctx.lineTo(polygonVertex[0], polygonVertex[1]);
           ctx.closePath();
           ctx.fill();
       }
   };

   //记录起点beginPoint
   $(".drawArrow").mousedown(function(e) {
       beginPoint.x = e.pageX;
       beginPoint.y = e.pageY;
       // alert(beginPoint.x+"+"+beginPoint.y);
   });

   //记录终点stopPoint，绘图
   $(".drawArrow").mouseup(function(e) {
       stopPoint.x = e.pageX;
       stopPoint.y = e.pageY;
       // alert(stopPoint.x+"+"+stopPoint.y);
       Plot.arrowCoord(beginPoint, stopPoint);
       Plot.sideCoord();
       Plot.drawArrow();
   });

   //自定义参数
   function paraDef(edgeLen, angle) {
       CONST.edgeLen = edgeLen;
       CONST.angle = angle;
   }

   // $(".para-def").click(function() {
   //     var edgeLen,
   //         angle;
   //     edgeLen = parseInt($(".edge-len").val());
   //     angle = parseInt($(".angle").val());
   //     paraDef(edgeLen, angle);
   // });

});

HTML文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>

<head>
   <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
   <script type="text/javascript" src="drawarrow.js"></script>
   <!-- <link rel="stylesheet" type="text/css" href="canvasArrow.css"> -->
   <meta charset="utf-8" name="canvasArrow">
</head>
<style>
.drawArrow {
   
}
</style>

<body>
   <!-- <h2>Cavas箭头测试</h2> -->
   <canvas id="arrow" class="drawArrow" width="1400" height="600">
   </canvas>
   </br>
   <label>EdgeLength
       <input type="text" class="edge-len"></input>
   </label>
   <label>Angle
       <input type="text" class="angle"></input>
   </label>
   <button class="para-def">定义参数</button>
</body>

</html>

前端 canvashtml5

© 2020 Tung

粤ICP备19047572号