Mon Mar 11 01:20:00 CST 2024 inscode

src/components/visualSort/index.vue

@@ -25,10 +25,84 @@ const state = reactive({
     }]
 })
 
+
+function bubbleSort(arr) {
+    // 冒泡排序算法，对数组进行排序，同时记录每一步操作，保存在一个数组中
+    function sort() {
+        // virtualArr 用来存放 每一个步内容的数组
+        var virtualArr = [arr.slice()];
+        var max = arr.length;
+        for (var i = 0; i < max; i++) {
+            var done = true;
+            for (var j = 0; j < max - i; j++) {
+                if (arr[j] > arr[j + 1]) {
+                    var temp = arr[j];
+                    arr[j] = arr[j + 1];
+                    arr[j + 1] = temp;
+                    done = false;
+                    virtualArr.push(arr.slice());
+                }
+            };
+            if (done) {
+                break;
+            };
+        }
+        return virtualArr;
+    }
+
+    // 绘画，调用一次就画出一步的图像 
+    function darw(arr) {
+        var canvas = document.getElementById('myCanvas');
+        var ctx = canvas.getContext('2d');
+        // 获取 canvas画板的高度(确定每个长方形的 y 值时需要)
+        var maxWidth = canvas.height;
+        // 每个长方形的宽度
+        var width = 20;
+        // 每个长方形之间的间隔
+        var space = 20;
+
+        // 清空画布
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // 设置字体
+        ctx.font = "18px serif";
+        // 在页面上，画出一步的内容
+        for (var i = 0; i < arr.length; i++) {
+            ctx.fillStyle = '#61C5FE';
+            // x 的 值等于 第i个长方形 * （长方形的宽+每个长方形的间隔）
+            // y 的 值等于  画板的高度 - 第i的元素的值
+            ctx.fillRect(i * (width + space), maxWidth - arr[i], width, arr[i]);
+            ctx.fillStyle = '#240be4';
+            // maxWidth - arr[i]-5，这里多- 5，是为了能让文字，在长方形上方一点显示，看的明显些
+            ctx.fillText(arr[i], i * (width + space), maxWidth - arr[i] - 5);
+        }
+    }
+
+    // 动画 
+    function animation() {
+        // 调用sort 方法，返回包括每一步内容的数组
+        var virtualArr = sort();
+        var interval = 500;
+        // 遍历得到的数组，每隔500ms，调用darw 方法，画出一步内容
+        virtualArr.forEach((item, index) => {
+            setTimeout(() => darw(item), index * interval);
+        });
+    }
+
+    animation();
+}
+
+
+
+
 const sortBtn = () => {
 
+    const arr = state.value.replace('[', '').replace(']', '').split(',').map(n => +n)
+    console.log('arr', arr)
+    bubbleSort(arr);
 }
 
+
+
 </script>
 <template>
     <div>
@@ -43,19 +117,21 @@ const sortBtn = () => {
                     <div style="margin-left:50px"><a-button type="primary" @click="sortBtn">开始排序</a-button></div>
                 </div>
                 <div class="container-sort">
-                    <div v-for="item in state.sourceData" :id="item.domId" class="box">
-                        <div>
-                            <div class="bar" :style="{
-                                height: `${item.percent * 7}px`
-                            }">
-
-                            </div>
-                            <div class="num">
-                                {{ item.num }}
-                            </div>
-
-                        </div>
-                    </div>
+                    <!-- <div v-for="item in state.sourceData" :id="item.domId" class="box">
+                                        <div>
+                                            <div class="bar" :style="{
+                                                height: `${item.percent * 7}px`
+                                            }">
+
+                                            </div>
+                                            <div class="num">
+                                                {{ item.num }}
+                                            </div>
+
+                                        </div>
+                                    </div> -->
+
+                    <canvas id="myCanvas" width="600" height="200"> </canvas>
                 </div>
 
             </a-card>