fix: 添加缩放比

src/components/drawing.vue

@@ -5,13 +5,7 @@
 -->
 <template>
   <div class="drawing">
-    <div
-      id="canvas"
-      class="canvas"
-      :style="{
-        height: boxHeight + rulerHeight + 'px',
-      }"
-    ></div>
+    <div id="canvas" class="canvas"></div>
     <el-row>
       <el-row class="control-btn">
         <el-button type="primary" @click="roadDrawer = true"
@@ -42,7 +36,7 @@
     <el-drawer
       title="道路信息"
       :visible.sync="roadDrawer"
-      :wrapperClosable="false"
+      :wrapperClosable="true"
       direction="rtl"
     >
       <div class="plan">
@@ -54,37 +48,42 @@
             <el-form-item label="路线名称" prop="roadName">
               {{ diseaseForm.roadName }}
             </el-form-item>
-            <el-form-item label="行驶方向" prop="direction">
-              <el-select v-model="diseaseForm.direction" placeholder="请选择">
-                <el-option
-                  v-for="item in directionOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-
             <el-form-item label="起点名称" prop="startStake">
               <el-input v-model="diseaseForm.startStake"></el-input>
             </el-form-item>
             <el-form-item label="止点桩号" prop="endStake">
               <el-input v-model="diseaseForm.endStake"></el-input>
             </el-form-item>
-            <el-form-item label="路线长度" prop="roadLength">
-              <el-input v-model="diseaseForm.roadLength">
-                <template slot="append">m</template></el-input
-              >
-            </el-form-item>
             <el-form-item label="全幅宽度" prop="roadWidth">
               <el-input v-model="diseaseForm.roadWidth">
                 <template slot="append">m</template></el-input
               >
             </el-form-item>
+            <el-form-item label="路线长度" prop="roadLength">
+              {{ roadLength }} m
+            </el-form-item>
             <el-form-item label="半幅宽度" prop="roadWidth">
               {{ diseaseForm.roadWidth / 2 }} m
             </el-form-item>
+            <el-form-item
+              label="是否保持缩放比"
+              label-width="110px"
+              prop="endStake"
+            >
+              <el-select
+                v-model="scale"
+                placeholder="请选择"
+                @change="scaleChange"
+              >
+                <el-option
+                  v-for="item in scaleOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
 
             <el-form-item>
               <el-button type="primary" @click="onSubmit">生成</el-button>
@@ -99,7 +98,7 @@
       title="病害信息"
       :visible.sync="diseaseDrawer"
       direction="rtl"
-      :wrapperClosable="false"
+      :wrapperClosable="true"
     >
       <div class="plan">
         <el-card class="box-card">
@@ -123,6 +122,17 @@
                 </el-option>
               </el-select>
             </el-form-item>
+            <el-form-item label="行驶方向" prop="direction">
+              <el-select v-model="diseaseForm.direction" placeholder="请选择">
+                <el-option
+                  v-for="item in directionOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
             <el-form-item label="病害类型" prop="diseaseType">
               <el-select v-model="diseaseForm.diseaseType" placeholder="请选择">
                 <el-option
@@ -148,7 +158,7 @@
             <el-form-item label="病害桩号" prop="stake">
               <el-input v-model="diseaseForm.stake"></el-input>
             </el-form-item>
-            <el-form-item label="距分割线" prop="distance">
+            <el-form-item label="距中心线" prop="distance">
               <el-input v-model="diseaseForm.distance">
                 <template slot="append">m</template></el-input
               >
