jmgraph 3.2.16 → 3.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +251 -428
  3. package/build/gulpfile.js +142 -142
  4. package/build/package-lock.json +10666 -0
  5. package/build/package.json +71 -71
  6. package/dev.js +9 -9
  7. package/dist/jmgraph.core.min.js +1 -1
  8. package/dist/jmgraph.core.min.js.map +1 -1
  9. package/dist/jmgraph.js +3500 -2668
  10. package/dist/jmgraph.min.js +1 -1
  11. package/example/ball.html +216 -216
  12. package/example/base.html +111 -111
  13. package/example/canvas.html +53 -53
  14. package/example/cell.html +283 -283
  15. package/example/controls/arc.html +128 -128
  16. package/example/controls/arrowline.html +77 -77
  17. package/example/controls/bezier.html +298 -298
  18. package/example/controls/img.html +96 -96
  19. package/example/controls/label.html +86 -86
  20. package/example/controls/line.html +172 -172
  21. package/example/controls/prismatic.html +62 -62
  22. package/example/controls/rect.html +63 -63
  23. package/example/controls/resize.html +111 -111
  24. package/example/controls/test.html +359 -359
  25. package/example/es.html +69 -69
  26. package/example/es5module.html +62 -63
  27. package/example/heartarc.html +115 -115
  28. package/example/index.html +46 -46
  29. package/example/js/require.js +4 -4
  30. package/example/love/img/bling/bling.tps +265 -265
  31. package/example/love/img/bling.json +87 -87
  32. package/example/love/img/bling.tps +295 -295
  33. package/example/love/img/love.json +95 -95
  34. package/example/love/img/love.tps +315 -315
  35. package/example/love/img/qq/qq.tps +399 -399
  36. package/example/love/img/qq.json +242 -242
  37. package/example/love/index.html +40 -40
  38. package/example/love/js/game.js +558 -558
  39. package/example/music.html +210 -210
  40. package/example/node/test.js +137 -137
  41. package/example/pdf.html +186 -186
  42. package/example/progress.html +172 -172
  43. package/example/pso.html +147 -147
  44. package/example/sort.html +804 -815
  45. package/example/tweenjs.html +83 -83
  46. package/example/webgl.html +278 -278
  47. package/example/xfj/index.html +331 -331
  48. package/example/xfj/shake.js +48 -48
  49. package/example/xfj/testori.html +75 -75
  50. package/index.js +99 -99
  51. package/package.json +58 -56
  52. package/src/core/jmControl.js +1376 -1531
  53. package/src/core/jmEvents.js +240 -281
  54. package/src/core/jmGradient.js +231 -231
  55. package/src/core/jmGraph.js +569 -569
  56. package/src/core/jmList.js +92 -157
  57. package/src/core/jmObject.js +83 -103
  58. package/src/core/jmPath.js +35 -35
  59. package/src/core/jmProperty.js +71 -110
  60. package/src/core/jmShadow.js +65 -65
  61. package/src/core/jmUtils.js +906 -919
  62. package/src/lib/earcut.js +680 -680
  63. package/src/lib/earcut.md +73 -73
  64. package/src/lib/webgl/base.js +522 -452
  65. package/src/lib/webgl/core/buffer.js +48 -48
  66. package/src/lib/webgl/core/mapSize.js +40 -40
  67. package/src/lib/webgl/core/mapType.js +43 -43
  68. package/src/lib/webgl/core/program.js +138 -138
  69. package/src/lib/webgl/core/shader.js +13 -13
  70. package/src/lib/webgl/core/texture.js +60 -60
  71. package/src/lib/webgl/gradient.js +168 -168
  72. package/src/lib/webgl/index.js +137 -11
  73. package/src/lib/webgl/path.js +568 -561
  74. package/src/shapes/jmArrowLine.js +36 -36
  75. package/src/shapes/jmImage.js +244 -244
  76. package/src/shapes/jmLabel.js +271 -271
  77. package/src/shapes/jmResize.js +332 -330
