-
Notifications
You must be signed in to change notification settings - Fork 0
/
fountain.html
125 lines (110 loc) · 5.9 KB
/
fountain.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!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/joystick.js"></script>
<script src="js/Palette.js"></script>
<script src="js/Repo.js"></script>
<script>
window.onload = function() {
(function App(){
var paper = Snap(window.innerWidth, window.innerHeight),
iconRepo = {},
colors = {c1: "#ffffff",c2: "#FF99CC",c3: "#CC6666",c4: "#c4140e",c5: "#FF6633",c6: "#FFCCCC",c7: "#993333",c8: "#663333",c9: "#fabb0d",c10: "#FFCC33",c11: "#33CC66",c12: "#33CC99",c13: "#99CC33",c14: "#339933",c15: "#336633",c16: "#006666",c17: "#339999",c18: "#3399CC",c19: "#336699",c20: "#6699CC",c21: "#9966CC",c22: "#663399",c23: "#333399",c24: "#CC6633",c25: "#663333",c26: "#CCFFFF",c27: "#999999",c28: "#333333"},
gradients = {c1: paper.gradient("r(0.5, 0.5, 0.5)#fff-#fff-#ded1d1-#9d9797"),c2: paper.gradient("r(0.5, 0.5, 0.2)#fff-#FF99CC"),c3: paper.gradient("r(0.5, 0.5, 0.2)#fff-#CC6666"),c4: paper.gradient("r(0.5, 0.5, 0.5)#fff-#ff6375-#e30d11-#c4140e"),c5: paper.gradient("r(0.5, 0.5, 0.2)#fff-#FF6633"),c6: paper.gradient("r(0.5, 0.5, 0.2)#fff-#FFCCCC"),c7: paper.gradient("r(0.5, 0.5, 0.2)#fff-#993333"),c8: paper.gradient("r(0.5, 0.5, 0.2)#fff-#663333"),c9: paper.gradient("r(0.5, 0.5, 0.5)#fff-#ffdd7f-#ffbf0f-#fabb0d"),c10: paper.gradient("r(0.5, 0.5, 0.2)#fff-#FFCC33"),c11: paper.gradient("r(0.5, 0.5, 0.2)#fff-#33CC66"),c12: paper.gradient("r(0.5, 0.5, 0.2)#fff-#33CC99"),c13: paper.gradient("r(0.5, 0.5, 0.2)#fff-#99CC33"),c14: paper.gradient("r(0.5, 0.5, 0.2)#fff-#339933"),c15: paper.gradient("r(0.5, 0.5, 0.2)#fff-#336633"),c16: paper.gradient("r(0.5, 0.5, 0.2)#fff-#006666"),c17: paper.gradient("r(0.5, 0.5, 0.2)#fff-#339999"),c18: paper.gradient("r(0.5, 0.5, 0.2)#fff-#3399CC"),c19: paper.gradient("r(0.5, 0.5, 0.2)#fff-#336699"),c20: paper.gradient("r(0.5, 0.5, 0.2)#fff-#6699CC"),c21: paper.gradient("r(0.5, 0.5, 0.2)#fff-#9966CC"),c22: paper.gradient("r(0.5, 0.5, 0.2)#fff-#663399"),c23: paper.gradient("r(0.5, 0.5, 0.2)#fff-#333399"),c24: paper.gradient("r(0.5, 0.5, 0.2)#fff-#CC6633"),c25: paper.gradient("r(0.5, 0.5, 0.2)#fff-#663333"),c26: paper.gradient("r(0.5, 0.5, 0.2)#fff-#CCFFFF"),c27: paper.gradient("r(0.5, 0.5, 0.2)#fff-#999999"),c28: paper.gradient("r(0.5, 0.5, 0.2)#fff-#333333")},
repo = new Repo(),
bG,
gr = paper.gradient("r(0.3, 0.5, 0.5)#fff-#ff6375-#e30d11-#c4140e"),
groupButton = paper.circle(120,120,50).attr({fill:"#f00",stroke:"#000",strokeWidth:3, id:'circle'}).drag(),
palette = new Palette(paper, colors);
window.addEventListener('resize', (function(e) {
return paper.attr({
width: window.innerWidth,
height: window.innerHeight
});
}));
Snap.load('svg/icons_new.svg', function(f){
iconRepo.copy = f.select('#icon_copy');
iconRepo.scale = f.select('#icon_scale');
iconRepo.flip = f.select('#icon_flip');
iconRepo.delete = f.select('#icon_delete');
iconRepo.jremove = f.select('#icon_jremove');
});
palette.init();
paper.click(function(e){
if(e.target.tagName == 'svg'){
var nitka = paper.path(`M ${e.offsetX},${e.offsetY} T ${e.offsetX},${e.offsetY+70} ${window.innerWidth/2},${window.innerHeight-220} L ${window.innerWidth/2},${window.innerHeight-140}`).attr({fill: "transparent", stroke: "#ccc", strokeWidth: 2});
if(repo.getCount()==0){
bG = paper.g().drag();
bG.click(function(e){
new Joystick(paper, e, this, iconRepo).init();
});
repo.add(paper.circle(window.innerWidth/2, window.innerHeight-140,20).attr({fill:'#ff0'}).addClass('osnova'));
}
// paper.path(
// `M ${e.offsetX+30} ${e.offsetY} C ${e.offsetX+150} ${e.offsetY}, ${e.offsetX+100} ${e.offsetY+180}, ${e.offsetX+30} ${e.offsetY+180}, S ${e.offsetX-100} ${e.offsetY}, ${e.offsetX+30} ${e.offsetY} Z`)
// .attr({fill: "transparent", stroke: "#ccc", strokeWidth: 2}).drag();
var ball = paper.ellipse(e.offsetX,e.offsetY,50,60).attr({fill:gr, id:'circle'}).addClass('ball')
.dblclick(function(){
this.attr({fill: gradients[palette.getGradientKey()]});
})
.drag(
function(dx, dy, x, y, e){
this.attr({cx: x, cy: y});
nitka.attr('d', `M ${e.offsetX},${e.offsetY} T ${(e.offsetX)},${(e.offsetY+70)} ${(window.innerWidth/2)},${(window.innerHeight-220)} L ${(window.innerWidth/2)},${(window.innerHeight-140)}`);
}
);
repo.add(ball);
repo.add(nitka.addClass('nitka'));
var fb = paper.g(nitka);
var fbd = function(dx, dy, x, y, e){
this.select('.ball').attr({cx: x, cy: y});
this.select('.nitka').attr('d', `M ${e.offsetX},${e.offsetY} T ${(e.offsetX)},${(e.offsetY+70)} ${(window.innerWidth/2)},${(window.innerHeight-220)} L ${(window.innerWidth/2)},${(window.innerHeight-140)}`);
};
fb.add(ball).drag(fbd).click(function(){
new Joystick(paper, e, this, iconRepo, fbd).init();
});
}
});
groupButton.click(function(){
repo.objs.forEach(
function(item,i,arr){
if(item.hasClass('ball')) bG.add(item.undrag());
else bG.add(item);
});
repo.clear();
});
})();
function moveZ(obj, dir){
var lOr = objOrd.length;
if( lOr>1){
for(var i = 0;i<lOr;i++){
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 degToRad (deg) { return deg / 180 * Math.PI; }
}
</script>
</body>
</html>