-
Notifications
You must be signed in to change notification settings - Fork 0
/
nav.html
99 lines (91 loc) · 2.95 KB
/
nav.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<script src="/js/snap.svg-min.js"></script>
<script src="/js/snaptut-freetransform.js"></script>
<script>
var paper = Snap(window.innerWidth, window.innerHeight);
var area = paper.svg().addClass('radialnav');
var jContainer = area.g();
var objOrd = [];
// paper.click(function(e){
// makeJoystik(e);
// });
var circle = paper.circle(120,120,50).attr({fill:"#f00",stroke:"#000",strokeWidth:3, id:'circle'}).drag();
objOrd.push(circle);
circle.click(function(){
moveZ(this, 'before');
});
var circle2 = paper.circle(150,120,60).attr({fill:"#222",stroke:"#000",strokeWidth:3, id:'circle2'}).drag();
objOrd.push(circle2);
circle2.click(function(){
moveZ(this, 'before');
});
var rect = paper.rect(120,120,60,50).attr({fill:"#f00",stroke:"#000",strokeWidth:3, id:'rect'}).drag();
objOrd.push(rect);
rect.click(function(){
moveZ(this, 'before');
});
var rect2 = paper.rect(140,150,80,100).attr({fill:"#f55",stroke:"#000",strokeWidth:3, id:'rect2'}).drag();
objOrd.push(rect2);
rect2.click(function(){
moveZ(this, 'before');
});
// circle.click(function(){
// this.before(rect);
// });
// rect.click(function(){
// this.before(circle);
// });
function moveZ(obj, dir){
var lOr = objOrd.length;
if( lOr>1){
for(var i = 0;i<lOr;i++){console.log(objOrd[i].attr('id'));
if(obj == objOrd[i]){
if((i==0 && dir == 'after') || (i==lOr-1 && dir == 'before')){
return;
}else{
var tmpI = (dir == 'after') ? i-1 : i+1;
var tmp = objOrd[tmpI];
if(dir == 'after')
obj.after(tmp);
else
obj.before(tmp);
objOrd[tmpI]=obj;
objOrd[i]=tmp;
}
return;
}
}
}
}
function makeJoystik(e){
var rP = 60, nIcons = 6, cAngle = 0, sAngle = 360/nIcons, x1, y1, x0 = e.offsetX, y0 = e.offsetY;
for (var i = 0; i < 6; i++) {
x1 = x0 + rP*Math.cos(degToRad(cAngle));
y1 = y0 + rP*Math.sin(degToRad(cAngle));
var bCircle = paper.circle(x1, y1, 20).attr({fill:'#4e8ee3', /*filter: fBlur,*/stroke:'#267', strokeWidth:1})
jContainer.add(bCircle);
//var bIcon = mainSc.append(iconRep[i]);
//iconRep[i].transform('t'+x1+','+y1 + ' ' + 's2');
//var sI = bIcon.getBBox();
//bIcon.transform('t'+(x1-sI.w/2)+','+(y1-sI.h/2));
//work variant
// mainSc.append(iconRep[i]);
// var sI = iconRep[i].getBBox();
// iconRep[i].transform('t'+(x1-sI.w/2)+','+(y1-sI.h/2));
//mainSc.group(bCircle, btns[i]);
cAngle += sAngle;
}
}
function degToRad (deg) { return deg / 180 * Math.PI; }
</script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>