@@ -189,6 +199,18 @@ export default {
       rulerSeparateHeight: 30,
       // 左边标尺间隔多少厘米
       leftRuler: 50,
+      // 病害大小展示是否成正比,100为正常比例，10为视觉比例
+      scale: 10,
+      scaleOptions: [
+        {
+          label: "是",
+          value: 10,
+        },
+        {
+          label: "否",
+          value: 100,
+        },
+      ],
       diseaseDrawer: false,
       diseaseForm: {
         roadName: "G205 山深线",
@@ -366,7 +388,7 @@ export default {
     },
     // 画布宽度
     boxWidth() {
-      return Number(this.diseaseForm.roadLength) + this.boxPadding * 2;
+      return Number(this.roadLength) * 10 + this.boxPadding * 2;
     },
     // 画布高度
     boxHeight() {
@@ -452,9 +474,8 @@ export default {
   },
   mounted() {
     this.initCanvas();
-    this.drawDisease();
-    new paper.Point(50, 0).angle;
-    new paper.Point(40, 100).angle;
+    this.drawDisease(this.diseaseForm);
+    this.diseaseList.push(JSON.parse(JSON.stringify(this.diseaseForm)));
   },
   methods: {
     /** 初始化 */
@@ -486,50 +507,42 @@ export default {
       path.add(new Point(0, this.boxHeight + this.rulerHeight));
       path.closed = true;
       // 左距离尺，上行
-      const leftRuler = Math.ceil(
-        (this.boxHeight - this.rulerHeight) / this.leftRuler
-      );
-      let path1Segments = [];
-      path1Segments.push([20, this.rulerHeight]);
-      path1Segments.push([10, this.rulerHeight]);
-      new paper.PointText({
-        point: [10, this.rulerHeight - 5],
-        content: "1cm",
-        fillColor: "black",
-        fontFamily: "Courier New",
-        fontSize: 11,
-      });
-      for (let index = 1; index < leftRuler + 1; index++) {
-        path1Segments.push([10, this.leftRuler * index + this.rulerHeight]);
-        path1Segments.push([
-          20,
-          this.leftRuler * index + this.rulerHeight + 0.1,
-        ]);
-        path1Segments.push([
-          10,
-          this.leftRuler * index + this.rulerHeight + 0.1,
-        ]);
-        new paper.PointText({
-          point: [10, this.leftRuler * index + this.rulerHeight - 5],
-          content: index * this.leftRuler + "cm",
-          fillColor: "black",
-          fontFamily: "Courier New",
-          fontSize: 11,
-        });
-      }
-      0.1;
-      let path1 = new paper.Path({
-        segments: path1Segments,
-      });
-      path1.strokeColor = "black";
-      // 左距离尺，下行
-      // let path2 = new paper.Path({
-      //   segments: [
-      //     [10, this.roadHalfWidth],
-      //     [10, this.boxHeight],
-      //   ],
+      // const leftRuler = Math.ceil(
+      //   (this.boxHeight - this.rulerHeight) / this.leftRuler
+      // );
+      // let path1Segments = [];
+      // path1Segments.push([20, this.rulerHeight]);
+      // path1Segments.push([10, this.rulerHeight]);
+      // new paper.PointText({
+      //   point: [10, this.rulerHeight - 5],
+      //   content: "1cm",
+      //   fillColor: "black",
+      //   fontFamily: "Courier New",
+      //   fontSize: 11,
       // });
-      // path2.strokeColor = "black";
+      // for (let index = 1; index < leftRuler + 1; index++) {
+      //   path1Segments.push([10, this.leftRuler * index + this.rulerHeight]);
+      //   path1Segments.push([
+      //     20,
+      //     this.leftRuler * index + this.rulerHeight + 0.1,
+      //   ]);
+      //   path1Segments.push([
+      //     10,
+      //     this.leftRuler * index + this.rulerHeight + 0.1,
+      //   ]);
+      //   new paper.PointText({
+      //     point: [10, this.leftRuler * index + this.rulerHeight - 5],
+      //     content: index * this.leftRuler + "cm",
+      //     fillColor: "black",
+      //     fontFamily: "Courier New",
+      //     fontSize: 11,
+      //   });
+      // }
+      // 0.1;
+      // let path1 = new paper.Path({
+      //   segments: path1Segments,
+      // });
+      // path1.strokeColor = "black";
     },
     /** 绘制中间线 */
     drawCenterLine() {
@@ -587,26 +600,36 @@ export default {
     /**
      * 绘制病害
      */
-    drawDisease() {
+    drawDisease(form) {
+      console.log(form);
+      if (!form) {
+        return false;
+      }
       // 距离中间线多少米
-      let distance = this.diseaseForm.distance;
+      let distance = form.distance;
       // 桩号
-      let stake = this.diseaseForm.stake;
+      let stake = form.stake;
       // 病害长度
-      let diseaseLength = this.diseaseForm.diseaseLength;
+      let diseaseLength = form.diseaseLength;
       // 病害宽度
-      let diseaseWidth = this.diseaseForm.diseaseWidth;
+      let diseaseWidth = form.diseaseWidth;
 
       // 病害在canvas上的位置
       const x =
-        (Number(stake) - Number(this.diseaseForm.startStake)) * 10000 +
-        this.boxPadding;
+        (Number(stake) - Number(form.startStake)) * 10000 + this.boxPadding;
       let y = this.roadHalfWidth + distance * 100;
       const width = diseaseLength * 10;
-      const height = diseaseWidth * 100;
-      if (this.diseaseForm.direction == "上行") {
+      const height = diseaseWidth * this.scale;
+      if (form.direction == "上行") {
+        console.log(this.roadHalfWidth - distance * 100);
+        console.log(this.roadHalfWidth);
+        console.log(distance);
+        if (this.scale === 10) {
+          y = this.roadHalfWidth - distance * 100 - height;
+        } else {
           y = this.roadHalfWidth - distance * 100 - diseaseWidth * 100;
         }
+      }
       let rectangle = new paper.Rectangle({
         x,
         y,
@@ -617,7 +640,7 @@ export default {
       path.strokeColor = "black";
 
       this.drawInterferenceLine(rectangle, 4);
-
+      // 病害宽度
       new paper.PointText({
         point: rectangle.rightCenter,
         content: `${diseaseWidth}m`,
@@ -625,15 +648,32 @@ export default {
         fontFamily: "Courier New",
         fontSize: 14,
       });
+      // 病害长度
       new paper.PointText({
-        point: rectangle.topCenter,
+        point: rectangle.bottomCenter,
         content: `${diseaseLength}m`,
         fillColor: "black",
         fontFamily: "Courier New",
         fontSize: 14,
       });
-
-      this.diseaseList.push(this.diseaseForm);
+      // 病害距离中间距离
+      if (form.direction == "上行") {
+        new paper.PointText({
+          point: rectangle.topCenter,
+          content: `左${form.distance}m`,
+          fillColor: "black",
+          fontFamily: "Courier New",
+          fontSize: 11,
+        });
+      } else {
+        new paper.PointText({
+          point: rectangle.topCenter,
+          content: `右${form.distance}m`,
+          fillColor: "black",
+          fontFamily: "Courier New",
+          fontSize: 11,
+        });
+      }
     },
     /** 绘制网格 */
     drawInterferenceLine(rectangle, lineType) {
@@ -695,7 +735,18 @@ export default {
     },
     // 添加病害
     addDisease() {
-      this.drawDisease();
+      this.drawDisease(this.diseaseForm);
+      this.diseaseList.push(JSON.parse(JSON.stringify(this.diseaseForm)));
+    },
+
+    /** 缩放比 */
+    scaleChange() {
+      paper.remove();
+      this.canvas.remove();
+      this.initCanvas();
+      this.diseaseList.forEach((item) => {
+        this.drawDisease(item);
+      });
     },
     /** 桩号转换 */
     transformStakeString(stake) {