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/progress.html CHANGED
@@ -1,173 +1,173 @@
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
- </head>
7
- <body style="margin:10px auto;">
8
- <div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000; display:inline-block;"></div>
9
- </body>
10
- </html>
11
-
12
- <script type="module">
13
- import * as jmGraph from "../index.js";
14
- //初始化jmgraph
15
- var g = jmGraph.create('mycanvas', {
16
- width: 800,
17
- height: 600,
18
- mode: '2d'
19
- });
20
-
21
- //实时更新画布
22
- function update() {
23
- if(g.needUpdate) g.redraw();
24
- requestAnimationFrame(update);
25
- }
26
- update();
27
-
28
- init(g);
29
-
30
- function init(graph){
31
- var style = {
32
- stroke:'rgb(120,20,80)',
33
- lineWidth:6,
34
- close:true,
35
- zIndex:1
36
- };
37
- var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
38
- bg.addStop(0,'green');
39
- bg.addStop('0.2','blue');
40
- bg.addStop(0.8,'yellow');
41
- bg.addStop(1,'red');
42
- style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
43
- style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
44
- var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
45
-
46
- arc.bind('mouseover',function(evt) {
47
- this.style.stroke = 'rgba(88,200,155,0.5)';
48
- });
49
- arc.bind('mouseleave',function(evt) {
50
- this.style.stroke = 'rgb(120,20,80)';
51
- });
52
-
53
- //arc.bind('touchstart',function(evt) {
54
- //this.style.stroke = 'rgba(88,200,155,0.5)';
55
- //graph.refresh();
56
- //});
57
-
58
- graph.children.add(arc);
59
- arc.canMove(true);
60
-
61
- style = g.util.clone(style);
62
- style.stroke = 'rgb(255,255,255)';
63
- style.close=false;
64
- style.zIndex = 3;
65
- delete style.shadow;
66
- delete style.fill;
67
-
68
- var step = Math.PI / 25;
69
- var bluestop = 0.5;
70
- var bluedir = 0;
71
- var yellowstop = 0.8;
72
- var yellowdir = 0;
73
- var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
74
-
75
- style = g.util.clone(style);
76
- style.close = true;
77
- style.lineWidth = 1.1;
78
- style.fill = 'red';
79
- style.zIndex = 4;
80
- var harc = graph.createShape('harc',{style:style, center:{x:600,y:380}, startAngle:0, endAngle: Math.PI * 2, minRadius:100, maxRadius:150, anticlockwise:false});
81
- graph.children.add(harc);
82
-
83
- function arcAni() {
84
- var s=childarc.startAngle + step;
85
- var e = childarc.endAngle + step;
86
- if(s > Math.PI * 2) {
87
- s = 0;
88
- e = Math.PI / 3;
89
- }
90
- childarc.startAngle = s;
91
- childarc.endAngle = e;
92
- harc.endAngle = s;
93
-
94
-
95
- if(bluestop >= yellowstop) {
96
- bluedir = 1;
97
- //return false;
98
- }
99
- else if(bluestop < 0.1) {
100
- bluedir = 0;
101
- }
102
- bluestop = bluedir == 0?bluestop + 0.01:bluestop-0.01;
103
-
104
- arc.style.fill='radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue '+bluestop+', yellow '+yellowstop+', red 1)';
105
- graph.needUpdate = true;
106
- }
107
- arc.children.add(childarc);
108
- childarc.animate(arcAni, 10);
109
-
110
-
111
- harc.canMove(true);
112
-
113
-
114
- //画一个进度显示
115
- var w = 100;
116
- var h = 100;
117
- var forceColor = '#037CFC';
118
- //先画底层圆
119
- var style = {
120
- stroke: '#efeff4',
121
- lineWidth: 4,
122
- close: true,
123
- zIndex: 1
124
- };
125
- var radius = (w - style.lineWidth) / 2 - 1;
126
- var bgarc = graph.createShape('circle', {
127
- style: style,
128
- center: { x: 120, y: 120 },
129
- radius: radius,
130
- start: 0,
131
- end: Math.PI * 2
132
- });
133
-
134
- style = graph.util.clone(style);
135
- style.stroke = forceColor;
136
- delete style.close; //进度圆不需要封闭
137
- var progressArc = graph.createShape('arc', {
138
- style: style,
139
- center: { x: '50%', y: '50%' },
140
- start: -Math.PI / 2,
141
- end: -Math.PI / 2,
142
- radius: radius,
143
- anticlockwise: false
144
- });
145
- graph.children.add(bgarc);
146
- bgarc.children.add(progressArc);
147
-
148
- style = graph.util.clone(style);
149
- style.fill = forceColor
150
- style.textAlign = 'center';
151
- style.textBaseline = 'middle';
152
- style.font = '22px Arial';
153
- //创建一个label
154
- var progressLabel = graph.createShape('label', {
155
- style: style,
156
- position: { x: 0, y: 0 },
157
- text: '0%',
158
- width: w,
159
- height: h
160
- });
161
- bgarc.children.add(progressLabel);
162
-
163
- //改变进度
164
- var curprogress = 0;
165
- setInterval(function(){
166
- progressArc.endAngle = curprogress/100 * Math.PI * 2 + progressArc.startAngle;//当前进度应该转到的角度
167
- progressLabel.text = Math.ceil(curprogress) + '%';
168
-
169
- curprogress++;
170
- if(curprogress >= 100) curprogress = 0;
171
- }, 100);
172
- }
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
+ </head>
7
+ <body style="margin:10px auto;">
8
+ <div id="mycanvas" width="1200" height="600" style="border:1px solid red;margin:10px;background-color:#000; display:inline-block;"></div>
9
+ </body>
10
+ </html>
11
+
12
+ <script type="module">
13
+ import * as jmGraph from "../index.js";
14
+ //初始化jmgraph
15
+ var g = jmGraph.create('mycanvas', {
16
+ width: 800,
17
+ height: 600,
18
+ mode: '2d'
19
+ });
20
+
21
+ //实时更新画布
22
+ function update() {
23
+ if(g.needUpdate) g.redraw();
24
+ requestAnimationFrame(update);
25
+ }
26
+ update();
27
+
28
+ init(g);
29
+
30
+ function init(graph){
31
+ var style = {
32
+ stroke:'rgb(120,20,80)',
33
+ lineWidth:6,
34
+ close:true,
35
+ zIndex:1
36
+ };
37
+ var bg = graph.createRadialGradient('50%','50%',0,'50%','50%','50%');
38
+ bg.addStop(0,'green');
39
+ bg.addStop('0.2','blue');
40
+ bg.addStop(0.8,'yellow');
41
+ bg.addStop(1,'red');
42
+ style.fill = 'radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue 0.2, yellow 0.8, red 1)';
43
+ style.shadow = graph.createShadow(0,0,20,'rgb(255,255,255)');
44
+ var arc = graph.createShape('arc',{style:style,center:{x:250,y:250},width:200,height: 200,start:0,end:Math.PI * 2});
45
+
46
+ arc.bind('mouseover',function(evt) {
47
+ this.style.stroke = 'rgba(88,200,155,0.5)';
48
+ });
49
+ arc.bind('mouseleave',function(evt) {
50
+ this.style.stroke = 'rgb(120,20,80)';
51
+ });
52
+
53
+ //arc.bind('touchstart',function(evt) {
54
+ //this.style.stroke = 'rgba(88,200,155,0.5)';
55
+ //graph.refresh();
56
+ //});
57
+
58
+ graph.children.add(arc);
59
+ arc.canMove(true);
60
+
61
+ style = g.util.clone(style);
62
+ style.stroke = 'rgb(255,255,255)';
63
+ style.close=false;
64
+ style.zIndex = 3;
65
+ delete style.shadow;
66
+ delete style.fill;
67
+
68
+ var step = Math.PI / 25;
69
+ var bluestop = 0.5;
70
+ var bluedir = 0;
71
+ var yellowstop = 0.8;
72
+ var yellowdir = 0;
73
+ var childarc = graph.createShape('arc',{style:style,center:{x:arc.width / 2,y:arc.height / 2},start:0,end: Math.PI / 3,radius:arc.width / 2,anticlockwise:false});
74
+
75
+ style = g.util.clone(style);
76
+ style.close = true;
77
+ style.lineWidth = 1.1;
78
+ style.fill = 'red';
79
+ style.zIndex = 4;
80
+ var harc = graph.createShape('harc',{style:style, center:{x:600,y:380}, startAngle:0, endAngle: Math.PI * 2, minRadius:100, maxRadius:150, anticlockwise:false});
81
+ graph.children.add(harc);
82
+
83
+ function arcAni() {
84
+ var s=childarc.startAngle + step;
85
+ var e = childarc.endAngle + step;
86
+ if(s > Math.PI * 2) {
87
+ s = 0;
88
+ e = Math.PI / 3;
89
+ }
90
+ childarc.startAngle = s;
91
+ childarc.endAngle = e;
92
+ harc.endAngle = s;
93
+
94
+
95
+ if(bluestop >= yellowstop) {
96
+ bluedir = 1;
97
+ //return false;
98
+ }
99
+ else if(bluestop < 0.1) {
100
+ bluedir = 0;
101
+ }
102
+ bluestop = bluedir == 0?bluestop + 0.01:bluestop-0.01;
103
+
104
+ arc.style.fill='radial-gradient(50% 50% 0 50% 50% 50%, green 0,blue '+bluestop+', yellow '+yellowstop+', red 1)';
105
+ graph.needUpdate = true;
106
+ }
107
+ arc.children.add(childarc);
108
+ childarc.animate(arcAni, 10);
109
+
110
+
111
+ harc.canMove(true);
112
+
113
+
114
+ //画一个进度显示
115
+ var w = 100;
116
+ var h = 100;
117
+ var forceColor = '#037CFC';
118
+ //先画底层圆
119
+ var style = {
120
+ stroke: '#efeff4',
121
+ lineWidth: 4,
122
+ close: true,
123
+ zIndex: 1
124
+ };
125
+ var radius = (w - style.lineWidth) / 2 - 1;
126
+ var bgarc = graph.createShape('circle', {
127
+ style: style,
128
+ center: { x: 120, y: 120 },
129
+ radius: radius,
130
+ start: 0,
131
+ end: Math.PI * 2
132
+ });
133
+
134
+ style = graph.util.clone(style);
135
+ style.stroke = forceColor;
136
+ delete style.close; //进度圆不需要封闭
137
+ var progressArc = graph.createShape('arc', {
138
+ style: style,
139
+ center: { x: '50%', y: '50%' },
140
+ start: -Math.PI / 2,
141
+ end: -Math.PI / 2,
142
+ radius: radius,
143
+ anticlockwise: false
144
+ });
145
+ graph.children.add(bgarc);
146
+ bgarc.children.add(progressArc);
147
+
148
+ style = graph.util.clone(style);
149
+ style.fill = forceColor
150
+ style.textAlign = 'center';
151
+ style.textBaseline = 'middle';
152
+ style.font = '22px Arial';
153
+ //创建一个label
154
+ var progressLabel = graph.createShape('label', {
155
+ style: style,
156
+ position: { x: 0, y: 0 },
157
+ text: '0%',
158
+ width: w,
159
+ height: h
160
+ });
161
+ bgarc.children.add(progressLabel);
162
+
163
+ //改变进度
164
+ var curprogress = 0;
165
+ setInterval(function(){
166
+ progressArc.endAngle = curprogress/100 * Math.PI * 2 + progressArc.startAngle;//当前进度应该转到的角度
167
+ progressLabel.text = Math.ceil(curprogress) + '%';
168
+
169
+ curprogress++;
170
+ if(curprogress >= 100) curprogress = 0;
171
+ }, 100);
172
+ }
173
173
  </script>
