sorting-visualization/index.html at master · super-wall/sorting-visualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>排序可视化</title>
  <style>
    select {
      margin-right: 6px;
      margin-bottom: 10px;
    }
    button {
      margin-right: 6px;
    }
    #target {
      border: 1px solid #888;
    }
  </style>
</head>
<body>
  <div id="app">
    <p><a href="https://github.com/lhz960904/Blog/issues/6" target="_blank">博客地址</a> </p>
    <select v-model="currentSelectSort" @change="handleSortChange">
      <option :value="item.name"  v-for="item in selectItems" :key="item.name">{{ item.name }}</option>
    </select>
    <button @click="handleRandom">生成随机数组</button>
    <button @click="handleSort">排序</button>
    动画速度：<input v-model="speed" />
  </div>
  <canvas id="target" width="800" height="320"></canvas>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0-beta.15/vue.global.js"></script>
  <!-- 绘图类 -->
  <script src="./index.js"></script>
  <!-- 冒泡 -->
  <script src="./bubble/index.js"></script>
  <!-- 选择 -->
  <script src="./selection/index.js"></script>
  <!-- 插入 -->
  <script src="./insertion/index.js"></script>
  <!-- 归并 -->
  <script src="./merge/index.js"></script>
  <!-- 快速 -->
  <script src="./quick/index.js"></script>
  <!-- 堆 -->
  <script src="./heap/index.js"></script>
  <script>
    const App = Vue.defineComponent({
      setup() {

        // 下拉列表
        const selectItems = [
          { name: '冒泡排序', sortFn: bubbleSort },
          { name: '选择排序', sortFn: selectionSort },
          { name: '插入排序', sortFn: insertionSort },
          { name: '归并排序', sortFn: mergeSort },
          { name: '快速排序', sortFn: quickSort },
          { name: '双路快速排序', sortFn: quickSort2 },
          { name: '三路快速排序', sortFn: quickSort3 },
          { name: '堆排序',  sortFn: heapSort },
        ]

        // 当前选择的排序
        const currentSelectSort = Vue.ref('冒泡排序');

        // canvas
        const ctx = new RectPaint();

        // 动画速度
        const speed = Vue.ref(50);

        // 生成随机数组
        const handleRandom = () => {
          ctx.geratorRandomArr()
        }


        // 进行排序
        const handleSort = () => {
          const idx = selectItems.findIndex(it => it.name === currentSelectSort.value)
          ctx.sort(selectItems[idx].sortFn, speed.value)
        }

        const handleSortChange = () => {
          ctx.stopAnimate();
          ctx.clearCanvas();
        }

        return { selectItems, currentSelectSort, speed, handleRandom, handleSort, handleSortChange }
      }
    });

    Vue.createApp(App).mount('#app')

  </script>
</body>
</html>