Auto Commit

src/components/visualSort/index.vue

 <script lang="js" setup>
 import { reactive, onMounted } from 'vue';
-
-import { useStore } from "vuex";
-
-const store = useStore();
 const state = reactive({
-    value: '[1,2,3,4,5]',
+    value: '[100,20,69,16,55,33]',
     title: '冒泡排序可视化',
-    sourceData: [{
-        num: 1,
-        domId: 'num-1',
-        loc: 1,
-        percent: 14
-    }, {
-        num: 3,
-        domId: 'num-3',
-        loc: 3,
-        percent: 50
-    }, {
-        num: 2,
-        domId: 'num-2',
-        loc: 2,
-        percent: 36
-    }]
+    visualSortArray: [
+
+    ]
 })
 
 
@@ -30,13 +13,14 @@ 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++) {
+        const virtualArr = [arr.slice()];
+        console.log('virtualArr', virtualArr)
+        const max = arr.length;
+        for (let i = 0; i < max; i++) {
+            let done = true;
+            for (let j = 0; j < max - i; j++) {
                 if (arr[j] > arr[j + 1]) {
-                    var temp = arr[j];
+                    let temp = arr[j];
                     arr[j] = arr[j + 1];
                     arr[j + 1] = temp;
                     done = false;
@@ -51,32 +35,49 @@ function bubbleSort(arr) {
     }
 
     // 绘画，调用一次就画出一步的图像 
-    function darw(arr) {
-        var canvas = document.getElementById('myCanvas');
-        var ctx = canvas.getContext('2d');
-        // 获取 canvas画板的高度(确定每个长方形的 y 值时需要)
-        var maxWidth = canvas.height;
+    function darw(arr, count) {
+        const canvas = document.getElementById('myCanvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 最大高度 400
+        let maxHeight = canvas.height;
         // 每个长方形的宽度
-        var width = 20;
+        let width = 20;
         // 每个长方形之间的间隔
-        var space = 20;
+        let space = 100;
 
-        const total=arr.reduce((p,c)=>p+c,0)
+        const total = arr.reduce((p, c) => p + c, 0)
 
         // 清空画布
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         // 设置字体
         ctx.font = "18px serif";
         // 在页面上，画出一步的内容
-        for (var i = 0; i < arr.length; i++) {
+        for (let i = 0; i < arr.length; i++) {
             ctx.fillStyle = '#61C5FE';
-            // x 的 值等于 第i个长方形 * （长方形的宽+每个长方形的间隔）
-            // y 的 值等于  画板的高度 - 第i的元素的值
-            ctx.fillRect(i * (width + space), maxWidth - arr[i], width, (arr[i]/total)*800);
+
+            const x= i * (width + space)
+            const y= maxHeight - arr[i]
+            const height=Math.round((arr[i] / total)*100  + 100)
+            ctx.fillRect(x, y, width, height);
+            console.log('x',x)
+            console.log('y',y)
+            console.log('width',width)
+            console.log('height',height)
             ctx.fillStyle = '#240be4';
-            // maxWidth - arr[i]-5，这里多- 5，是为了能让文字，在长方形上方一点显示，看的明显些
-            ctx.fillText(arr[i], i * (width + space), maxWidth - arr[i] - 5);
+            // 标题文字
+            ctx.fillText(arr[i], x, y);
+            ctx.restore();
         }
+
+        ctx.fillText(`第${count}趟排序`, 200, 100);
+
+
+        ctx.fillStyle = "rgba(0, 66, 200, 0.5)";
+        ctx.beginPath();
+        ctx.lineTo(0, 400);
+        ctx.lineTo(800, 400);
+        ctx.stroke()
     }
 
     // 动画 
@@ -86,8 +87,10 @@ function bubbleSort(arr) {
         var interval = 500;
         // 遍历得到的数组，每隔500ms，调用darw 方法，画出一步内容
         virtualArr.forEach((item, index) => {
-            setTimeout(() => darw(item), index * interval);
+            setTimeout(() => darw(item, index + 1), index * interval);
         });
+
+        state.visualSortArray = virtualArr
     }
 
     animation();
@@ -103,6 +106,10 @@ const sortBtn = () => {
     bubbleSort(arr);
 }
 
+onMounted(()=>{
+    sortBtn()
+})
+
 
 
 </script>
@@ -119,21 +126,15 @@ 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 style="text-align: right;margin-right: 20px;">
+                        <div v-for="(item, index) in state.visualSortArray" :key="index">
+                            <div>
+                                第 {{ index + 1 }} 躺排序:  {{ item.toString() }}
+                            </div>
+                        </div>
+                    </div>
 
-                    <canvas id="myCanvas" width="600" height="800"> </canvas>
+                    <canvas id="myCanvas" width="800" height="400"> </canvas>
                 </div>
 
             </a-card>
@@ -149,9 +150,7 @@ const sortBtn = () => {
 }
 
 .container-sort {
-    height: 600px;
-    display: flex;
-    align-items: flex-end;
+    height: 800px;
     border: 1px solid #dcdcdc;
 }