缝隙

src/App.vue

@@ -111,10 +111,10 @@ export default {
       tableData: [
         {
           dataType: "裂缝",
-          startStake: "236512",
+          startStake: "236012",
           startStakeCenter: "10",
-          endStake: "237512",
-          endStakeCenter: "30",
+          endStake: "236022",
+          endStakeCenter: "5",
           dataHeight: "10",
           dataWidth: "0",
         },
@@ -271,14 +271,20 @@ export default {
           //   strokeStyle,
           // });
         } else if (data.dataType === "裂缝") {
-          // this.drowLine({
-          //   startx: 0,
-          //   starty: this.center - this.lineHeight * (this.lineNumber / 2),
-          //   endx: this.boxWidth,
-          //   endy: this.center - this.lineHeight * (this.lineNumber / 2),
-          //   lineWidth: 1,
-          //   strokeStyle: "#000",
-          // });
+          const startx =
+            this.boxStartx + (data.startStake - this.startStake) * this.ratio;
+          const starty = this.center - data.startStakeCenter * this.ratio;
+          const endx =
+            this.boxStartx + (data.endStake - this.startStake) * this.ratio;
+          const endy = this.center - data.endStakeCenter * this.ratio;
+          this.drowGap({
+            startx: startx,
+            starty: starty,
+            endx: endx,
+            endy: endy,
+            lineWidth: 1,
+            strokeStyle: "#000",
+          });
         }
       });
     },
@@ -357,6 +363,32 @@ export default {
       this.ctx.stroke();
       this.ctx.closePath();
     },
+    drowGap(gap) {
+      const { startx, starty, endx, endy } = gap;
+      this.ctx.save();
+      this.ctx.setLineDash([]);
+      this.ctx.beginPath();
+      this.ctx.moveTo(startx, starty);
+      console.log(startx, starty);
+      // console.log(this.getRandom(startx, endx));
+      console.log(endx, endy);
+      // console.log(this.getRandom(starty, endy));
+      // this.ctx.lineTo(endx, endy);
+      for (var i = 0; i < 1; i++) {
+        this.ctx.quadraticCurveTo(
+          this.getRandom(startx, endx),
+          this.getRandom(starty, endy),
+          this.getRandom(startx, endx),
+          this.getRandom(starty, endy)
+        );
+      }
+      this.ctx.quadraticCurveTo(537, 236, endx, endy);
+
+      this.ctx.lineWidth = 4;
+      this.ctx.strokeStyle = "#000";
+      this.ctx.stroke();
+      this.ctx.closePath();
+    },
     drowText() {
       this.ctx.font = "12px 微软雅黑";
       this.ctx.fillStyle = "#000";
@@ -380,6 +412,11 @@ export default {
       const b = Math.floor(Math.random() * 255);
       return "rgba(" + r + "," + g + "," + b + ",0.8)";
     },
+    getRandom(min, max) {
+      return Math.floor(Math.random() * (max - min)) === min
+        ? min + 1
+        : Math.floor(Math.random() * (max - min)) + min;
+    },
   },
 };
 </script>