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/sort.html CHANGED
@@ -1,816 +1,805 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
- <title>排序算法演示</title>
6
- <meta name="viewport" content="width=device-width,initial-scale=1">
7
- <script src="//mat1.gtimg.com/www/mobi/js/zepto.min.js"></script>
8
- </head>
9
- <button id="btn_quick" href="#">快速排序</button>
10
- <button id="btn_straightinsertion" href="#">直接插入排序</button>
11
- <button id="btn_shell" href="#">希尔排序</button>
12
- <button id="btn_simpleselection" href="#">简单选择排序</button>
13
- <button id="btn_simpleselection2" href="#">二元选择排序</button>
14
- <button id="btn_bubble" href="#">冒泡排序</button>
15
- <button id="btn_heap" href="#">堆排序</button>
16
- <body style="width:100%;">
17
- <div id="mycanvas" style="border:1px solid #ddd;width:100%;"></div>
18
- <div id="console" style="border:1px solid #ccc;background-color:#000;color:green; width: 100%;height: 300px;overflow-y:auto;padding:4px;"></div>
19
- </body>
20
- <script type="module">
21
- import jmGraph from "../index.js";
22
-
23
- Array.prototype.toRect = function(){
24
- var rects = [];
25
- for(var i=0;i<this.length;i++) {
26
- rects.push(this[i].rect || this);
27
- }
28
- return rects;
29
- }
30
-
31
- //排序管理对象
32
- function jmSort(graph) {
33
- //原始数组个数
34
- this.arrCount = 20;
35
- //原始数组
36
- this.source = [];
37
-
38
- this.graph = graph;
39
- this.rectStyle = {
40
- stroke:'rgb(173,173,209)',
41
- lineWidth:1,
42
- close:true,
43
- fill: 'rgb(8,209,54)'
44
- };
45
-
46
- this.disableStyle = {
47
- stroke:'rgba(173,173,209,0.8)',
48
- lineWidth:1,
49
- close:true,
50
- fill: 'rgba(88,196,113,0.5)'
51
- };
52
- //this.rectStyle.shadow = this.graph.createShadow(2,2,2,'rgb(39,40,34)');
53
-
54
- this.selectRectStyle = {
55
- stroke:'rgb(120,20,80)',
56
- lineWidth: 2,
57
- zIndex: 100,
58
- close:true,
59
- fill: 'rgba(255,180,5,0.7)'
60
- };
61
- //this.selectRectStyle.shadow = this.graph.createShadow(4,4,6,'rgb(39,40,34)');
62
-
63
- //基准样式
64
- this.datumRectStyle = {
65
- stroke:'rgb(224,84,68)',
66
- lineWidth:2,
67
- close:true,
68
- zIndex: 50,
69
- //lineType: 'dotted',
70
- fill: 'rgba(224,84,68,0.7)'
71
- };
72
-
73
- this.labelStyle = {
74
- stroke:'rgb(120,20,80)',
75
- textAlign: 'center',
76
- textBaseline: 'middle',
77
- font: '12px Arial',
78
- lineWidth:1
79
- };
80
- }
81
-
82
- //延迟数组循环
83
- jmSort.prototype.arrayTimeout = function(arr, fun, endfun, t, index, end) {
84
- index = index || 0;
85
- end = end || arr.length;
86
- var t = t || 200;
87
- var self = this;
88
- function intervalArr() {
89
- if(index >= end) {endfun && endfun(); return;}
90
- var r = fun(index, arr[index], function(){
91
- index ++;
92
- self.timeoutHandler = setTimeout(intervalArr, t);
93
- });
94
- if(r === false) {
95
- endfun && endfun(); return
96
- }
97
- }
98
- intervalArr();
99
- }
100
-
101
- //柱子移动动画
102
- jmSort.prototype.rectAnimate = function(rect, cb) {
103
- if(typeof index == 'function') {
104
- cb = index;
105
- index = 0;
106
- }
107
- if(!rect.length) {
108
- rect = [rect];
109
- }
110
-
111
- var tox = [];
112
- var offx = [];
113
- var pos = [];
114
- var count = rect.length;
115
- for(var i=0;i<count;i++) {
116
- pos[i] = rect[i].rect.position;
117
- //重新计算其x坐标
118
- tox[i] = this.xStep * rect[i].index + 10;
119
- offx[i] = (tox[i] - pos[i].x) / 20;
120
- }
121
-
122
- var self = this;
123
- function move() {
124
- var complete = 0;
125
- for(var i=0;i<count;i++) {
126
- pos[i].x += offx[i];
127
- if(offx[i] ==0 || (offx[i] > 0 && pos[i].x >= tox[i]) || (offx[i] < 0 && pos[i].x <= tox[i])) {
128
- pos[i].x = tox[i];
129
- complete++;
130
- }
131
- }
132
- self.graph.redraw();
133
- if(complete >= count) {
134
- cb && cb();
135
- }
136
- else {
137
- self.aniTimeoutHandler = setTimeout(move, 100);
138
- }
139
- }
140
- move();
141
- }
142
-
143
- //播放动画
144
- jmSort.prototype.play = function(frames, callback) {
145
- if(typeof frames == 'function') {
146
- callback = frames;
147
- frames = null;
148
- }
149
- frames = frames || this.frames;
150
-
151
- if(frames.length == 0) {
152
- callback && callback();
153
- return;
154
- }
155
- var f = frames.splice(0,1)[0];//取最早的一个
156
- var self = this;
157
-
158
- if(f.msg) {
159
- log(f.msg);
160
- }
161
-
162
- if(f.move && f.move.length) {
163
- //var count = 0;
164
- //for(var i=0;i<f.move.length;i++) {
165
- this.rectAnimate(f.move, function(){
166
- //count ++;
167
- //if(count >= f.move.length) {
168
- self.play(callback);
169
- //}
170
- });
171
- //}
172
- }
173
- else if(f.sels) {
174
- this.selectRect.apply(this, f.sels);
175
- this.play(callback);
176
- //setTimeout(function(){
177
- // self.play(callback);
178
- //}, 40);
179
- }
180
- else if(f.datum) {
181
- if(this.datumLine) {
182
- var start = this.datumLine.start;
183
- var end = this.datumLine.end;
184
- start.y = end.y = f.datum.rect.position.y;
185
- this.datumLine.visible = true;
186
- }
187
- this.play(callback);
188
- }
189
- else if(f.refresh) {
190
- this.refreshGraph(f.refresh);
191
- this.play(callback);
192
- }
193
- else {
194
- this.play(callback);
195
- }
196
- }
197
-
198
- //初始化排序条件，原始数组
199
- jmSort.prototype.init = function(){
200
- this.source = [];
201
- this.frames = [];
202
- var max = 100;
203
- var offy = this.graph.height - 20;
204
- this.graph.children.clear();
205
- //当前 x轴分布单位宽度
206
- this.xStep = (this.graph.width - 20) / this.arrCount;
207
-
208
- for(var i=0;i<this.arrCount;i++) {
209
- var v = {};
210
- v.value = Math.floor(Math.random() * max);
211
- v.height = v.value / max * offy;
212
- v.toString = function(){
213
- return this.value;
214
- };
215
- this.source.push(v);
216
- }
217
- //画基准线
218
- this.datumLine = this.graph.createLine({x:0,y:0},{x:this.graph.width,y:0},this.datumRectStyle);
219
- this.datumLine.visible = false;
220
- this.graph.children.add(this.datumLine);
221
- this.refreshGraph(this.source);
222
- }
223
-
224
- jmSort.prototype.reset = function() {
225
- if(this.timeoutHandler) clearTimeout(this.timeoutHandler);
226
- if(this.aniTimeoutHandler) clearTimeout(this.aniTimeoutHandler);
227
- if(this.datumLine) this.datumLine.visible = false;
228
- //this.refreshGraph();
229
- clear();
230
- this.init();
231
- }
232
-
233
- //刷新画布
234
- jmSort.prototype.refreshGraph = function(arr) {
235
- arr = arr || this.source;
236
- //this.graph.children.clear();
237
- var offy = this.graph.height - 20;
238
- for(var i=0;i<arr.length;i++) {
239
- if(arr[i].rect) {
240
- var pos = arr[i].rect.position;
241
- pos.x = this.xStep * i + 10;
242
- }
243
- else {
244
- var pos = {};
245
- pos.x = this.xStep * i + 10;
246
- pos.y = offy - arr[i].height;
247
- arr[i].rect = this.graph.createShape('rect',{position:pos,width: 10, height: arr[i].height, style: this.rectStyle});
248
- //arr[i].item = arr[i];
249
- var label = this.graph.createShape('label',{style:this.labelStyle,position:{x:0,y:arr[i].height},value:arr[i].value,width:10,height:20});
250
- arr[i].rect.children.add(label);
251
-
252
- this.graph.children.add(arr[i].rect);
253
- }
254
- //this.graph.children.add(arr[i].rect);
255
- }
256
- //this.graph.redraw();
257
- }
258
-
259
- //选中某几个值，则加亮显示
260
- jmSort.prototype.selectRect = function(datum, sels, area) {
261
- var self = this;
262
- this.graph.children.each(function(i, rect) {
263
- if(!rect.is('jmRect')) return;
264
- if(datum && (datum.indexOf(rect) > -1)) {
265
- rect.style = self.datumRectStyle;
266
- }
267
- else if(sels && (sels.indexOf(rect) > -1)) {
268
- rect.style = self.selectRectStyle;
269
- }
270
- else if(area && (area.indexOf(rect) > -1)) {
271
- rect.style = self.rectStyle;
272
- }
273
- else {
274
- rect.style = self.disableStyle;
275
- }
276
- });
277
- //this.graph.refresh();
278
- }
279
-
280
- //快速排序
281
- //取其中一个值，把小于此值的放到其左边，大于此值的放到其右边
282
- //如此递归
283
- jmSort.prototype.quickSort = function(arr, callback) {
284
- if(typeof arr == 'function') {
285
- callback = arr;
286
- arr = null;
287
- }
288
- arr = arr || this.source;
289
-
290
- this.frames.push({msg: '快速排序:取其中一个值，把小于此值的放到其左边，大于此值的放到其右边,再分别对左右二边进行同样处理，如此递归直到最后一个元素。<br />'});
291
-
292
- var self = this;
293
- function sort(source, oldleft, oldrigth) {
294
- if(source.length <= 1) return source;
295
-
296
- self.frames.push({msg:'<br />选定区域：' + source.toString()});
297
- //取一个值做为比较对象，这里直接取中间的值（任务一个都可）
298
- var mindex = Math.floor(source.length /2);
299
- var m = source[mindex];//基准值
300
- self.frames.push({datum: m,msg:'选中' + m.value + '为基准值'});
301
-
302
- //选中当前区域
303
- var area = [];
304
- for(var i=0;i<source.length;i++) {
305
- area.push(source[i].rect);
306
- }
307
- self.frames.push({sels:[[m.rect],null, area]});
308
-
309
- var left = mindex>0?source.slice(0, mindex):[];
310
- var right = mindex>0&&mindex<source.length-1?source.slice(mindex+1):[];
311
- var middle = [m];
312
-
313
- var index = oldleft?oldleft.length:0;
314
- for(var i=0;i<source.length;i++) {
315
- var s = source[i];
316
- self.frames.push({sels:[[m.rect],[s.rect], area]});
317
- var f = {move:[]};
318
- var sindex = i;
319
- if(s.value < m.value) {
320
- if(i < mindex) continue;
321
- left.push(s);
322
- var rindex = right.indexOf(s);
323
- right.splice(rindex, 1);
324
- sindex = left.length - 1;
325
- f.move.push({
326
- rect: s.rect,
327
- index: sindex + index
328
- });
329
- f.msg = s.value + '小于基准值'+m.value+'，移往基准值左边';
330
- var movearr = middle.concat(right);
331
- for(var j=0;j<rindex+middle.length;j++) {
332
- f.move.push({
333
- rect: movearr[j].rect,
334
- index: sindex + index + j + 1
335
- });
336
- }
337
- }
338
- else if(s.value > m.value) {
339
- if(i > mindex) continue;
340
- var lindex = left.indexOf(s);
341
- left.splice(lindex, 1);
342
- right.unshift(s);
343
- sindex = left.length + middle.length;
344
- f.move.push({
345
- rect: s.rect,
346
- index: sindex + index
347
- });
348
- f.msg = s.value + '大于基准值'+m.value+'，移往基准值右边';
349
- var movearr = left.concat(middle);
350
- for(var j=lindex;j<movearr.length;j++) {
351
- f.move.push({
352
- rect: movearr[j].rect,
353
- index: index + j
354
- });
355
- }
356
- }
357
- else if(i != mindex) {
358
- if(i < mindex) {
359
- var lindex = left.indexOf(s);
360
- left.splice(lindex, 1);
361
- middle.unshift(s);
362
- sindex = left.length;
363
- f.move.push({
364
- rect: s.rect,
365
- index: sindex + index
366
- });
367
-
368
- f.msg = s.value + '等于基准值'+m.value+'，移往基准值左边位';
369
- for(var j=lindex;j<left.length;j++) {
370
- f.move.push({
371
- rect: left[j].rect,
372
- index: index + j
373
- });
374
- }
375
- }
376
- if(i > mindex) {
377
- var rindex = right.indexOf(s);
378
- right.splice(right.indexOf(s), 1);
379
- middle.push(s);
380
- sindex = left.length + middle.length - 1;
381
- f.move.push({
382
- rect: s.rect,
383
- index: sindex + index
384
- });
385
-
386
- f.msg = s.value + '等于基准值'+m.value+'，移往基准值右边位';
387
- for(var j=0;j<rindex;j++) {
388
- f.move.push({
389
- rect: right[j].rect,
390
- index: sindex + index + j + 1
391
- });
392
- }
393
- }
394
- }
395
- if(f.move.length) self.frames.push(f);
396
- }
397
-
398
- return sort(left, oldleft, middle.concat(right, oldrigth||[])).concat(middle, sort(right, (oldleft||[]).concat(left, middle)));
399
- }
400
- var result = sort(arr);
401
- this.play(function(){
402
- callback && callback(result);
403
- });
404
- return result;
405
- }
406
-
407
- //直接插入排序
408
- //将一个记录插入到已排序好的有序表中，从而得到一个新记录数增1的有序表。即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。
409
- jmSort.prototype.straightInsertionSort = function(arr, dk, callback) {
410
- if(typeof arr == 'function') {
411
- callback = arr;
412
- arr= null;
413
- }
414
- if(typeof dk == 'function') {
415
- callback = dk;
416
- dk= 0;
417
- }
418
-
419
-
420
-
421
- arr = arr || this.source;
422
- dk = dk || 1;
423
- if(dk == 1) this.frames.push({msg: '直接插入排序('+dk+')：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。(实际操作就是每个元素向前比较直到值等于或小于它为止)<br />'});
424
-
425
- //拷贝一份
426
- var result = arr.slice(0);
427
- var self = this;
428
-
429
- for(var i=dk;i<result.length;i++) {
430
- var k = i;
431
- var j = k - dk;
432
- while(j>=0) {
433
- var v = result[k];
434
- var pre = result[j];
435
-
436
- this.frames.push({sels: [[v.rect], [pre.rect]]});
437
-
438
- if(v.value < pre.value) {
439
- result[j] = v;
440
- result[k] = pre;
441
-
442
- v.index = j;
443
- pre.index = k;
444
-
445
- this.frames.push({move: [{rect: pre.rect,index:k}, {rect:v.rect,index:j}], msg: v.value + '小于' + pre.value + '，互换位置，继续往前比较。'});
446
-
447
- k = j;
448
- j -= dk;
449
- }
450
- else {
451
- this.frames.push({msg: v.value + '大于或等于' + pre.value + '，中止往前比较。'});
452
- break;
453
- }
454
- }
455
- }
456
-
457
- callback && callback(result);
458
- return result;
459
- }
460
-
461
- //希尔排序
462
- //先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。
463
- jmSort.prototype.shellSort = function(arr, callback) {
464
- if(typeof arr == 'function') {
465
- callback = arr;
466
- arr = null;
467
- }
468
- this.frames.push({msg: '希尔排序：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。(其实就是将直接插入排序的与前一个比较改为与前第N个比较，直接全部排完。)<br />'});
469
-
470
- arr = arr || this.source;
471
- var dk = Math.floor(arr.length / 2);
472
- var result = arr;
473
- while(dk >= 1) {
474
- this.frames.push('比较跨度：' + dk);
475
- result = this.straightInsertionSort(result, dk);
476
- dk = Math.floor(dk / 2);
477
- }
478
-
479
- this.play(function(){
480
- callback && callback(result);
481
- });
482
- return result;
483
- }
484
-
485
- //简单选择排序
486
- //在要排序的一组数中，选出最小（或者最大）的一个数与第1个位置的数交换；然后在剩下的数当中再找最小（或者最大）的与第2个位置的数交换，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。
487
- jmSort.prototype.simpleSelectionSort = function(arr, callback) {
488
- if(typeof arr == 'function') {
489
- callback = arr;
490
- arr = null;
491
- }
492
- arr = arr || this.source.slice(0);
493
-
494
- this.frames.push({msg: '简单选择排序：在要排序的一组数中，选出最小（或者最大）的一个数与第1个位置的数交换；然后在剩下的数当中再找最小（或者最大）的与第2个位置的数交换，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。<br />'});
495
-
496
- for(var i=0;i<arr.length-1;i++) {
497
- var min = arr[i];
498
- var minindex = i;
499
-
500
- for(var j=i+1;j<arr.length;j++) {
501
- if(min.value > arr[j].value) {
502
- min = arr[j];
503
- minindex = j;
504
- }
505
- //this.frames.push({sels:[[min.rect], [arr[j].rect]]});
506
- }
507
-
508
- if(minindex != i) {
509
- this.frames.push({sels:[[min.rect], [arr[i].rect], arr.slice(i).toRect()]});
510
- this.frames.push({move: [{rect: min.rect, index: i}, {rect: arr[i].rect, index: minindex}], msg: '最小值为：' + min.value + '，跟第'+(i+1)+'个元素互换位置。'});
511
- arr[minindex] = arr[i];
512
- arr[i] = min;
513
- }
514
- }
515
-
516
- this.play(function(){
517
- callback && callback(arr);
518
- });
519
-
520
- return arr;
521
- }
522
-
523
- //二元选择排序
524
- //简单选择排序，每趟循环只能确定一个元素排序后的定位。我们可以考虑改进为每趟循环确定两个元素（当前趟最大和最小记录）的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序，最多只需进行[n/2]趟循环即可
525
- jmSort.prototype.selection2Sort = function(arr, callback) {
526
- if(typeof arr == 'function') {
527
- callback = arr;
528
- arr = null;
529
- }
530
- arr = arr || this.source.slice(0);
531
-
532
- this.frames.push({msg: '二元选择排序：简单选择排序，每趟循环只能确定一个元素排序后的定位。我们可以考虑改进为每趟循环确定两个元素（当前趟最大和最小记录）的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序，最多只需进行[n/2]趟循环即可<br />'});
533
-
534
- var index = -1;
535
- var self = this;
536
- var end = Math.floor(arr.length / 2);
537
- for(var i=0;i<end;i++) {
538
- //取最小值和最大值
539
- var min = arr[i];
540
- var max = arr[i];
541
- var minindex = i;
542
- var maxindex = i;
543
-
544
- for(var j=i+1;j<arr.length-i;j++) {
545
- if(min.value > arr[j].value) {
546
- min = arr[j];
547
- minindex = j;
548
- }
549
- if(max.value <= arr[j].value) {
550
- max = arr[j];
551
- maxindex = j;
552
- }
553
- }
554
-
555
- var maxpos = j - 1;
556
- this.frames.push({sels:[[min.rect, arr[i].rect], [max.rect, arr[maxpos].rect], arr.slice(i, j).toRect()]});
557
- if(minindex != i) {
558
- this.frames.push({move: [{rect: min.rect, index: i}, {rect: arr[i].rect, index: minindex}], msg: '最小值为：' + min.value + '，跟第'+(i+1)+'个元素互换位置。'});
559
- arr[minindex] = arr[i];
560
- arr[i] = min;
561
- //如果最大值是当前起始值，则它被换到最小值位置上了
562
- //需要重新改变最大值的索引为找到的最小值的索引
563
- if(maxindex == i) {
564
- maxindex = minindex;
565
- }
566
- }
567
- if(maxindex != maxpos) {
568
- this.frames.push({move: [{rect: max.rect, index: maxpos}, {rect: arr[maxpos].rect, index: maxindex}], msg: '最大值为：' + max.value + '，跟第'+j+'个元素互换位置。'});
569
- arr[maxindex] = arr[maxpos];
570
- arr[maxpos] = min;
571
- }
572
- }
573
-
574
- this.play(function(){
575
- callback && callback(arr);
576
- });
577
-
578
- return arr;
579
- }
580
-
581
- //冒泡排序
582
- //在要排序的一组数中，对当前还未排好序的范围内的全部数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。即：每当两相邻的数比较后发现它们的排序与排序要求相反时，就将它们互换。
583
- jmSort.prototype.bubbleSort = function(arr, callback) {
584
- if(typeof arr == 'function') {
585
- callback = arr;
586
- arr = null;
587
- }
588
- arr = arr || this.source.slice(0);
589
-
590
- this.frames.push({msg: '冒泡排序：在要排序的一组数中，对当前还未排好序的范围内的全部数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。即：每当两相邻的数比较后发现它们的排序与排序要求相反时，就将它们互换。<br />'});
591
-
592
- var i = arr.length - 1;
593
- while(i > 0) {
594
- var pos = 0;
595
- for(var j=0;j<i;j++) {
596
- this.frames.push({
597
- sels: [[arr[j].rect],[arr[j+1].rect], arr.slice(0, i + 1).toRect()]
598
- });
599
-
600
- if(arr[j].value > arr[j+1].value) {
601
- pos = j;
602
- var tmp=arr[j];arr[j]=arr[j+1];arr[j+1]=tmp;
603
- this.frames.push({
604
- move: [{
605
- rect: tmp.rect,
606
- index: j+1
607
- },{
608
- rect: arr[j].rect,
609
- index: j
610
- }],
611
- msg: tmp.value + '大于' + arr[j].value + '，互换位置。'
612
- });
613
- }
614
- }
615
- i=pos;
616
- }
617
- this.play(function(){
618
- callback && callback(arr);
619
- });
620
- }
621
-
622
- //堆排序
623
- jmSort.prototype.heapSort = function(arr, callback) {
624
- if(typeof arr == 'function') {
625
- callback = arr;
626
- arr = null;
627
- }
628
- arr = arr || this.source.slice(0);
629
-
630
- this.frames.push({msg: '堆排序：简单讲就是把一个数组看成一个完全的二叉树，每个节点带二个子节点，不断调整节点的位置保证父节点大于二个子节点，取根节点就是它的最大值（取完再进行一次调整如此递归），直到取完为止。<br />'});
631
-
632
- var result = [];
633
- var self = this;
634
- //把堆排列为大堆
635
- //堆中每个父节点的元素值都大于等于其孩子结点（如果存在）,这样的堆就是一个最大堆
636
- function bigHeap(source) {
637
- if(source.length <= 1) return source;
638
- self.frames.push({msg: '调整堆，保证父节点大于子节点。<br />'});
639
-
640
- var area = [];
641
- for(var i=0;i<source.length;i++) {
642
- area.push(source[i].rect);
643
- }
644
-
645
- for(var i=source.length;i>0;i--) {
646
- var s = source[i-1];
647
- //左右子节点
648
- var left = 2 * i;
649
- var right = left + 1;
650
-
651
- var selitems = [];
652
- if(source[left-1]) {
653
- selitems.push(source[left-1].rect);
654
- }
655
- if(source[right-1]) {
656
- selitems.push(source[right-1].rect);
657
- }
658
- self.frames.push({
659
- sels: [[s.rect],selitems, area]
660
- });
661
-
662
- //如果左子节点大于当前节点，则互换
663
- if(left <= source.length && source[left-1].value > s.value) {
664
- self.frames.push({move: [{
665
- rect: source[left-1].rect,
666
- index: i-1
667
- },{
668
- rect: s.rect,
669
- index: left - 1
670
- }], msg: '左子节点'+source[left-1].value+'大于父节点' + s.value + '，互换位置'});
671
-
672
- source[i-1] = source[left-1];
673
- source[left-1] = s;
674
- s = source[i-1];
675
-
676
- self.frames.push({
677
- sels: [[s.rect],selitems, area]
678
- });
679
- }
680
- if(right <= source.length && source[right-1].value > s.value) {
681
-
682
- self.frames.push({move: [{
683
- rect: source[right-1].rect,
684
- index: i-1
685
- },{
686
- rect: s.rect,
687
- index: right - 1
688
- }], msg: '右子节点'+source[right-1].value+'大于父节点' + s.value + '，互换位置'});
689
-
690
- source[i-1] = source[right-1];
691
- source[right-1] = s;
692
-
693
- self.frames.push({
694
- sels: [[source[i-1] .rect],selitems, area]
695
- });
696
- }
697
- }
698
- return source;
699
- }
700
-
701
- //每次取出根节点，再对余下的排为大堆，如此递归
702
- function sort(source) {
703
- source = bigHeap(source);
704
- //取最大的一个,放到结果第一个中
705
- result.unshift(source.shift());
706
-
707
- var f = {move: [{
708
- rect: result[0].rect,
709
- index: source.length
710
- }],
711
- msg: '取堆的根节点（堆中的最大值）:'+result[0].value+'，移到数组最后'};
712
- for(var i=0;i<source.length;i++) {
713
- f.move.push({
714
- rect: source[i].rect,
715
- index: i
716
- });
717
- }
718
- self.frames.push(f);
719
- if(source.length) {
720
- sort(source);
721
- }
722
- }
723
- sort(arr);//执行堆排序
724
- this.play(function(){
725
- callback && callback(result);
726
- });
727
-
728
- return result;
729
- }
730
-
731
- //$(function(){
732
- //开始
733
- var sort = null;
734
-
735
- var container = document.getElementById('mycanvas');
736
- var w = Math.min(600, document.getElementById('mycanvas').offsetWidth - 10);
737
- container.style.width = w + 'px';
738
- var h = Math.min(450, window.innerHeight - 10);
739
- container.style.height = h + 'px';
740
-
741
- //初始化jmgraph
742
- var g = jmGraph.create('mycanvas', {
743
- width: w,
744
- height: h,
745
- mode: '2d'
746
- });
747
-
748
-
749
- sort = new jmSort(g);
750
-
751
- sort.init();
752
- sort.heapSort(function(ret){
753
- console.log(ret);
754
- });
755
-
756
- //实时更新画布
757
- function update() {
758
- if(g.needUpdate) g.redraw();
759
- requestAnimationFrame(update);
760
- }
761
- update();
762
-
763
-
764
-
765
- $('#btn_quick').click(function(){
766
- sort.reset();
767
- sort.quickSort(null,null,null,function(ret) {
768
- this.datumLine.visible = false;
769
- this.selectRect(ret);
770
- console.log(ret);
771
- });
772
- return false;
773
- });
774
- $('#btn_straightinsertion').click(function(){
775
- sort.reset();
776
- sort.straightInsertionSort(function(result){
777
- sort.play();
778
- console.log(result);
779
- });
780
- return false;
781
- });
782
- $('#btn_shell').click(function(){
783
- sort.reset();
784
- sort.shellSort();
785
- return false;
786
- });
787
- $('#btn_simpleselection').click(function(){
788
- sort.reset();
789
- sort.simpleSelectionSort();
790
- return false;
791
- });
792
- $('#btn_simpleselection2').click(function(){
793
- sort.reset();
794
- sort.selection2Sort();
795
- return false;
796
- });
797
- $('#btn_bubble').click(function(){
798
- sort.reset();
799
- sort.bubbleSort();
800
- return false;
801
- });
802
- $('#btn_heap').click(function(){
803
- sort.reset();
804
- sort.heapSort();
805
- return false;
806
- });
807
- //});
808
-
809
- function log(msg) {
810
- $('#console').append(msg + '<br />')[0].scrollTop = $('#console')[0].scrollHeight;
811
- }
812
- function clear() {
813
- $('#console').html('');
814
- }
815
- </script>
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
5
+ <title>排序算法演示</title>
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+ </head>
8
+ <button id="btn_quick">快速排序</button>
9
+ <button id="btn_straightinsertion">直接插入排序</button>
10
+ <button id="btn_shell">希尔排序</button>
11
+ <button id="btn_simpleselection">简单选择排序</button>
12
+ <button id="btn_simpleselection2">二元选择排序</button>
13
+ <button id="btn_bubble">冒泡排序</button>
14
+ <button id="btn_heap">堆排序</button>
15
+ <body style="width:100%;">
16
+ <div id="mycanvas" style="border:1px solid #ddd;width:100%;"></div>
17
+ <div id="console" style="border:1px solid #ccc;background-color:#000;color:green; width: 100%;height: 300px;overflow-y:auto;padding:4px;"></div>
18
+ </body>
19
+ <script type="module">
20
+ import jmGraph from "../index.js";
21
+
22
+ Array.prototype.toRect = function(){
23
+ var rects = [];
24
+ for(var i=0;i<this.length;i++) {
25
+ rects.push(this[i].rect || this);
26
+ }
27
+ return rects;
28
+ }
29
+
30
+ //排序管理对象
31
+ function jmSort(graph) {
32
+ //原始数组个数
33
+ this.arrCount = 20;
34
+ //原始数组
35
+ this.source = [];
36
+
37
+ this.graph = graph;
38
+ this.rectStyle = {
39
+ stroke:'rgb(173,173,209)',
40
+ lineWidth:1,
41
+ close:true,
42
+ fill: 'rgb(8,209,54)'
43
+ };
44
+
45
+ this.disableStyle = {
46
+ stroke:'rgba(173,173,209,0.8)',
47
+ lineWidth:1,
48
+ close:true,
49
+ fill: 'rgba(88,196,113,0.5)'
50
+ };
51
+ //this.rectStyle.shadow = this.graph.createShadow(2,2,2,'rgb(39,40,34)');
52
+
53
+ this.selectRectStyle = {
54
+ stroke:'rgb(120,20,80)',
55
+ lineWidth: 2,
56
+ zIndex: 100,
57
+ close:true,
58
+ fill: 'rgba(255,180,5,0.7)'
59
+ };
60
+ //this.selectRectStyle.shadow = this.graph.createShadow(4,4,6,'rgb(39,40,34)');
61
+
62
+ //基准样式
63
+ this.datumRectStyle = {
64
+ stroke:'rgb(224,84,68)',
65
+ lineWidth:2,
66
+ close:true,
67
+ zIndex: 50,
68
+ //lineType: 'dotted',
69
+ fill: 'rgba(224,84,68,0.7)'
70
+ };
71
+
72
+ this.labelStyle = {
73
+ stroke:'rgb(120,20,80)',
74
+ textAlign: 'center',
75
+ textBaseline: 'middle',
76
+ font: '12px Arial',
77
+ lineWidth:1
78
+ };
79
+ }
80
+
81
+ //延迟数组循环
82
+ jmSort.prototype.arrayTimeout = function(arr, fun, endfun, t, index, end) {
83
+ index = index || 0;
84
+ end = end || arr.length;
85
+ var t = t || 200;
86
+ var self = this;
87
+ function intervalArr() {
88
+ if(index >= end) {endfun && endfun(); return;}
89
+ var r = fun(index, arr[index], function(){
90
+ index ++;
91
+ self.timeoutHandler = setTimeout(intervalArr, t);
92
+ });
93
+ if(r === false) {
94
+ endfun && endfun(); return
95
+ }
96
+ }
97
+ intervalArr();
98
+ }
99
+
100
+ //柱子移动动画
101
+ jmSort.prototype.rectAnimate = function(rect, cb) {
102
+ if(typeof index == 'function') {
103
+ cb = index;
104
+ index = 0;
105
+ }
106
+ if(!rect.length) {
107
+ rect = [rect];
108
+ }
109
+
110
+ var tox = [];
111
+ var offx = [];
112
+ var pos = [];
113
+ var count = rect.length;
114
+ for(var i=0;i<count;i++) {
115
+ pos[i] = rect[i].rect.position;
116
+ //重新计算其x坐标
117
+ tox[i] = this.xStep * rect[i].index + 10;
118
+ offx[i] = (tox[i] - pos[i].x) / 20;
119
+ }
120
+
121
+ var self = this;
122
+ function move() {
123
+ var complete = 0;
124
+ for(var i=0;i<count;i++) {
125
+ pos[i].x += offx[i];
126
+ if(offx[i] ==0 || (offx[i] > 0 && pos[i].x >= tox[i]) || (offx[i] < 0 && pos[i].x <= tox[i])) {
127
+ pos[i].x = tox[i];
128
+ complete++;
129
+ }
130
+ }
131
+ self.graph.redraw();
132
+ if(complete >= count) {
133
+ cb && cb();
134
+ }
135
+ else {
136
+ self.aniTimeoutHandler = setTimeout(move, 100);
137
+ }
138
+ }
139
+ move();
140
+ }
141
+
142
+ //播放动画
143
+ jmSort.prototype.play = function(frames, callback) {
144
+ if(typeof frames == 'function') {
145
+ callback = frames;
146
+ frames = null;
147
+ }
148
+ frames = frames || this.frames;
149
+
150
+ if(frames.length == 0) {
151
+ callback && callback();
152
+ return;
153
+ }
154
+ var f = frames.splice(0,1)[0];//取最早的一个
155
+ var self = this;
156
+
157
+ if(f.msg) {
158
+ log(f.msg);
159
+ }
160
+
161
+ if(f.move && f.move.length) {
162
+ //var count = 0;
163
+ //for(var i=0;i<f.move.length;i++) {
164
+ this.rectAnimate(f.move, function(){
165
+ //count ++;
166
+ //if(count >= f.move.length) {
167
+ self.play(callback);
168
+ //}
169
+ });
170
+ //}
171
+ }
172
+ else if(f.sels) {
173
+ this.selectRect.apply(this, f.sels);
174
+ this.play(callback);
175
+ //setTimeout(function(){
176
+ // self.play(callback);
177
+ //}, 40);
178
+ }
179
+ else if(f.datum) {
180
+ if(this.datumLine) {
181
+ var start = this.datumLine.start;
182
+ var end = this.datumLine.end;
183
+ start.y = end.y = f.datum.rect.position.y;
184
+ this.datumLine.visible = true;
185
+ }
186
+ this.play(callback);
187
+ }
188
+ else if(f.refresh) {
189
+ this.refreshGraph(f.refresh);
190
+ this.play(callback);
191
+ }
192
+ else {
193
+ this.play(callback);
194
+ }
195
+ }
196
+
197
+ //初始化排序条件，原始数组
198
+ jmSort.prototype.init = function(){
199
+ this.source = [];
200
+ this.frames = [];
201
+ var max = 100;
202
+ var offy = this.graph.height - 20;
203
+ this.graph.children.clear();
204
+ //当前 x轴分布单位宽度
205
+ this.xStep = (this.graph.width - 20) / this.arrCount;
206
+
207
+ for(var i=0;i<this.arrCount;i++) {
208
+ var v = {};
209
+ v.value = Math.floor(Math.random() * max);
210
+ v.height = v.value / max * offy;
211
+ v.toString = function(){
212
+ return this.value;
213
+ };
214
+ this.source.push(v);
215
+ }
216
+ //画基准线
217
+ this.datumLine = this.graph.createLine({x:0,y:0},{x:this.graph.width,y:0},this.datumRectStyle);
218
+ this.datumLine.visible = false;
219
+ this.graph.children.add(this.datumLine);
220
+ this.refreshGraph(this.source);
221
+ }
222
+
223
+ jmSort.prototype.reset = function() {
224
+ if(this.timeoutHandler) clearTimeout(this.timeoutHandler);
225
+ if(this.aniTimeoutHandler) clearTimeout(this.aniTimeoutHandler);
226
+ if(this.datumLine) this.datumLine.visible = false;
227
+ //this.refreshGraph();
228
+ clear();
229
+ this.init();
230
+ }
231
+
232
+ //刷新画布
233
+ jmSort.prototype.refreshGraph = function(arr) {
234
+ arr = arr || this.source;
235
+ //this.graph.children.clear();
236
+ var offy = this.graph.height - 20;
237
+ for(var i=0;i<arr.length;i++) {
238
+ if(arr[i].rect) {
239
+ var pos = arr[i].rect.position;
240
+ pos.x = this.xStep * i + 10;
241
+ }
242
+ else {
243
+ var pos = {};
244
+ pos.x = this.xStep * i + 10;
245
+ pos.y = offy - arr[i].height;
246
+ arr[i].rect = this.graph.createShape('rect',{position:pos,width: 10, height: arr[i].height, style: this.rectStyle});
247
+ //arr[i].item = arr[i];
248
+ var label = this.graph.createShape('label',{style:this.labelStyle,position:{x:0,y:arr[i].height},value:arr[i].value,width:10,height:20});
249
+ arr[i].rect.children.add(label);
250
+
251
+ this.graph.children.add(arr[i].rect);
252
+ }
253
+ //this.graph.children.add(arr[i].rect);
254
+ }
255
+ //this.graph.redraw();
256
+ }
257
+
258
+ //选中某几个值，则加亮显示
259
+ jmSort.prototype.selectRect = function(datum, sels, area) {
260
+ var self = this;
261
+ this.graph.children.each(function(i, rect) {
262
+ if(!rect.is('jmRect')) return;
263
+ if(datum && (datum.indexOf(rect) > -1)) {
264
+ rect.style = self.datumRectStyle;
265
+ }
266
+ else if(sels && (sels.indexOf(rect) > -1)) {
267
+ rect.style = self.selectRectStyle;
268
+ }
269
+ else if(area && (area.indexOf(rect) > -1)) {
270
+ rect.style = self.rectStyle;
271
+ }
272
+ else {
273
+ rect.style = self.disableStyle;
274
+ }
275
+ });
276
+ //this.graph.refresh();
277
+ }
278
+
279
+ //快速排序
280
+ //取其中一个值，把小于此值的放到其左边，大于此值的放到其右边
281
+ //如此递归
282
+ jmSort.prototype.quickSort = function(arr, callback) {
283
+ if(typeof arr == 'function') {
284
+ callback = arr;
285
+ arr = null;
286
+ }
287
+ arr = arr || this.source;
288
+
289
+ this.frames.push({msg: '快速排序:取其中一个值，把小于此值的放到其左边，大于此值的放到其右边,再分别对左右二边进行同样处理，如此递归直到最后一个元素。<br />'});
290
+
291
+ var self = this;
292
+ function sort(source, oldleft, oldrigth) {
293
+ if(source.length <= 1) return source;
294
+
295
+ self.frames.push({msg:'<br />选定区域：' + source.toString()});
296
+ //取一个值做为比较对象，这里直接取中间的值（任务一个都可）
297
+ var mindex = Math.floor(source.length /2);
298
+ var m = source[mindex];//基准值
299
+ self.frames.push({datum: m,msg:'选中' + m.value + '为基准值'});
300
+
301
+ //选中当前区域
302
+ var area = [];
303
+ for(var i=0;i<source.length;i++) {
304
+ area.push(source[i].rect);
305
+ }
306
+ self.frames.push({sels:[[m.rect],null, area]});
307
+
308
+ var left = mindex>0?source.slice(0, mindex):[];
309
+ var right = mindex>0&&mindex<source.length-1?source.slice(mindex+1):[];
310
+ var middle = [m];
311
+
312
+ var index = oldleft?oldleft.length:0;
313
+ for(var i=0;i<source.length;i++) {
314
+ var s = source[i];
315
+ self.frames.push({sels:[[m.rect],[s.rect], area]});
316
+ var f = {move:[]};
317
+ var sindex = i;
318
+ if(s.value < m.value) {
319
+ if(i < mindex) continue;
320
+ left.push(s);
321
+ var rindex = right.indexOf(s);
322
+ right.splice(rindex, 1);
323
+ sindex = left.length - 1;
324
+ f.move.push({
325
+ rect: s.rect,
326
+ index: sindex + index
327
+ });
328
+ f.msg = s.value + '小于基准值'+m.value+'，移往基准值左边';
329
+ var movearr = middle.concat(right);
330
+ for(var j=0;j<rindex+middle.length;j++) {
331
+ f.move.push({
332
+ rect: movearr[j].rect,
333
+ index: sindex + index + j + 1
334
+ });
335
+ }
336
+ }
337
+ else if(s.value > m.value) {
338
+ if(i > mindex) continue;
339
+ var lindex = left.indexOf(s);
340
+ left.splice(lindex, 1);
341
+ right.unshift(s);
342
+ sindex = left.length + middle.length;
343
+ f.move.push({
344
+ rect: s.rect,
345
+ index: sindex + index
346
+ });
347
+ f.msg = s.value + '大于基准值'+m.value+'，移往基准值右边';
348
+ var movearr = left.concat(middle);
349
+ for(var j=lindex;j<movearr.length;j++) {
350
+ f.move.push({
351
+ rect: movearr[j].rect,
352
+ index: index + j
353
+ });
354
+ }
355
+ }
356
+ else if(i != mindex) {
357
+ if(i < mindex) {
358
+ var lindex = left.indexOf(s);
359
+ left.splice(lindex, 1);
360
+ middle.unshift(s);
361
+ sindex = left.length;
362
+ f.move.push({
363
+ rect: s.rect,
364
+ index: sindex + index
365
+ });
366
+
367
+ f.msg = s.value + '等于基准值'+m.value+'，移往基准值左边位';
368
+ for(var j=lindex;j<left.length;j++) {
369
+ f.move.push({
370
+ rect: left[j].rect,
371
+ index: index + j
372
+ });
373
+ }
374
+ }
375
+ if(i > mindex) {
376
+ var rindex = right.indexOf(s);
377
+ right.splice(right.indexOf(s), 1);
378
+ middle.push(s);
379
+ sindex = left.length + middle.length - 1;
380
+ f.move.push({
381
+ rect: s.rect,
382
+ index: sindex + index
383
+ });
384
+
385
+ f.msg = s.value + '等于基准值'+m.value+'，移往基准值右边位';
386
+ for(var j=0;j<rindex;j++) {
387
+ f.move.push({
388
+ rect: right[j].rect,
389
+ index: sindex + index + j + 1
390
+ });
391
+ }
392
+ }
393
+ }
394
+ if(f.move.length) self.frames.push(f);
395
+ }
396
+
397
+ return sort(left, oldleft, middle.concat(right, oldrigth||[])).concat(middle, sort(right, (oldleft||[]).concat(left, middle)));
398
+ }
399
+ var result = sort(arr);
400
+ this.play(function(){
401
+ callback && callback(result);
402
+ });
403
+ return result;
404
+ }
405
+
406
+ //直接插入排序
407
+ //将一个记录插入到已排序好的有序表中，从而得到一个新记录数增1的有序表。即：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。
408
+ jmSort.prototype.straightInsertionSort = function(arr, dk, callback) {
409
+ if(typeof arr == 'function') {
410
+ callback = arr;
411
+ arr= null;
412
+ }
413
+ if(typeof dk == 'function') {
414
+ callback = dk;
415
+ dk= 0;
416
+ }
417
+
418
+
419
+
420
+ arr = arr || this.source;
421
+ dk = dk || 1;
422
+ if(dk == 1) this.frames.push({msg: '直接插入排序('+dk+')：先将序列的第1个记录看成是一个有序的子序列，然后从第2个记录逐个进行插入，直至整个序列有序为止。(实际操作就是每个元素向前比较直到值等于或小于它为止)<br />'});
423
+
424
+ //拷贝一份
425
+ var result = arr.slice(0);
426
+ var self = this;
427
+
428
+ for(var i=dk;i<result.length;i++) {
429
+ var k = i;
430
+ var j = k - dk;
431
+ while(j>=0) {
432
+ var v = result[k];
433
+ var pre = result[j];
434
+
435
+ this.frames.push({sels: [[v.rect], [pre.rect]]});
436
+
437
+ if(v.value < pre.value) {
438
+ result[j] = v;
439
+ result[k] = pre;
440
+
441
+ v.index = j;
442
+ pre.index = k;
443
+
444
+ this.frames.push({move: [{rect: pre.rect,index:k}, {rect:v.rect,index:j}], msg: v.value + '小于' + pre.value + '，互换位置，继续往前比较。'});
445
+
446
+ k = j;
447
+ j -= dk;
448
+ }
449
+ else {
450
+ this.frames.push({msg: v.value + '大于或等于' + pre.value + '，中止往前比较。'});
451
+ break;
452
+ }
453
+ }
454
+ }
455
+
456
+ callback && callback(result);
457
+ return result;
458
+ }
459
+
460
+ //希尔排序
461
+ //先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。
462
+ jmSort.prototype.shellSort = function(arr, callback) {
463
+ if(typeof arr == 'function') {
464
+ callback = arr;
465
+ arr = null;
466
+ }
467
+ this.frames.push({msg: '希尔排序：先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序，待整个序列中的记录“基本有序”时，再对全体记录进行依次直接插入排序。(其实就是将直接插入排序的与前一个比较改为与前第N个比较，直接全部排完。)<br />'});
468
+
469
+ arr = arr || this.source;
470
+ var dk = Math.floor(arr.length / 2);
471
+ var result = arr;
472
+ while(dk >= 1) {
473
+ this.frames.push('比较跨度：' + dk);
474
+ result = this.straightInsertionSort(result, dk);
475
+ dk = Math.floor(dk / 2);
476
+ }
477
+
478
+ this.play(function(){
479
+ callback && callback(result);
480
+ });
481
+ return result;
482
+ }
483
+
484
+ //简单选择排序
485
+ //在要排序的一组数中，选出最小（或者最大）的一个数与第1个位置的数交换；然后在剩下的数当中再找最小（或者最大）的与第2个位置的数交换，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。
486
+ jmSort.prototype.simpleSelectionSort = function(arr, callback) {
487
+ if(typeof arr == 'function') {
488
+ callback = arr;
489
+ arr = null;
490
+ }
491
+ arr = arr || this.source.slice(0);
492
+
493
+ this.frames.push({msg: '简单选择排序：在要排序的一组数中，选出最小（或者最大）的一个数与第1个位置的数交换；然后在剩下的数当中再找最小（或者最大）的与第2个位置的数交换，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。<br />'});
494
+
495
+ for(var i=0;i<arr.length-1;i++) {
496
+ var min = arr[i];
497
+ var minindex = i;
498
+
499
+ for(var j=i+1;j<arr.length;j++) {
500
+ if(min.value > arr[j].value) {
501
+ min = arr[j];
502
+ minindex = j;
503
+ }
504
+ //this.frames.push({sels:[[min.rect], [arr[j].rect]]});
505
+ }
506
+
507
+ if(minindex != i) {
508
+ this.frames.push({sels:[[min.rect], [arr[i].rect], arr.slice(i).toRect()]});
509
+ this.frames.push({move: [{rect: min.rect, index: i}, {rect: arr[i].rect, index: minindex}], msg: '最小值为：' + min.value + '，跟第'+(i+1)+'个元素互换位置。'});
510
+ arr[minindex] = arr[i];
511
+ arr[i] = min;
512
+ }
513
+ }
514
+
515
+ this.play(function(){
516
+ callback && callback(arr);
517
+ });
518
+
519
+ return arr;
520
+ }
521
+
522
+ //二元选择排序
523
+ //简单选择排序，每趟循环只能确定一个元素排序后的定位。我们可以考虑改进为每趟循环确定两个元素（当前趟最大和最小记录）的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序，最多只需进行[n/2]趟循环即可
524
+ jmSort.prototype.selection2Sort = function(arr, callback) {
525
+ if(typeof arr == 'function') {
526
+ callback = arr;
527
+ arr = null;
528
+ }
529
+ arr = arr || this.source.slice(0);
530
+
531
+ this.frames.push({msg: '二元选择排序：简单选择排序，每趟循环只能确定一个元素排序后的定位。我们可以考虑改进为每趟循环确定两个元素（当前趟最大和最小记录）的位置,从而减少排序所需的循环次数。改进后对n个数据进行排序，最多只需进行[n/2]趟循环即可<br />'});
532
+
533
+ var index = -1;
534
+ var self = this;
535
+ var end = Math.floor(arr.length / 2);
536
+ for(var i=0;i<end;i++) {
537
+ //取最小值和最大值
538
+ var min = arr[i];
539
+ var max = arr[i];
540
+ var minindex = i;
541
+ var maxindex = i;
542
+
543
+ for(var j=i+1;j<arr.length-i;j++) {
544
+ if(min.value > arr[j].value) {
545
+ min = arr[j];
546
+ minindex = j;
547
+ }
548
+ if(max.value <= arr[j].value) {
549
+ max = arr[j];
550
+ maxindex = j;
551
+ }
552
+ }
553
+
554
+ var maxpos = j - 1;
555
+ this.frames.push({sels:[[min.rect, arr[i].rect], [max.rect, arr[maxpos].rect], arr.slice(i, j).toRect()]});
556
+ if(minindex != i) {
557
+ this.frames.push({move: [{rect: min.rect, index: i}, {rect: arr[i].rect, index: minindex}], msg: '最小值为：' + min.value + '，跟第'+(i+1)+'个元素互换位置。'});
558
+ arr[minindex] = arr[i];
559
+ arr[i] = min;
560
+ //如果最大值是当前起始值，则它被换到最小值位置上了
561
+ //需要重新改变最大值的索引为找到的最小值的索引
562
+ if(maxindex == i) {
563
+ maxindex = minindex;
564
+ }
565
+ }
566
+ if(maxindex != maxpos) {
567
+ this.frames.push({move: [{rect: max.rect, index: maxpos}, {rect: arr[maxpos].rect, index: maxindex}], msg: '最大值为：' + max.value + '，跟第'+j+'个元素互换位置。'});
568
+ arr[maxindex] = arr[maxpos];
569
+ arr[maxpos] = min;
570
+ }
571
+ }
572
+
573
+ this.play(function(){
574
+ callback && callback(arr);
575
+ });
576
+
577
+ return arr;
578
+ }
579
+
580
+ //冒泡排序
581
+ //在要排序的一组数中，对当前还未排好序的范围内的全部数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。即：每当两相邻的数比较后发现它们的排序与排序要求相反时，就将它们互换。
582
+ jmSort.prototype.bubbleSort = function(arr, callback) {
583
+ if(typeof arr == 'function') {
584
+ callback = arr;
585
+ arr = null;
586
+ }
587
+ arr = arr || this.source.slice(0);
588
+
589
+ this.frames.push({msg: '冒泡排序：在要排序的一组数中，对当前还未排好序的范围内的全部数，自上而下对相邻的两个数依次进行比较和调整，让较大的数往下沉，较小的往上冒。即：每当两相邻的数比较后发现它们的排序与排序要求相反时，就将它们互换。<br />'});
590
+
591
+ var i = arr.length - 1;
592
+ while(i > 0) {
593
+ var pos = 0;
594
+ for(var j=0;j<i;j++) {
595
+ this.frames.push({
596
+ sels: [[arr[j].rect],[arr[j+1].rect], arr.slice(0, i + 1).toRect()]
597
+ });
598
+
599
+ if(arr[j].value > arr[j+1].value) {
600
+ pos = j;
601
+ var tmp=arr[j];arr[j]=arr[j+1];arr[j+1]=tmp;
602
+ this.frames.push({
603
+ move: [{
604
+ rect: tmp.rect,
605
+ index: j+1
606
+ },{
607
+ rect: arr[j].rect,
608
+ index: j
609
+ }],
610
+ msg: tmp.value + '大于' + arr[j].value + '，互换位置。'
611
+ });
612
+ }
613
+ }
614
+ i=pos;
615
+ }
616
+ this.play(function(){
617
+ callback && callback(arr);
618
+ });
619
+ }
620
+
621
+ //堆排序
622
+ jmSort.prototype.heapSort = function(arr, callback) {
623
+ if(typeof arr == 'function') {
624
+ callback = arr;
625
+ arr = null;
626
+ }
627
+ arr = arr || this.source.slice(0);
628
+
629
+ this.frames.push({msg: '堆排序：简单讲就是把一个数组看成一个完全的二叉树，每个节点带二个子节点，不断调整节点的位置保证父节点大于二个子节点，取根节点就是它的最大值（取完再进行一次调整如此递归），直到取完为止。<br />'});
630
+
631
+ var result = [];
632
+ var self = this;
633
+ //把堆排列为大堆
634
+ //堆中每个父节点的元素值都大于等于其孩子结点（如果存在）,这样的堆就是一个最大堆
635
+ function bigHeap(source) {
636
+ if(source.length <= 1) return source;
637
+ self.frames.push({msg: '调整堆，保证父节点大于子节点。<br />'});
638
+
639
+ var area = [];
640
+ for(var i=0;i<source.length;i++) {
641
+ area.push(source[i].rect);
642
+ }
643
+
644
+ for(var i=source.length;i>0;i--) {
645
+ var s = source[i-1];
646
+ //左右子节点
647
+ var left = 2 * i;
648
+ var right = left + 1;
649
+
650
+ var selitems = [];
651
+ if(source[left-1]) {
652
+ selitems.push(source[left-1].rect);
653
+ }
654
+ if(source[right-1]) {
655
+ selitems.push(source[right-1].rect);
656
+ }
657
+ self.frames.push({
658
+ sels: [[s.rect],selitems, area]
659
+ });
660
+
661
+ //如果左子节点大于当前节点，则互换
662
+ if(left <= source.length && source[left-1].value > s.value) {
663
+ self.frames.push({move: [{
664
+ rect: source[left-1].rect,
665
+ index: i-1
666
+ },{
667
+ rect: s.rect,
668
+ index: left - 1
669
+ }], msg: '左子节点'+source[left-1].value+'大于父节点' + s.value + '，互换位置'});
670
+
671
+ source[i-1] = source[left-1];
672
+ source[left-1] = s;
673
+ s = source[i-1];
674
+
675
+ self.frames.push({
676
+ sels: [[s.rect],selitems, area]
677
+ });
678
+ }
679
+ if(right <= source.length && source[right-1].value > s.value) {
680
+
681
+ self.frames.push({move: [{
682
+ rect: source[right-1].rect,
683
+ index: i-1
684
+ },{
685
+ rect: s.rect,
686
+ index: right - 1
687
+ }], msg: '右子节点'+source[right-1].value+'大于父节点' + s.value + '，互换位置'});
688
+
689
+ source[i-1] = source[right-1];
690
+ source[right-1] = s;
691
+
692
+ self.frames.push({
693
+ sels: [[source[i-1] .rect],selitems, area]
694
+ });
695
+ }
696
+ }
697
+ return source;
698
+ }
699
+
700
+ //每次取出根节点，再对余下的排为大堆，如此递归
701
+ function sort(source) {
702
+ source = bigHeap(source);
703
+ //取最大的一个,放到结果第一个中
704
+ result.unshift(source.shift());
705
+
706
+ var f = {move: [{
707
+ rect: result[0].rect,
708
+ index: source.length
709
+ }],
710
+ msg: '取堆的根节点（堆中的最大值）:'+result[0].value+'，移到数组最后'};
711
+ for(var i=0;i<source.length;i++) {
712
+ f.move.push({
713
+ rect: source[i].rect,
714
+ index: i
715
+ });
716
+ }
717
+ self.frames.push(f);
718
+ if(source.length) {
719
+ sort(source);
720
+ }
721
+ }
722
+ sort(arr);//执行堆排序
723
+ this.play(function(){
724
+ callback && callback(result);
725
+ });
726
+
727
+ return result;
728
+ }
729
+
730
+ //开始
731
+ var sort = null;
732
+
733
+ var container = document.getElementById('mycanvas');
734
+ var w = Math.min(600, document.getElementById('mycanvas').offsetWidth - 10);
735
+ container.style.width = w + 'px';
736
+ var h = Math.min(450, window.innerHeight - 10);
737
+ container.style.height = h + 'px';
738
+
739
+ //初始化jmgraph
740
+ var g = jmGraph.create('mycanvas', {
741
+ width: w,
742
+ height: h,
743
+ mode: '2d'
744
+ });
745
+
746
+ sort = new jmSort(g);
747
+
748
+ sort.init();
749
+ sort.heapSort(function(ret){
750
+ console.log(ret);
751
+ });
752
+
753
+ //实时更新画布
754
+ function update() {
755
+ if(g.needUpdate) g.redraw();
756
+ requestAnimationFrame(update);
757
+ }
758
+ update();
759
+
760
+ document.getElementById('btn_quick').addEventListener('click', function(){
761
+ sort.reset();
762
+ sort.quickSort(null,null,null,function(ret) {
763
+ this.datumLine.visible = false;
764
+ this.selectRect(ret);
765
+ console.log(ret);
766
+ });
767
+ });
768
+ document.getElementById('btn_straightinsertion').addEventListener('click', function(){
769
+ sort.reset();
770
+ sort.straightInsertionSort(function(result){
771
+ sort.play();
772
+ console.log(result);
773
+ });
774
+ });
775
+ document.getElementById('btn_shell').addEventListener('click', function(){
776
+ sort.reset();
777
+ sort.shellSort();
778
+ });
779
+ document.getElementById('btn_simpleselection').addEventListener('click', function(){
780
+ sort.reset();
781
+ sort.simpleSelectionSort();
782
+ });
783
+ document.getElementById('btn_simpleselection2').addEventListener('click', function(){
784
+ sort.reset();
785
+ sort.selection2Sort();
786
+ });
787
+ document.getElementById('btn_bubble').addEventListener('click', function(){
788
+ sort.reset();
789
+ sort.bubbleSort();
790
+ });
791
+ document.getElementById('btn_heap').addEventListener('click', function(){
792
+ sort.reset();
793
+ sort.heapSort();
794
+ });
795
+
796
+ function log(msg) {
797
+ var consoleDiv = document.getElementById('console');
798
+ consoleDiv.innerHTML += msg + '<br />';
799
+ consoleDiv.scrollTop = consoleDiv.scrollHeight;
800
+ }
801
+ function clear() {
802
+ document.getElementById('console').innerHTML = '';
803
+ }
804
+ </script>
816
805
  </html>