package/example/canvas.html CHANGED
@@ -1,54 +1,54 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <!--<script type="text/javascript" src="../index.js"></script>
7
- <script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
8
- <style>
9
- html,body {
10
- margin:0;
11
- padding:0;
12
- width:100%;
13
- height:100%;
14
- overflow: hidden;
15
- }
16
- #mycanvas {
17
- background-color:#000;
18
- position: absolute;
19
- }
20
- </style>
21
-
22
- </head>
23
- <body>
24
- <canvas id="mycanvas" width="300" height="200">
25
- </canvas>
26
- <script>
27
- var mycanvas = document.getElementById('mycanvas');
28
- var w = mycanvas.width;
29
- var h = mycanvas.height;
30
-
31
-
32
- var ctx = mycanvas.getContext('2d');
33
- function resize(w, h) {
34
- var size = 3;
35
- mycanvas.width = w * size;
36
- mycanvas.height = h * size;
37
-
38
- mycanvas.style.width = w + 'px';
39
- mycanvas.style.height = h + 'px';
40
- ctx.scale(size, size);
41
- }
42
-
43
- resize(w, h); resize(w, h); resize(w, h); resize(w, h); resize(w, h);
44
-
45
-
46
- ctx.fillStyle = "rgb(200,0,0)";
47
- //绘制矩形
48
- ctx.fillRect (100, 50, 55, 50);
49
-
50
- ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
51
- ctx.fillRect (150, 80, 55, 50);
52
- </script>
53
- </body>
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <!--<script type="text/javascript" src="../index.js"></script>
7
+ <script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
8
+ <style>
9
+ html,body {
10
+ margin:0;
11
+ padding:0;
12
+ width:100%;
13
+ height:100%;
14
+ overflow: hidden;
15
+ }
16
+ #mycanvas {
17
+ background-color:#000;
18
+ position: absolute;
19
+ }
20
+ </style>
21
+
22
+ </head>
23
+ <body>
24
+ <canvas id="mycanvas" width="300" height="200">
25
+ </canvas>
26
+ <script>
27
+ var mycanvas = document.getElementById('mycanvas');
28
+ var w = mycanvas.width;
29
+ var h = mycanvas.height;
30
+
31
+
32
+ var ctx = mycanvas.getContext('2d');
33
+ function resize(w, h) {
34
+ var size = 3;
35
+ mycanvas.width = w * size;
36
+ mycanvas.height = h * size;
37
+
38
+ mycanvas.style.width = w + 'px';
39
+ mycanvas.style.height = h + 'px';
40
+ ctx.scale(size, size);
41
+ }
42
+
43
+ resize(w, h); resize(w, h); resize(w, h); resize(w, h); resize(w, h);
44
+
45
+
46
+ ctx.fillStyle = "rgb(200,0,0)";
47
+ //绘制矩形
48
+ ctx.fillRect (100, 50, 55, 50);
49
+
50
+ ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
51
+ ctx.fillRect (150, 80, 55, 50);
52
+ </script>
53
+ </body>
54
54
  </html>
