兼容高密度设备

src/graphic/CanvasStyle/default.js

@@ -1,42 +1,44 @@
+import { coordinate } from '../Coordinate.js'
+
 const Road = {
   strokeStyle: "#939393",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const RoadEdge = {
   ...Road,
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
   strokeStyle: "#000",
 };
 
 const Lane = {
   ...RoadEdge,
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
   strokeStyle: "#000",
-  dash: [8, 8],
+  dash: [8 * coordinate.ratio, 8 * coordinate.ratio],
 };
 
 const ArrowLine = {
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
 
 const Magnifier = {
   strokeStyle: "#2F8FFF",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
   fillStyle: "rgba(0,0,0,0)",
-  radius: 10,
+  radius: 10 * coordinate.ratio,
   target: {
-    radius: 100,
-    realRadius: 50,
+    radius: 100 * coordinate.ratio,
+    realRadius: 50 * coordinate.ratio,
     strokeStyle: "#2F8FFF",
-    lineWidth: 3,
+    lineWidth: 3 * coordinate.ratio,
   },
 };
 
 const CurveRoad = {
   ...Road,
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const CurveRoadEdge = {
@@ -52,27 +54,27 @@ const CurveLan = {
 const Text = {
   strokeStyle: "rgb(0,0,0,1)",
   fillStyle: "rgb(0,0,0,1)",
-  fontSize: 14,
+  fontSize: 14 * coordinate.ratio,
   strokeStyle_adding: "rgba(243, 255, 0, 0.8)",
   fillStyle_adding: "rgba(243, 255, 0, 0.8)",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const CanvasFont = {
-  font: "14px Microsoft YaHei",
+  font: `${14 * coordinate.ratio}px Microsoft YaHei`,
   fillStyle: "#000000",
   strokeStyle: "#000000",
   textAlign: "center",
   textBaseline: "middle",
-  miterLimit: 10,
+  miterLimit: 10 * coordinate.ratio,
   direction: "ltr",
 };
 
 const Point = {
   strokeStyle: "#3290FF",
   fillStyle: "#fff",
-  radius: 4,
-  lineWidth: 4,
+  radius: 4 * coordinate.ratio,
+  lineWidth: 4 * coordinate.ratio,
 };
 
 const RoadPoint = {
@@ -86,85 +88,85 @@ const CurveRoadPoint = {
 const CrossPoint = {
   ...Point,
   strokeStyle: "#3290FF",
-  radius: 8,
+  radius: 8 * coordinate.ratio,
 };
 
 const Circle = {
   strokeStyle: "red",
   fillStyle: "rgba(0,0,0,0)",
-  lineWidth: 2,
-  radius: 30,
+  lineWidth: 2 * coordinate.ratio,
+  radius: 30 * coordinate.ratio,
 };
 
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
   strokeStyle: "rgba(255,255,255,1)",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const NormalLine = {
   strokeStyle: "#000",
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
 };
 const GuideLine = {
   strokeStyle: "#CED806",
-  lineWidth: 2,
-  dash: [3, 2, 2],
+  lineWidth: 2 * coordinate.ratio,
+  dash: [3 * coordinate.ratio, 2 * coordinate.ratio, 2 * coordinate.ratio],
 };
 const MeasureLine = {
   strokeStyle: "#2F8FFF",
-  lineWidth: 4,
+  lineWidth: 4 * coordinate.ratio,
   text: {
     fillColor: "#fff",
-    padding: 6,
+    padding: 6 * coordinate.ratio,
     backColor: "#2F8FFF"
   },
 
 };
 const BaseLine = {
   strokeStyle: "#000",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 
 const BasePoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#000",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#000",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 1,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 1 * coordinate.ratio,
   }
 }
 
 const Element = {
   AddingPoint: {
-    radius: 4,
+    radius: 4 * coordinate.ratio,
     fillStyle: "yellow",
     strokeStyle: "green",
   },
   NewRoad: {
-    lineWidth: 4,
+    lineWidth: 4 * coordinate.ratio,
     strokeStyle: "rgba(100,100,100,0.3)",
     errorStrokeStyle: "rgb(250,63,72,0.3)",
   },
   CheckLinesX: {
-    lineWidth: 2,
+    lineWidth: 2 * coordinate.ratio,
     strokeStyle: "#CED806",
   },
   CheckLinesY: {
-    lineWidth: 2,
+    lineWidth: 2 * coordinate.ratio,
     strokeStyle: "#CED806",
   },
   VCheckLinesX: {
-    lineWidth: 2,
+    lineWidth: 2 * coordinate.ratio,
     strokeStyle: "#CED806",
     //strokeStyle: 'rgba(100,149,237,0.5)',
   },
   VCheckLinesY: {
-    lineWidth: 2,
+    lineWidth: 2 * coordinate.ratio,
     strokeStyle: "#CED806",
     //strokeStyle: 'rgba(100,149,237,0.5)',
   },
@@ -174,13 +176,13 @@ const Element = {
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#fff",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#3290FF",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 3,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 3 * coordinate.ratio,
   }
 }
 

src/graphic/CanvasStyle/focus.js

@@ -1,14 +1,15 @@
 import def from "./default.js";
+import {coordinate} from "@/graphic/Coordinate.js";
 
 const Road = {
   ...def.Road,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
 const NormalLine = {
   ...def.NormalLine,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
@@ -19,7 +20,7 @@ const Magnifier = {
 const CurveRoad = {
   ...def.CurveRoad,
   ...Road,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
 };
 
 const Text = {
@@ -49,30 +50,30 @@ const CrossPoint = {
 
 const RoadEdge = {
   ...def.RoadEdge,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 const ArrowLine = {
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
 
 const BasePoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#3290FF",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#3290FF",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 1,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 1 * coordinate.ratio,
   }
 }
 
@@ -80,18 +81,18 @@ const BasePoint = {
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#fff",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#3290FF",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 3,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 3 * coordinate.ratio,
   }
 }
 const BaseLine = {
   strokeStyle: "#3290FF",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 export default {
   Road,

src/graphic/CanvasStyle/select.js

@@ -1,28 +1,29 @@
 import def from "./default.js";
+import {coordinate} from "@/graphic/Coordinate.js";
 
 const Road = {
   ...def.Road,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
 const BaseLine = {
   strokeStyle: "#3290FF",
-  lineWidth: 1,
+  lineWidth: 1 * coordinate.ratio,
 };
 const NormalLine = {
   ...def.NormalLine,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 const ArrowLine = {
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "red",
 };
 const CurveRoad = {
   ...def.CurveRoad,
   ...Road,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
 };
 
 const Text = {
@@ -33,13 +34,13 @@ const Text = {
 
 const RoadEdge = {
   ...def.RoadEdge,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
 const CurveRoadEdge = {
   ...def.CurveRoadEdge,
-  lineWidth: 2,
+  lineWidth: 2 * coordinate.ratio,
   strokeStyle: "#3290FF",
 };
 
@@ -65,26 +66,26 @@ const CrossPoint = {
 const BasePoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#3290FF",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#3290FF",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 1,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 1 * coordinate.ratio,
   }
 }
 
 const TestPoint = {
   strokeStyle: "rgba(0,0,0,0)",
   fillStyle: "#fff",
-  radius: 6,
-  lineWidth: 1,
+  radius: 6 * coordinate.ratio,
+  lineWidth: 1 * coordinate.ratio,
   out: {
     strokeStyle: "#3290FF",
     fillStyle: "rgba(255,255,255,0)",
-    radius: 8,
-    lineWidth: 3,
+    radius: 8 * coordinate.ratio,
+    lineWidth: 3 * coordinate.ratio,
   }
 }
 

src/graphic/Coordinate.js

@@ -8,7 +8,6 @@ export default class Coordinate {
     this.zoom = defaultZoom; // 当前缩放比例，不会改变世界坐标系的坐标，只是改变渲染时转换的屏幕坐标
     this.res = defaultRes; //比例尺。实际尺寸与屏幕像素的比例，用于测量。与之前的绘制不同，目前存储的数据与像素的比例是1：1，只是最后测量值再除以这个比例
     this.ratio = window.devicePixelRatio || 1; //不同硬件设备，像素率不同
-
     this.width == null;
     this.height == null;
   }

src/graphic/Renderer/Draw.js

@@ -255,7 +255,7 @@ export default class Draw {
       this.context.lineTo(w, y);
     }
     this.context.strokeStyle = "rgba(0,0,0,0.1)";
-    this.context.lineWidth = 0.5;
+    this.context.lineWidth = 0.5 * coordinate.ratio;
     this.context.stroke();
 
     this.context.beginPath();
@@ -269,7 +269,7 @@ export default class Draw {
       this.context.lineTo(w, y);
     }
     this.context.strokeStyle = "rgba(0,0,0,0.2)";
-    this.context.lineWidth = 1;
+    this.context.lineWidth = 1 * coordinate.ratio;
     this.context.stroke();
     this.context.restore();
   }
@@ -637,7 +637,7 @@ export default class Draw {
       ctx.strokeStyle = vector.color;
     }
     const draw = (style) => {
-      const radius = help.getReal(vector.radius || style.radius);
+      const radius = vector.radius || style.radius;
       ctx.save();
       ctx.beginPath();
       ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
@@ -684,7 +684,7 @@ export default class Draw {
     help.setVectorStyle(this.context, vector);
     this.context.fillStyle = vector.color;
     const oldFont = this.context.font;
-    this.context.font = `${vector.fontSize}px Microsoft YaHei`;
+    this.context.font = `${vector.fontSize * coordinate.ratio}px Microsoft YaHei`;
     this.drawTextByInfo(vector.center, vector.value, 0, false);
 
     const ctx = this.context;
@@ -716,7 +716,7 @@ export default class Draw {
     const point = mathUtil.translate(
       end, start, end, mathUtil.getDistance(start, end) / 3
     )
-    const p4 = help.getPerpendicularPoint(start, end, point, 30)
+    const p4 = help.getPerpendicularPoint(start, end, point, 30 * coordinate.ratio)
     const ctx = this.context
     ctx.beginPath();
     const [style] = help.setVectorStyle(
@@ -728,14 +728,15 @@ export default class Draw {
     ctx.lineTo(p4.x, p4.y);
     ctx.stroke();
 
-    const p5 = help.getPerpendicularPoint(start, end, point, 35)
+    const p5 = help.getPerpendicularPoint(start, end, point, 35 * coordinate.ratio)
+    this.context.font = `${10 * coordinate.ratio}px Microsoft YaHei`;
     help.drawLineText(
       this.context,
-      help.getPerpendicularPoint(point, p5, p5, 10),
-      help.getPerpendicularPoint(point, p5, p5, -10),
+      help.getPerpendicularPoint(point, p5, p5, 10 * coordinate.ratio),
+      help.getPerpendicularPoint(point, p5, p5, -10 * coordinate.ratio),
       "基准线",
       {
-        padding: 6,
+        padding: 6 * coordinate.ratio,
         backColor: "rgba(0,0,0,0)",
         fillColor: style.strokeStyle
       }
@@ -772,7 +773,6 @@ export default class Draw {
       // }
     }
 
-    console.log(vector.category)
     switch (vector.category) {
       case VectorCategory.Line.ArrowLine:
         this.drawArrow(vector);

src/views/graphic/container.vue

@@ -16,15 +16,11 @@ import {roadPhotos} from "@/store/roadPhotos";
 import { useData } from './data'
 
 const drawCanvasRef = ref<HTMLCanvasElement>();
-const setCanvasSize = () => {
-  drawCanvasRef.value.width = drawCanvasRef.value.offsetWidth;
-  drawCanvasRef.value.height = drawCanvasRef.value.offsetHeight;
-};
+
 
 
 onMounted(() => {
   console.log(useData())
-  setCanvasSize();
   setCanvas(drawCanvasRef.value, useData());
 });
 </script>

src/views/roads/tabulation.vue

@@ -178,6 +178,22 @@ const { cssMatrix: photoCSSMatrix, matrix: photoMatrix } = useHand(
 
 
 const downMode = ref(false)
+const layoutRef = ref<HTMLDivElement>()
+const getLayoutImage = async () => {
+  downMode.value = true
+  await nextTick()
+  const canvas = await html2canvas(layoutRef.value)
+  downMode.value = false
+  const blob = await new Promise<Blob>(resolve => canvas.toBlob(resolve, "image/jpeg", 0.95))
+  return await uploadImage(blob)
+}
+const saveHandler = async () => {
+  roadPhoto.value.table = {
+    ...history.value.value,
+    url: await getLayoutImage()
+  }
+  router.replace({name: writeRouteName.roads})
+}
 
 </script>