去掉画布以照片大小为限制

src/graphic/Service/ImageService.js

@@ -14,37 +14,38 @@ export default class ImageService {
 
   //判断背景图片是否在屏幕外
   backgroundImgVertexsInScreenXY() {
-    function isInScreen(position) {
-      if (
-        (position.x > 0 && position.x < coordinate.width) ||
-        (position.y > 0 && position.y < coordinate.height)
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    }
+    // function isInScreen(position) {
+    //   if (
+    //     (position.x > 0 && position.x < coordinate.width) ||
+    //     (position.y > 0 && position.y < coordinate.height)
+    //   ) {
+    //     return true;
+    //   } else {
+    //     return false;
+    //   }
+    // }
 
-    let bgImg = dataService.getBackgroundImg();
-    let vertexs = [];
-    vertexs[0] = coordinate.getScreenXY(bgImg.bounding[0]);
-    // vertexs[0].x = vertexs[0].x / bgImg.scale;
-    // vertexs[0].y = vertexs[0].y / bgImg.scale;
-    vertexs[1] = coordinate.getScreenXY(bgImg.bounding[1]);
-    // vertexs[1].x = vertexs[0].x / bgImg.scale;
-    // vertexs[1].y = vertexs[0].y / bgImg.scale;
-    vertexs[2] = coordinate.getScreenXY(bgImg.bounding[2]);
-    // vertexs[2].x = vertexs[0].x / bgImg.scale;
-    // vertexs[2].y = vertexs[0].y / bgImg.scale;
-    vertexs[3] = coordinate.getScreenXY(bgImg.bounding[3]);
-    // vertexs[3].x = vertexs[0].x / bgImg.scale;
-    // vertexs[3].y = vertexs[0].y / bgImg.scale;
-    let flag =
-      isInScreen(vertexs[0]) ||
-      isInScreen(vertexs[1]) ||
-      isInScreen(vertexs[2]) ||
-      isInScreen(vertexs[3]);
-    return flag; //true表示在屏幕内，false表示在屏幕外
+    // let bgImg = dataService.getBackgroundImg();
+    // let vertexs = [];
+    // vertexs[0] = coordinate.getScreenXY(bgImg.bounding[0]);
+    // // vertexs[0].x = vertexs[0].x / bgImg.scale;
+    // // vertexs[0].y = vertexs[0].y / bgImg.scale;
+    // vertexs[1] = coordinate.getScreenXY(bgImg.bounding[1]);
+    // // vertexs[1].x = vertexs[0].x / bgImg.scale;
+    // // vertexs[1].y = vertexs[0].y / bgImg.scale;
+    // vertexs[2] = coordinate.getScreenXY(bgImg.bounding[2]);
+    // // vertexs[2].x = vertexs[0].x / bgImg.scale;
+    // // vertexs[2].y = vertexs[0].y / bgImg.scale;
+    // vertexs[3] = coordinate.getScreenXY(bgImg.bounding[3]);
+    // // vertexs[3].x = vertexs[0].x / bgImg.scale;
+    // // vertexs[3].y = vertexs[0].y / bgImg.scale;
+    // let flag =
+    //   isInScreen(vertexs[0]) ||
+    //   isInScreen(vertexs[1]) ||
+    //   isInScreen(vertexs[2]) ||
+    //   isInScreen(vertexs[3]);
+    // return flag; //true表示在屏幕内，false表示在屏幕外
+    return false
   }
 }
 

src/views/graphic/header.vue

@@ -53,6 +53,7 @@
     </div>
     <div
       class="meterPerPixel"
+      :class="{noBoxShadow : ! graphicState.showBackImage}"
       v-if="currentMeterPerPixel && isRoad"
       :style="{ color: graphicState.showBackImage ? '#fff' : '#16181A' }"
     >
@@ -76,6 +77,7 @@ import { genUseLoading } from "@/hook";
 import { loadData, bus } from "@/hook/useGraphic";
 
 import { dataService } from "@/graphic/Service/DataService";
+import { boxShadow } from "html2canvas/dist/types/css/property-descriptors/box-shadow";
 
 const data = useData();
 const mode = computed(() => Number(router.currentRoute.value.params.mode) as Mode);
@@ -100,7 +102,7 @@ onActivated(() => {
 onDeactivated(() => clearInterval(interval));
 
 const backImageChang = (show) => {
-  dataService.setGridDisplay(!show);
+  // dataService.setGridDisplay(!show);
   drawRef.value.uiControl.menu_backgroundImg(show);
 };
 
@@ -294,6 +296,10 @@ const createTable = async () => {
   font-size: 20px;
   font-weight: 400;
   line-height: 23px;
+  text-shadow: 0 0 2px rgb(0 0 0 / 70%);
+  &.noBoxShadow{
+    text-shadow: none;
+  }
 }
 </style>