package/example/cell.html CHANGED
@@ -1,284 +1,284 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <!--<script type="text/javascript" src="../src/jmGraph.js"></script>
7
- <script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
8
- <style>
9
- html,body {
10
- margin:0;
11
- padding:0;
12
- width:100%;
13
- height:100%;
14
- overflow: hidden;
15
- }
16
- #mycanvas {
17
- background-color:#000;
18
- position: absolute;
19
- width: 100%;
20
- height: 100%;
21
- }
22
- </style>
23
-
24
- </head>
25
- <body >
26
- <div id="mycanvas">
27
- </div>
28
-
29
- </body>
30
- </html>
31
-
32
- <script type="module">
33
- import jmGraph from "../index.js";
34
- var graph;
35
- var balls = [];
36
- //初始化jmgraph
37
- var graph = new jmGraph('mycanvas', {
38
- mode: 'webgl'
39
- });
40
- graph.util.bindEvent(window,'resize',resize);
41
-
42
- refreshBall(graph);
43
-
44
- //实时更新画布
45
- function update() {
46
- if(graph.needUpdate) graph.redraw();
47
- graph.requestAnimationFrame(update);
48
- }
49
- update();
50
-
51
- function createPosition(radius,i) {
52
- var canvas = document.getElementById('mycanvas');
53
- var x = Math.random() * graph.width + radius;
54
- var y = Math.random() * graph.height + radius;
55
-
56
- for(var j=i+1;j<balls.length;j++) {
57
- var b2= balls[j];
58
- var lx = Math.abs(x - b2.x());
59
- var ly = Math.abs(y - b2.y());
60
- var l = Math.sqrt(lx * lx + ly * ly);
61
- //如果二个球重叠则放 弃当前球
62
- if(l < radius + b2.radius) {
63
- return createPosition(radius);
64
- }
65
- }
66
- return {x:x,y:y};
67
- }
68
-
69
- function createCell(x,y,r,style) {
70
- var c = new cell(graph,x,y,r,style);
71
- balls.push(c);
72
- return c;
73
- }
74
-
75
- function refreshBall(g) {
76
-
77
- var style = {
78
- lineWidth:1,
79
- close:true
80
- };
81
-
82
- resize();
83
-
84
- style.shadow = graph.createShadow(0,0,20,'#000');
85
-
86
-
87
-
88
- style.fill = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
89
- //var rr1 = Math.floor(Math.random() * 255);
90
- //var gg1 = Math.floor(Math.random() * 255);
91
- //var bb1 = Math.floor(Math.random() * 255);
92
- //var rr2 = Math.floor(Math.random() * 255);
93
- //var gg2 = Math.floor(Math.random() * 255);
94
- //var bb2 = Math.floor(Math.random() * 255);
95
- style.fill.addStop(0,'rgb(112,154,22)');
96
- style.fill.addStop(1,'rgb(49,95,118)');
97
-
98
- var count = 100;
99
-
100
- for(var i=0; i<count; i++) {
101
- var radius = Math.random() * 10 + 4;
102
-
103
- var p = createPosition(radius);
104
- var b = createCell(p.x, p.y, radius, style);
105
- b.vx = Math.random() - Math.random();
106
- b.vy = Math.random() - Math.random();
107
- }
108
-
109
-
110
- //var radius = Math.random() * 10 + 6;
111
- var styletmp = graph.util.clone(style);
112
- styletmp.fill = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
113
- styletmp.fill.addStop(0,'rgb(255,255,255)');
114
- styletmp.fill.addStop(1,'rgb(255,149,255)');
115
-
116
- //主体细胞
117
- var myCell = createCell(graph.width / 2,graph.height / 2,14,styletmp);//new cell(graph,graph.width() / 2,graph.height() / 2,10,styletmp);
118
-
119
- //balls.push(myCell);
120
-
121
- graph.bind('click',function(evt) {
122
- var x = evt.position.x;
123
- var y = evt.position.y;
124
- myCell.go(x,y);
125
- return false;
126
- });
127
-
128
- function animate() {
129
- var bs = balls;
130
- var len = bs.length;
131
- //var mvx = 0;
132
- //var mvy = 0;
133
- for(var i=0;i<len;i++) {
134
- var b1 = bs[i];
135
- if(!b1 || !b1.visible) continue;
136
- b1.vx += b1.ax;
137
- b1.vy += b1.ay;
138
- for(var j=i+1;j<len;j++) {
139
- var b2= bs[j];
140
- if(!b2 || !b2.visible) continue;
141
- var lx = b1.x() - b2.x();
142
- var ly = b1.y() - b2.y();
143
- var l = Math.sqrt(lx * lx + ly * ly);
144
- var lr = b1.radius() + b2.radius();
145
- var dr = (lr - l) / 2;
146
- if(dr > 0) {
147
- var vx = b1.vx;
148
- var vy = b1.vy;
149
- var vxb = b2.vx;
150
- var vyb = b2.vy;
151
-
152
- var bigB,smallB;
153
- var smallindex = i;
154
- if(b1.radius() > b2.radius()) {
155
- bigB = b1;
156
- smallB = b2;
157
- smallindex = j;
158
- }
159
- else {
160
- bigB = b2;
161
- smallB = b1;
162
- }
163
-
164
- var smr = smallB.radius() - dr;
165
- var darea = 0;
166
- if(smr > 0) {
167
- darea = smallB.radius() * smallB.radius() - smr * smr;
168
- smallB.radius(smr);
169
- }
170
- else {
171
- darea = smallB.radius() * smallB.radius();
172
- dr = smallB.radius();
173
- smallB.visible(false);
174
- balls.splice(smallindex,1);
175
- }
176
- var bigr = Math.sqrt(bigB.radius() * bigB.radius() + darea);
177
-
178
- bigB.vx = (bigB.radius() * bigB.vx + dr * smallB.vx) / bigr;
179
- bigB.vy = (bigB.radius() * bigB.vy + dr * smallB.vy) / bigr;
180
- bigB.radius(bigr);
181
-
182
- }
183
- }
184
-
185
- if(!b1.visible) continue;
186
- var x = b1.x() + b1.vx;
187
- var maxX = b1.graph.width - b1.radius();
188
- if(x <= b1.radius() || x >= maxX) {
189
- //b1.vy -= 0.4;
190
- b1.vx *= -1;
191
- }
192
- x = Math.max(x,b1.radius());
193
- x = Math.min(maxX,x);
194
- b1.x(x);
195
- var y = b1.y() + b1.vy;
196
- var maxY = b1.graph.height - b1.radius();
197
- if(y <= b1.radius() || y >= maxY) {
198
- //if(y >= maxY && b1.vy > 0) {b1.vy -= 1;b1.vx -= 0.4;}
199
- b1.vy *= -1;
200
- }
201
- y = Math.max(y,b1.radius());
202
- y = Math.min(maxY,y);
203
- b1.y(y);
204
- }
205
- graph.needUpdate = true;
206
- setTimeout(animate,20);
207
- };
208
- animate();
209
- }
210
- function resize() {
211
- //canvas.width = window.innerWidth;
212
- //canvas.height = window.innerHeight;
213
-
214
- if(graph) {
215
- graph.width = document.getElementById('mycanvas').clientWidth;
216
- graph.height = document.getElementById('mycanvas').clientHeight;
217
- graph.needUpdate = true;
218
- }
219
- }
220
-
221
- function cell(graph, x, y, radius, style) {
222
- this.graph = graph;
223
-
224
- this.center = {x:x,y:y};
225
- this.shape = graph.createShape('circle',{style:style,center:this.center,radius:radius,anticlockwise:true});
226
- graph.children.add(this.shape);
227
-
228
- this.vx = 0;
229
- this.vy = 0;
230
- this.ax = 0;
231
- this.ay = 0;
232
-
233
- this.go = function(x,y) {
234
- var r = this.radius();
235
- if(r <= 4) return;
236
-
237
- var myx = this.x();
238
- var myy = this.y();
239
-
240
- var dx = x - myx;
241
- var dy = y - myy;
242
- var dp = Math.sqrt(dx * dx + dy * dy);
243
- var vx = dx / dp * 1;
244
- var vy = dy / dp * 1;
245
- var px = myx + vx * (r + 4);
246
- var py = myy + vy * (r + 4);
247
-
248
- var mc = createCell(px,py,1,style);
249
- mc.vx = vx;
250
- mc.vy = vy;
251
-
252
- var radius = Math.sqrt(r * r - mc.radius() * mc.radius());
253
- this.radius(radius);
254
-
255
- this.vx = (this.vx * r - mc.vx * mc.radius()) / this.radius();
256
- this.vy = (this.vy * r - mc.vy * mc.radius()) / this.radius();
257
-
258
- this.graph.needUpdate = true;
259
- }
260
- this.x = function(x) {
261
- if(typeof x !== 'undefined') this.center.x = x;
262
- return this.center.x;
263
- }
264
- this.y = function(y) {
265
- if(typeof y !== 'undefined') this.center.y = y;
266
- return this.center.y;
267
- }
268
-
269
- this.radius = function(r) {
270
- if(typeof r == 'undefined') return this.shape.radius;
271
- return this.shape.radius = r;
272
- }
273
- this.visible = function(v) {
274
- if(typeof v !== 'undefined') {
275
- this.shape.visible = v;
276
- if(!v) {
277
- this.graph.children.remove(this.shape);
278
- }
279
- }
280
- return this.shape.visible;
281
- }
282
- }
283
-
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <!--<script type="text/javascript" src="../src/jmGraph.js"></script>
7
+ <script type="text/javascript" src="../dist/jmGraph.min.js"></script> -->
8
+ <style>
9
+ html,body {
10
+ margin:0;
11
+ padding:0;
12
+ width:100%;
13
+ height:100%;
14
+ overflow: hidden;
15
+ }
16
+ #mycanvas {
17
+ background-color:#000;
18
+ position: absolute;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+ </style>
23
+
24
+ </head>
25
+ <body >
26
+ <div id="mycanvas">
27
+ </div>
28
+
29
+ </body>
30
+ </html>
31
+
32
+ <script type="module">
33
+ import jmGraph from "../index.js";
34
+ var graph;
35
+ var balls = [];
36
+ //初始化jmgraph
37
+ var graph = new jmGraph('mycanvas', {
38
+ mode: 'webgl'
39
+ });
40
+ graph.util.bindEvent(window,'resize',resize);
41
+
42
+ refreshBall(graph);
43
+
44
+ //实时更新画布
45
+ function update() {
46
+ if(graph.needUpdate) graph.redraw();
47
+ graph.requestAnimationFrame(update);
48
+ }
49
+ update();
50
+
51
+ function createPosition(radius,i) {
52
+ var canvas = document.getElementById('mycanvas');
53
+ var x = Math.random() * graph.width + radius;
54
+ var y = Math.random() * graph.height + radius;
55
+
56
+ for(var j=i+1;j<balls.length;j++) {
57
+ var b2= balls[j];
58
+ var lx = Math.abs(x - b2.x());
59
+ var ly = Math.abs(y - b2.y());
60
+ var l = Math.sqrt(lx * lx + ly * ly);
61
+ //如果二个球重叠则放 弃当前球
62
+ if(l < radius + b2.radius) {
63
+ return createPosition(radius);
64
+ }
65
+ }
66
+ return {x:x,y:y};
67
+ }
68
+
69
+ function createCell(x,y,r,style) {
70
+ var c = new cell(graph,x,y,r,style);
71
+ balls.push(c);
72
+ return c;
73
+ }
74
+
75
+ function refreshBall(g) {
76
+
77
+ var style = {
78
+ lineWidth:1,
79
+ close:true
80
+ };
81
+
82
+ resize();
83
+
84
+ style.shadow = graph.createShadow(0,0,20,'#000');
85
+
86
+
87
+
88
+ style.fill = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
89
+ //var rr1 = Math.floor(Math.random() * 255);
90
+ //var gg1 = Math.floor(Math.random() * 255);
91
+ //var bb1 = Math.floor(Math.random() * 255);
92
+ //var rr2 = Math.floor(Math.random() * 255);
93
+ //var gg2 = Math.floor(Math.random() * 255);
94
+ //var bb2 = Math.floor(Math.random() * 255);
95
+ style.fill.addStop(0,'rgb(112,154,22)');
96
+ style.fill.addStop(1,'rgb(49,95,118)');
97
+
98
+ var count = 100;
99
+
100
+ for(var i=0; i<count; i++) {
101
+ var radius = Math.random() * 10 + 4;
102
+
103
+ var p = createPosition(radius);
104
+ var b = createCell(p.x, p.y, radius, style);
105
+ b.vx = Math.random() - Math.random();
106
+ b.vy = Math.random() - Math.random();
107
+ }
108
+
109
+
110
+ //var radius = Math.random() * 10 + 6;
111
+ var styletmp = graph.util.clone(style);
112
+ styletmp.fill = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
113
+ styletmp.fill.addStop(0,'rgb(255,255,255)');
114
+ styletmp.fill.addStop(1,'rgb(255,149,255)');
115
+
116
+ //主体细胞
117
+ var myCell = createCell(graph.width / 2,graph.height / 2,14,styletmp);//new cell(graph,graph.width() / 2,graph.height() / 2,10,styletmp);
118
+
119
+ //balls.push(myCell);
120
+
121
+ graph.bind('click',function(evt) {
122
+ var x = evt.position.x;
123
+ var y = evt.position.y;
124
+ myCell.go(x,y);
125
+ return false;
126
+ });
127
+
128
+ function animate() {
129
+ var bs = balls;
130
+ var len = bs.length;
131
+ //var mvx = 0;
132
+ //var mvy = 0;
133
+ for(var i=0;i<len;i++) {
134
+ var b1 = bs[i];
135
+ if(!b1 || !b1.visible) continue;
136
+ b1.vx += b1.ax;
137
+ b1.vy += b1.ay;
138
+ for(var j=i+1;j<len;j++) {
139
+ var b2= bs[j];
140
+ if(!b2 || !b2.visible) continue;
141
+ var lx = b1.x() - b2.x();
142
+ var ly = b1.y() - b2.y();
143
+ var l = Math.sqrt(lx * lx + ly * ly);
144
+ var lr = b1.radius() + b2.radius();
145
+ var dr = (lr - l) / 2;
146
+ if(dr > 0) {
147
+ var vx = b1.vx;
148
+ var vy = b1.vy;
149
+ var vxb = b2.vx;
150
+ var vyb = b2.vy;
151
+
152
+ var bigB,smallB;
153
+ var smallindex = i;
154
+ if(b1.radius() > b2.radius()) {
155
+ bigB = b1;
156
+ smallB = b2;
157
+ smallindex = j;
158
+ }
159
+ else {
160
+ bigB = b2;
161
+ smallB = b1;
162
+ }
163
+
164
+ var smr = smallB.radius() - dr;
165
+ var darea = 0;
166
+ if(smr > 0) {
167
+ darea = smallB.radius() * smallB.radius() - smr * smr;
168
+ smallB.radius(smr);
169
+ }
170
+ else {
171
+ darea = smallB.radius() * smallB.radius();
172
+ dr = smallB.radius();
173
+ smallB.visible(false);
174
+ balls.splice(smallindex,1);
175
+ }
176
+ var bigr = Math.sqrt(bigB.radius() * bigB.radius() + darea);
177
+
178
+ bigB.vx = (bigB.radius() * bigB.vx + dr * smallB.vx) / bigr;
179
+ bigB.vy = (bigB.radius() * bigB.vy + dr * smallB.vy) / bigr;
180
+ bigB.radius(bigr);
181
+
182
+ }
183
+ }
184
+
185
+ if(!b1.visible) continue;
186
+ var x = b1.x() + b1.vx;
187
+ var maxX = b1.graph.width - b1.radius();
188
+ if(x <= b1.radius() || x >= maxX) {
189
+ //b1.vy -= 0.4;
190
+ b1.vx *= -1;
191
+ }
192
+ x = Math.max(x,b1.radius());
193
+ x = Math.min(maxX,x);
194
+ b1.x(x);
195
+ var y = b1.y() + b1.vy;
196
+ var maxY = b1.graph.height - b1.radius();
197
+ if(y <= b1.radius() || y >= maxY) {
198
+ //if(y >= maxY && b1.vy > 0) {b1.vy -= 1;b1.vx -= 0.4;}
199
+ b1.vy *= -1;
200
+ }
201
+ y = Math.max(y,b1.radius());
202
+ y = Math.min(maxY,y);
203
+ b1.y(y);
204
+ }
205
+ graph.needUpdate = true;
206
+ setTimeout(animate,20);
207
+ };
208
+ animate();
209
+ }
210
+ function resize() {
211
+ //canvas.width = window.innerWidth;
212
+ //canvas.height = window.innerHeight;
213
+
214
+ if(graph) {
215
+ graph.width = document.getElementById('mycanvas').clientWidth;
216
+ graph.height = document.getElementById('mycanvas').clientHeight;
217
+ graph.needUpdate = true;
218
+ }
219
+ }
220
+
221
+ function cell(graph, x, y, radius, style) {
222
+ this.graph = graph;
223
+
224
+ this.center = {x:x,y:y};
225
+ this.shape = graph.createShape('circle',{style:style,center:this.center,radius:radius,anticlockwise:true});
226
+ graph.children.add(this.shape);
227
+
228
+ this.vx = 0;
229
+ this.vy = 0;
230
+ this.ax = 0;
231
+ this.ay = 0;
232
+
233
+ this.go = function(x,y) {
234
+ var r = this.radius();
235
+ if(r <= 4) return;
236
+
237
+ var myx = this.x();
238
+ var myy = this.y();
239
+
240
+ var dx = x - myx;
241
+ var dy = y - myy;
242
+ var dp = Math.sqrt(dx * dx + dy * dy);
243
+ var vx = dx / dp * 1;
244
+ var vy = dy / dp * 1;
245
+ var px = myx + vx * (r + 4);
246
+ var py = myy + vy * (r + 4);
247
+
248
+ var mc = createCell(px,py,1,style);
249
+ mc.vx = vx;
250
+ mc.vy = vy;
251
+
252
+ var radius = Math.sqrt(r * r - mc.radius() * mc.radius());
253
+ this.radius(radius);
254
+
255
+ this.vx = (this.vx * r - mc.vx * mc.radius()) / this.radius();
256
+ this.vy = (this.vy * r - mc.vy * mc.radius()) / this.radius();
257
+
258
+ this.graph.needUpdate = true;
259
+ }
260
+ this.x = function(x) {
261
+ if(typeof x !== 'undefined') this.center.x = x;
262
+ return this.center.x;
263
+ }
264
+ this.y = function(y) {
265
+ if(typeof y !== 'undefined') this.center.y = y;
266
+ return this.center.y;
267
+ }
268
+
269
+ this.radius = function(r) {
270
+ if(typeof r == 'undefined') return this.shape.radius;
271
+ return this.shape.radius = r;
272
+ }
273
+ this.visible = function(v) {
274
+ if(typeof v !== 'undefined') {
275
+ this.shape.visible = v;
276
+ if(!v) {
277
+ this.graph.children.remove(this.shape);
278
+ }
279
+ }
280
+ return this.shape.visible;
281
+ }
282
+ }
283
+
284
284
  </script>