package/example/pso.html CHANGED
@@ -1,148 +1,148 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
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
- <title>pso</title>
7
- <style>
8
- html,body {
9
- margin:0;
10
- padding:0;
11
- width:100%;
12
- height:100%;
13
- background-color: #000;
14
- overflow: hidden;
15
- }
16
- #pso {
17
- position: absolute;
18
- }
19
- </style>
20
- </head>
21
- <body>
22
- <div>
23
- <canvas id="pso">你的浏览器暂不支持此功能</canvas>
24
- </div>
25
- <script type="module">
26
- import jmGraph from "../index.js";
27
-
28
- const curPos = {x: 400, y: 400};
29
-
30
- const graph = new jmGraph('pso', {
31
- width: window.innerWidth,
32
- height: window.innerHeight,
33
- autoRefresh: true,
34
- mode: '2d'
35
- });
36
-
37
- function createItems(count) {
38
- var style = {
39
- lineWidth:1,
40
- close:true,
41
- //stroke:'#fff',
42
- fill:'#05a2e2'
43
- };
44
- let radius = 2;
45
-
46
- let items = [];
47
- for(let i=0; i<count; i++) {
48
-
49
- var styletmp = graph.util.clone(style);
50
- styletmp.fill = graph.createRadialGradient(radius, radius, 0, radius, radius, radius);
51
- var rr1 = Math.floor(Math.random() * 255);
52
- var gg1 = Math.floor(Math.random() * 255);
53
- var bb1 = Math.floor(Math.random() * 255);
54
- var rr2 = Math.floor(Math.random() * 255);
55
- var gg2 = Math.floor(Math.random() * 255);
56
- var bb2 = Math.floor(Math.random() * 255);
57
- styletmp.fill.addStop(0, graph.util.toColor(rr1,gg1,bb1));
58
- styletmp.fill.addStop(1, graph.util.toColor(rr2,gg2,bb2));
59
-
60
- let pos = {
61
- x: Math.random() * graph.width,
62
- y: Math.random() * graph.height
63
- };
64
- let shape = graph.createShape('circle',{style: styletmp, center: pos, radius: radius, anticlockwise:true});
65
- graph.children.add(shape);
66
- items.push({
67
- velocity:{
68
- x:0,
69
- y:0
70
- },
71
- present: pos,
72
- shape: shape
73
- });
74
- }
75
- return items;
76
- }
77
-
78
-
79
- const pso = {
80
- c1: 2,
81
- c2: 2,
82
- w: 0.6,
83
- velocity:function (pBest, gBest, present, velocity) {
84
- let v = velocity||{x:0,y:0};
85
- v.x = this.w*v.x + this.c1*Math.random()*(pBest.x - present.x) + this.c2*Math.random()*(gBest.x - present.x);
86
- v.y = this.w*v.y + this.c1*Math.random()*(pBest.y - present.y) + this.c2*Math.random()*(gBest.y - present.y);
87
- return v;
88
- },
89
- present:function ( velocity,present) {
90
- let p = present||{x:0,y:0};
91
- p.x = p.x + velocity.x;
92
- p.y = p.y + velocity.y;
93
- return p;
94
- },
95
- gBest:function (arr,goal) {
96
- let gBest = {
97
- x: Number.POSITIVE_INFINITY,
98
- y: Number.POSITIVE_INFINITY
99
- };
100
- arr.forEach(function (item) {
101
- if(Math.abs(goal.x-gBest.x) > Math.abs(goal.x-item.present.x)){
102
- gBest.x = item.present.x
103
- }
104
- if(Math.abs(goal.y-gBest.y) > Math.abs(goal.y-item.present.y)){
105
- gBest.y = item.present.y
106
- }
107
- });
108
- return gBest
109
- }
110
- };
111
-
112
- function startPso(items) {
113
- items = items || createItems(500);
114
- const gBest = pso.gBest(items, curPos);
115
- for(let i = 0;i < items.length;i++){
116
- items[i].velocity = pso.velocity(items[i].present, gBest, items[i].present, items[i].velocity);
117
- items[i].present = pso.present(items[i].velocity, items[i].present);
118
- }
119
- graph.needUpdate = true;
120
- }
121
-
122
- const items = createItems(1000);
123
-
124
- //实时更新画布
125
- function update() {
126
- startPso(items);
127
- setTimeout(()=>{
128
- graph.requestAnimationFrame(update);
129
- }, 50);
130
- }
131
- graph.requestAnimationFrame(update);
132
-
133
- graph.on('mousedown mousemove', (e) => {
134
- curPos.x = e.position.x;
135
- curPos.y = e.position.y;
136
- });
137
- graph.on('touchstart touchmove', (e) => {
138
- curPos.x = e.position.x;
139
- curPos.y = e.position.y;
140
- });
141
-
142
- setInterval(()=>{
143
- curPos.x = Math.random() * graph.width;
144
- curPos.y = Math.random() * graph.height;
145
- }, 1000);
146
- </script>
147
- </body>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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
+ <title>pso</title>
7
+ <style>
8
+ html,body {
9
+ margin:0;
10
+ padding:0;
11
+ width:100%;
12
+ height:100%;
13
+ background-color: #000;
14
+ overflow: hidden;
15
+ }
16
+ #pso {
17
+ position: absolute;
18
+ }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <div>
23
+ <canvas id="pso">你的浏览器暂不支持此功能</canvas>
24
+ </div>
25
+ <script type="module">
26
+ import jmGraph from "../index.js";
27
+
28
+ const curPos = {x: 400, y: 400};
29
+
30
+ const graph = new jmGraph('pso', {
31
+ width: window.innerWidth,
32
+ height: window.innerHeight,
33
+ autoRefresh: true,
34
+ mode: 'webgl'
35
+ });
36
+
37
+ function createItems(count) {
38
+ var style = {
39
+ lineWidth:1,
40
+ close:true,
41
+ //stroke:'#fff',
42
+ fill:'#05a2e2'
43
+ };
44
+ let radius = 2;
45
+
46
+ let items = [];
47
+ for(let i=0; i<count; i++) {
48
+
49
+ var styletmp = graph.util.clone(style);
50
+ styletmp.fill = graph.createRadialGradient(radius, radius, 0, radius, radius, radius);
51
+ var rr1 = Math.floor(Math.random() * 255);
52
+ var gg1 = Math.floor(Math.random() * 255);
53
+ var bb1 = Math.floor(Math.random() * 255);
54
+ var rr2 = Math.floor(Math.random() * 255);
55
+ var gg2 = Math.floor(Math.random() * 255);
56
+ var bb2 = Math.floor(Math.random() * 255);
57
+ styletmp.fill.addStop(0, graph.util.toColor(rr1,gg1,bb1));
58
+ styletmp.fill.addStop(1, graph.util.toColor(rr2,gg2,bb2));
59
+
60
+ let pos = {
61
+ x: Math.random() * graph.width,
62
+ y: Math.random() * graph.height
63
+ };
64
+ let shape = graph.createShape('circle',{style: styletmp, center: pos, radius: radius, anticlockwise:true});
65
+ graph.children.add(shape);
66
+ items.push({
67
+ velocity:{
68
+ x:0,
69
+ y:0
70
+ },
71
+ present: pos,
72
+ shape: shape
73
+ });
74
+ }
75
+ return items;
76
+ }
77
+
78
+
79
+ const pso = {
80
+ c1: 2,
81
+ c2: 2,
82
+ w: 0.6,
83
+ velocity:function (pBest, gBest, present, velocity) {
84
+ let v = velocity||{x:0,y:0};
85
+ v.x = this.w*v.x + this.c1*Math.random()*(pBest.x - present.x) + this.c2*Math.random()*(gBest.x - present.x);
86
+ v.y = this.w*v.y + this.c1*Math.random()*(pBest.y - present.y) + this.c2*Math.random()*(gBest.y - present.y);
87
+ return v;
88
+ },
89
+ present:function ( velocity,present) {
90
+ let p = present||{x:0,y:0};
91
+ p.x = p.x + velocity.x;
92
+ p.y = p.y + velocity.y;
93
+ return p;
94
+ },
95
+ gBest:function (arr,goal) {
96
+ let gBest = {
97
+ x: Number.POSITIVE_INFINITY,
98
+ y: Number.POSITIVE_INFINITY
99
+ };
100
+ arr.forEach(function (item) {
101
+ if(Math.abs(goal.x-gBest.x) > Math.abs(goal.x-item.present.x)){
102
+ gBest.x = item.present.x
103
+ }
104
+ if(Math.abs(goal.y-gBest.y) > Math.abs(goal.y-item.present.y)){
105
+ gBest.y = item.present.y
106
+ }
107
+ });
108
+ return gBest
109
+ }
110
+ };
111
+
112
+ function startPso(items) {
113
+ items = items || createItems(500);
114
+ const gBest = pso.gBest(items, curPos);
115
+ for(let i = 0;i < items.length;i++){
116
+ items[i].velocity = pso.velocity(items[i].present, gBest, items[i].present, items[i].velocity);
117
+ items[i].present = pso.present(items[i].velocity, items[i].present);
118
+ }
119
+ graph.needUpdate = true;
120
+ }
121
+
122
+ const items = createItems(1000);
123
+
124
+ //实时更新画布
125
+ function update() {
126
+ startPso(items);
127
+ setTimeout(()=>{
128
+ graph.requestAnimationFrame(update);
129
+ }, 50);
130
+ }
131
+ graph.requestAnimationFrame(update);
132
+
133
+ graph.on('mousedown mousemove', (e) => {
134
+ curPos.x = e.position.x;
135
+ curPos.y = e.position.y;
136
+ });
137
+ graph.on('touchstart touchmove', (e) => {
138
+ curPos.x = e.position.x;
139
+ curPos.y = e.position.y;
140
+ });
141
+
142
+ setInterval(()=>{
143
+ curPos.x = Math.random() * graph.width;
144
+ curPos.y = Math.random() * graph.height;
145
+ }, 1000);
146
+ </script>
147
+ </body>
148
148
  </html>