修改bug

src/graphic/CanvasStyle/default.js

@@ -143,9 +143,7 @@ const MeasureLine = {
   lineWidth: 2 * coordinate.ratio,
   text: {
     fontSize: 12,
-    fillColor: "#000",
     padding: 6 * coordinate.ratio,
-    backColor: "#2F8FFF",
   },
 };
 const BaseLine = {

src/graphic/CanvasStyle/screen.js

@@ -143,9 +143,7 @@ const MeasureLine = {
   lineWidth: 2 * coordinate.ratio,
   text: {
     fontSize: 12,
-    fillColor: "#000",
     padding: 6 * coordinate.ratio,
-    backColor: "#000",
   },
 };
 const BaseLine = {

src/graphic/Geometry/RoadEdge.js

@@ -6,6 +6,7 @@ import VectorStyle from "../enum/VectorStyle.js";
 import { mathUtil } from "../Util/MathUtil.js";
 import { dataService } from "../Service/DataService.js";
 import Constant from "../Constant";
+import { coordinate } from "../Coordinate.js";
 export default class RoadEdge extends Geometry {
   constructor(start, end, vectorId, parentId) {
     super();
@@ -65,7 +66,6 @@ export default class RoadEdge extends Geometry {
     // let lines = mathUtil.getParallelLineForDistance(line, Constant.roadSideWidth);
     // let joinPoint = lines.line1;
 
-
     // for (let key in road) {
     //   if (this.vectorId == road[key]) {
     //     if (key == 'rightEdgeId') {
@@ -84,8 +84,15 @@ export default class RoadEdge extends Geometry {
       this.roadSide = {};
       this.roadSide["width"] = Constant.roadSideWidth;
     }
-  
-    let roadSidePoints = mathUtil.RectangleVertex(startPoint, endPoint, this.roadSide.width * 2);
+
+    // x * coordinate.res * 100) / coordinate.ratio = 1000
+
+    let roadSidePoints = mathUtil.RectangleVertex(
+      startPoint,
+      endPoint,
+
+      (this.roadSide.width * coordinate.ratio) / (coordinate.res * 100)
+    );
     for (let key in road) {
       if (this.vectorId == road[key]) {
         if (key == "rightEdgeId") {
@@ -102,7 +109,7 @@ export default class RoadEdge extends Geometry {
   }
   setRoadSideWidth(width) {
     this.roadSide.width = width;
-    this.initRoadSide()
+    this.initRoadSide();
   }
   setRoadSide(roadSide) {
     this.roadSide = JSON.parse(JSON.stringify(roadSide));

src/graphic/Renderer/Draw.js

@@ -206,8 +206,8 @@ export const help = {
 
     ctx.font = `${fontSize}px Microsoft YaHei`;
     const textCenter = help.getTextCenter(ctx, text);
-    ctx.fillStyle = style.backColor;
     if (!isScreenStyle()) {
+      // ctx.fillStyle = style.backColor;
       // const padding = style.padding;
       // help.roundRect(
       //   ctx,
@@ -219,8 +219,17 @@ export const help = {
       // );
       // ctx.fill();
     }
-    ctx.fillStyle = style.fillColor;
-    ctx.fillText(text, -textCenter.x, -textCenter.y);
+    ctx.lineWidth = 8;
+    if (!style.fillStyle) {
+      ctx.strokeStyle = "#fff";
+      ctx.strokeText(text, -textCenter.x, -textCenter.y);
+      ctx.fillStyle = "#000";
+      ctx.fillText(text, -textCenter.x, -textCenter.y);
+      console.error("????");
+    } else {
+      ctx.fillStyle = style.fillColor;
+      ctx.fillText(text, -textCenter.x, -textCenter.y);
+    }
     ctx.restore();
   },
   isTriangleClockwise(p1, p2, p3) {
@@ -601,10 +610,8 @@ export default class Draw {
       const [style] = help.setVectorStyle(this.context, vector, ["NormalLine"]);
       help.drawStyleLine(this.context, [start, end]);
       help.drawLineText(this.context, start, end, width, {
-        fillColor: isScreenStyle() ? "#000" : "#fff",
         padding: 6,
         fontSize: 12,
-        backColor: style.strokeStyle,
       });
       this.drawLineArrow([start, end], true);
     });
@@ -685,6 +692,7 @@ export default class Draw {
             targetLine[1] = temp;
           }
 
+          console.log(edgeVector.roadSide.width);
           const tstart = mathUtil.translate(
             targetLine[0],
             targetLine[1],
@@ -698,16 +706,16 @@ export default class Draw {
             edgeVector.roadSide.width + 24
           );
 
+          // this.drawPoint(tstart);
+          // this.drawPoint(tend);
           help.drawLineText(
             ctx,
             coordinate.getScreenXY(tstart),
             coordinate.getScreenXY(tend),
             edgeVector.roadSide.width * 10,
             {
-              fillColor: isScreenStyle() ? "#000" : "#fff",
               padding: 6,
               fontSize: 12,
-              backColor: style.strokeStyle,
             }
           );
         }

src/graphic/Util/MathUtil.js

@@ -146,6 +146,7 @@ export default class MathUtil {
       line2.b = b - db;
     }
 
+    console.log(line, line1, line2, distance);
     return { line1: line1, line2: line2 };
   }
 

src/store/accidentPhotos.ts

@@ -1,32 +1,32 @@
-import {ref, watch, watchEffect} from "vue";
-import type { PhotoRaw } from './photos'
+import { ref, watch, watchEffect } from "vue";
+import type { PhotoRaw } from "./photos";
 
 export type AccidentPhoto = {
-  id: string
-  photoUrl: string
-  title: string
-  url: string
-  time: number,
-  data: any,
-  type?: string
+  id: string;
+  photoUrl: string;
+  title: string;
+  url: string;
+  time: number;
+  data: any;
+  updateTime?: number;
+  type?: string;
   sceneData: {
-    meterPerPixel: number
-    measures: PhotoRaw['measures'],
-    fixPoints: PhotoRaw['fixPoints'],
-    basePoints: PhotoRaw['basePoints']
-    baseLines: PhotoRaw['baseLines']
-  }
-}
+    meterPerPixel: number;
+    measures: PhotoRaw["measures"];
+    fixPoints: PhotoRaw["fixPoints"];
+    basePoints: PhotoRaw["basePoints"];
+    baseLines: PhotoRaw["baseLines"];
+  };
+};
 
-export const types = [
-  "概览照片",
-  "中心照片",
-  "细目照片",
-  "方位照片"
-]
+export const types = ["概览照片", "中心照片", "细目照片", "方位照片"];
 
-export const accidentPhotos = ref<AccidentPhoto[]>([])
+export const accidentPhotos = ref<AccidentPhoto[]>([]);
 
-watch(accidentPhotos, (val) => {
-  console.error(accidentPhotos.value[1])
-}, { deep: true, flush: "sync"})
+watch(
+  accidentPhotos,
+  (val) => {
+    console.error(accidentPhotos.value[1]);
+  },
+  { deep: true, flush: "sync" }
+);

src/store/roadPhotos.ts

@@ -1,47 +1,50 @@
-import {ref} from "vue";
-import {PhotoRaw} from "@/store/photos";
+import { ref } from "vue";
+import { PhotoRaw } from "@/store/photos";
 import matruces from "@/utils/matruces";
 
 export type RoadPhotoTable = {
-  arrivalTime: string,
-  weather: string,
-  conditions: string,
-  location: string,
-  illustrate: string,
-  date: number,
-  url?: string,
-  compassAngle: number[]
-  imageTransform: number[]
-
-}
+  arrivalTime: string;
+  weather: string;
+  conditions: string;
+  location: string;
+  illustrate: string;
+  date: number;
+  url?: string;
+  compassAngle: number[];
+  imageTransform: number[];
+};
 export type RoadPhoto = {
-  id: string
-  photoUrl: string
-  url: string
-  title: string
-  time: number,
-  table?: RoadPhotoTable,
-  data: any
+  id: string;
+  photoUrl: string;
+  url: string;
+  title: string;
+  time: number;
+  table?: RoadPhotoTable;
+  data: any;
   sceneData: {
-    meterPerPixel: number
-    measures: PhotoRaw['measures'],
-    fixPoints: PhotoRaw['fixPoints'],
-    basePoints: PhotoRaw['basePoints']
-    baseLines: PhotoRaw['baseLines']
-  }
-}
+    meterPerPixel: number;
+    measures: PhotoRaw["measures"];
+    fixPoints: PhotoRaw["fixPoints"];
+    basePoints: PhotoRaw["basePoints"];
+    baseLines: PhotoRaw["baseLines"];
+  };
+  updateTime?: number;
+};
 
 export const getDefaultTable = (road): RoadPhotoTable => {
-  return road.table ? { ...road.table } : {
-    arrivalTime: "2020-10-12",
-    weather: "晴天",
-    conditions: "普通",
-    location: "",
-    imageTransform: matruces.translateMatrix(0, 0, 0),
-    compassAngle: matruces.translateMatrix(0, 0, 0),
-    illustrate: "说明:绘图比例为1:215，单位为米。车辆甲为小轿车，无车号。车辆乙为小轿车，无车号。选取道路边缘线为基准线，井盖为基准点。",
-    other: "",
-  }
-}
+  return road.table
+    ? { ...road.table }
+    : {
+        arrivalTime: "2020-10-12",
+        weather: "晴天",
+        conditions: "普通",
+        location: "",
+        imageTransform: matruces.translateMatrix(0, 0, 0),
+        compassAngle: matruces.translateMatrix(0, 0, 0),
+        illustrate:
+          "说明:绘图比例为1:215，单位为米。车辆甲为小轿车，无车号。车辆乙为小轿车，无车号。选取道路边缘线为基准线，井盖为基准点。",
+        other: "",
+      };
+};
 
-export const roadPhotos = ref<RoadPhoto[]>([])
+export const roadPhotos = ref<RoadPhoto[]>([]);

src/views/graphic/geos/roadEdge.vue

@@ -4,7 +4,7 @@
   <VRange
     v-if="showChange"
     :max="1000"
-    :min="100"
+    :min="0"
     :step="1"
     unit="mm"
     v-model:value="(lineWidthMenu[2].desc as number)"

src/views/graphic/header.vue

@@ -173,6 +173,7 @@ const saveStore = genUseLoading(async () => {
   const newData = {
     ...data.value,
     data: JSON.parse(JSON.stringify(drawRef.value.load.save())),
+    updateTime: new Date().getTime(),
   };
   const blob = await drawRef.value.uiControl.screenShot();
   newData.url = await uploadImage(blob);

src/views/roads/index.vue

@@ -107,10 +107,10 @@ const enum TypeEnum {
   Table = "table",
 }
 const currentType = ref(TypeEnum.Draw);
-const sortPhotos = computed(() =>
-  roadPhotos.value
-    // .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
-    .reverse()
+const sortPhotos = computed(
+  () =>
+    roadPhotos.value.sort((a, b) => (b.updateTime || b.time) - (a.updateTime || a.time))
+  // .filter((item) => (currentType.value === TypeEnum.Draw ? !item.table : !!item.table))
 );
 const onBack = () => {
   router.back();