Merge branch 'master' of http://192.168.0.115:3000/bill/traffic-laser

src/graphic/Controls/UIControl.js

@@ -395,12 +395,14 @@ export default class UIControl {
     let canvas = this.layer.canvas;
     this.menu_view_reset();
     //隐藏grid
+    Settings.screenMode = true
     dataService.setGridDisplay(false);
     this.layer.renderer.autoRedraw();
     // this.downloadCadImg(canvas, "test.jpg");
     const blob = await this.getCadBlob(canvas);
     //显示grid
     dataService.setGridDisplay(true);
+    Settings.screenMode = false
     this.layer.renderer.autoRedraw();
 
     return blob;

src/graphic/Coordinate.js

@@ -69,6 +69,21 @@ export default class Coordinate {
     return point;
   }
 
+
+  getXYFromScreenNotRatio(screenPoint) {
+    const point = {};
+    point.x =
+      ((screenPoint.x - this.width / 2) * defaultZoom) /
+      this.zoom +
+      this.center.x;
+    point.y =
+      ((this.height / 2 - screenPoint.y) * defaultZoom) /
+      this.zoom +
+      this.center.y;
+    return point;
+  }
+
+
   getPointForRevRotate(point, angle) {}
 
   getVectorForRotate(point, angle) {}

src/graphic/Renderer/Draw.js

@@ -478,9 +478,10 @@ export default class Draw {
     ctx.stroke();
     ctx.restore();
 
+    console.log("lan:" , start.x, end.x)
     if (import.meta.env.DEV) {
-      this.drawPoint(lan.start);
-      this.drawPoint(lan.end);
+      // this.drawPoint(lan.start);
+      // this.drawPoint(lan.end);
     }
   }
 
@@ -535,7 +536,10 @@ export default class Draw {
 
     drawRoadEdgeChild(rightEdge);
 
+    ctx.restore();
+
     if (fo) {
+      ctx.save()
       const p1 = coordinate.getScreenXY(leftEdge.start);
       const p2 = coordinate.getScreenXY(rightEdge.start);
       const p3 = coordinate.getScreenXY(leftEdge.end);
@@ -551,11 +555,10 @@ export default class Draw {
       ctx.moveTo(p3.x, p3.y)
       ctx.lineTo(p4.x, p4.y)
       ctx.stroke()
-
+      ctx.restore()
     }
 
 
-    ctx.restore();
 
     if (import.meta.env.DEV) {
       // this.drawPoint(leftEdge.start);
@@ -614,19 +617,19 @@ export default class Draw {
 
   drawCurveRoad(vector) {
     const ctx = this.context;
+    ctx.save();
     const [_, foo] = help.setVectorStyle(ctx, vector);
     if (vector.display && vector.midDivide) {
       const covesArray = help.transformCoves([
         vector.midDivide.leftMidDivideCurves,
         vector.midDivide.rightMidDivideCurves,
       ]);
-      ctx.save();
       ctx.lineWidth *= Settings.lineWidth
       for (let coves of covesArray) {
         help.drawCoves(ctx, coves);
       }
-      ctx.restore();
     }
+    ctx.restore();
 
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.rightEdgeId), vector);
     this.drawCurveRoadEdge(dataService.getCurveRoadEdge(vector.leftEdgeId), vector);
@@ -701,7 +704,7 @@ export default class Draw {
   }
 
   drawRoadPoint(vector) {
-    vector.display && this.drawPoint(vector);
+    this.drawPoint(vector);
   }
 
   drawArrow(vector) {
@@ -737,6 +740,7 @@ export default class Draw {
 
   drawMagnifier(vector) {
     const ctx = this.context;
+    ctx.save();
     const [style] = help.setVectorStyle(ctx, vector);
     const radius = vector.radius || style.radius;
     this.drawPoint({
@@ -753,7 +757,6 @@ export default class Draw {
     const offset = radius / 2;
     const targetPts =[mathUtil.translate(pt, target, pt, radius), target];
 
-    ctx.save();
     ctx.beginPath();
     ctx.moveTo(pt.x - offset, pt.y);
     ctx.lineTo(pt.x + offset, pt.y);
@@ -822,10 +825,10 @@ export default class Draw {
 
     const pt = coordinate.getScreenXY({ x: element.center.x, y: element.center.y });
     const ctx = this.context;
+    ctx.save();
     const [_, label] = help.setVectorStyle(ctx, element);
 
     ctx.strokeStyle = element.color
-    ctx.save();
     drawEllipse(
       ctx, pt.x, pt.y,
       (radiusX * coordinate.zoom) / coordinate.defaultZoom,
@@ -840,17 +843,24 @@ export default class Draw {
 
   drawCircle(element) {
     this.drawElliptic(element, element.radiusX, element.radiusY)
-    console.log(element)
+
     const [_, label] = help.getVectorStyle(element);
     label && element.points.forEach((point) => this.drawPoint(point));
   }
 
-  drawPoint(vector) {
-    if (vector.category === VectorCategory.Point.TestBasePoint) {
-      return;
+  drawPoint(vector, screenSave) {
+    const screenNotDrawTypes = [
+      VectorCategory.Point.NormalPoint,
+    ]
+    if (!screenSave) {
+      if ((Settings.screenMode && (!vector.category || screenNotDrawTypes.includes(vector.category))) ||
+        (vector.category === VectorCategory.Point.TestBasePoint)) {
+        return;
+      }
     }
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
+    ctx.save();
     let [style, attr] = help.setVectorStyle(ctx, vector, [
       vector.category,
       vector.geoType,
@@ -909,12 +919,14 @@ export default class Draw {
     }
 
     if (vector.category === "BasePoint") {
-      ctx.font = `${22}px Microsoft YaHei`
+      ctx.font = `${12 * coordinate.ratio}px Microsoft YaHei`
       const bound = help.getTextCenter(ctx, "基准点")
-      const textPt = {
-        y: vector.y + bound.height,
-        x: vector.x - (bound.width / 2)
-      }
+
+      const screen = coordinate.getScreenXY(vector)
+      const textPt = coordinate.getXYFromScreenNotRatio({
+        y: screen.y + bound.height + style.radius,
+        x: screen.x - (bound.width / 2)
+      })
 
       ctx.fillStyle = style.fillStyle
       this.drawTextByInfo(textPt, "基准点", 0, false);
@@ -925,6 +937,7 @@ export default class Draw {
         }
       }
     }
+    ctx.restore();
   }
 
   drawTextByInfo(position, txt, angle, setStyle = true) {
@@ -950,14 +963,22 @@ export default class Draw {
 
   // 文字
   drawText(vector) {
+    this.context.save();
     help.setVectorStyle(this.context, vector);
     this.context.fillStyle = vector.color;
     const oldFont = this.context.font;
     this.context.font = `${
       vector.fontSize * coordinate.ratio
     }px Microsoft YaHei`;
+    const bound = help.getTextCenter(this.context, vector.value)
+
+    const screen = coordinate.getScreenXY(vector.center)
     this.drawTextByInfo(
-      vector.center,
+      // vector.center,
+      coordinate.getXYFromScreenNotRatio({
+        y: screen.y + (bound.height + Style.Point.radius),
+        x: screen.x - (bound.width / 2)
+      }),
       vector.value,
       -(vector.angle || 0),
       false
@@ -969,7 +990,8 @@ export default class Draw {
     pt.x -= text.width / 2;
     pt.y += (text.actualBoundingBoxAscent + text.actualBoundingBoxDescent) / 2;
 
-    this.context.font = oldFont;
+    this.context.restore();
+    this.drawPoint({...vector.center, color: vector.color}, true)
   }
 
   drawSVG(vector) {
@@ -1040,6 +1062,7 @@ export default class Draw {
       30 * coordinate.ratio
     );
     const ctx = this.context;
+    ctx.save()
     ctx.beginPath();
     const [style] = help.setVectorStyle(
       this.context,
@@ -1068,6 +1091,7 @@ export default class Draw {
         fillColor: style.strokeStyle,
       }
     );
+    ctx.restore()
   }
 
   drawCurveLine(vector) {
@@ -1101,21 +1125,13 @@ export default class Draw {
 
     help.drawStyleLine(this.context, [start, end], vector.style, vector.weight)
 
-    const drawPoints = () => {
-      // if (attr) {
-      //   this.drawPoint(dataService.getPoint(vector.startId))
-      //   this.drawPoint(dataService.getPoint(vector.endId))
-      // }
-    };
 
     switch (vector.category) {
       case VectorCategory.Line.SingleArrowLine:
         this.drawArrow(vector);
-        drawPoints();
         break;
       case VectorCategory.Line.DoubleArrowLine:
         this.drawArrow(vector);
-        drawPoints();
         break;
       case VectorCategory.Line.BaseLine:
         this.drawBaseLineLabel(vector);
@@ -1125,6 +1141,7 @@ export default class Draw {
         this.drawLineText(vector, style.text);
         break;
     }
+    this.context.restore();
   }
 
   drawElementLine(element) {

src/graphic/Settings.js

@@ -5,6 +5,7 @@ import { os } from "@/utils/vue.ts";
 const Settings = {
   lineWidth: 1,
   roadLeftDrivewayCount: 1,
+  screenMode: false,
   roadRightDrivewayCount: 1,
   curveRoadLeftDrivewayCount: 1,
   curveRoadRightDrivewayCount: 1,