forked from darknessjs/jtopo-unit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
jtopo虚线流动demo.html
81 lines (75 loc) · 2.66 KB
/
jtopo虚线流动demo.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
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
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>JTOPO虚线流动demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
CanvasRenderingContext2D.prototype.JTopoDashedLineTo = function(a, b, c, d, e) {
var animespeed=(new Date())/100;
"undefined" == typeof e && (e = 5);
var f = c - a,//x轴差
g = d - b,//y轴差
h = Math.floor(Math.sqrt(f * f + g * g)),//勾股定理,直线长度
i = 0 >= e ? h: h / e,//虚线段数
j = g / h * e,
k = f / h * e;
this.beginPath();
animespeed=animespeed%(e*2);
var txs=-f/h*animespeed;
var tys=-g/h*animespeed;
for (var l = 0; i > l; l++) {
l % 2 ? this.lineTo(a + l * k-txs, b + l * j-tys) : this.moveTo((a + l * k-txs)>(a+i*k)?(a + l * k):(a + l * k-txs), (b + l * j-tys)>(b + i * j)?(b + l * j):(b + l * j-tys))
};
this.stroke()
};
CanvasRenderingContext2D.prototype.JtopoDrawPointPath=function(a,b,c,d,e,f){
var animespeed=(new Date())/10;
var xs=c- a,
xy=d- b,
l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
colorlength=50,
j=l;
xl=xs/ l,
yl=xy/l;
var colorpoint=animespeed%(l+colorlength)-colorlength;
for(var i=0;i<j;i++){
if(((i)>colorpoint)&&((i)<(colorpoint+colorlength))){
this.beginPath();
this.strokeStyle=e;
this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
this.lineTo(a+i*xl,b+i*yl);
this.stroke();
}else{
this.beginPath();
this.strokeStyle=f;
this.moveTo(a+(i-1)*xl,b+(i-1)*yl);
this.lineTo(a+i*xl,b+i*yl)
this.stroke();
}
}
};
var canvas = document.getElementById('canvas'); //舞台
var stage = new JTopo.Stage(canvas);//场景
//显示工具
var scene = new JTopo.Scene(stage);
var node = new JTopo.Node("Hello");
node.setLocation(10, 10);
scene.add(node);
var node2 = new JTopo.Node("Hello");
node2.setLocation(400, 200);
scene.add(node2);
var link1=new JTopo.Link(node,node2);
link1.dashedPattern =5;
link1.strokeColor="255,0,255";
scene.add(link1)
});
</script>
</head>
<body>
<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>