继续

src/graphic/Coordinate.js

@@ -42,8 +42,8 @@ export default class Coordinate {
     let y =
       this.height / 2 - ((pt.y - this.center.y) * this.zoom) / defaultZoom;
 
-    x *= this.ratio;
-    y *= this.ratio;
+    // x *= this.ratio;
+    // y *= this.ratio;
 
     x = (0.5 + x) << 0;
     y = (0.5 + y) << 0;
@@ -57,10 +57,12 @@ export default class Coordinate {
   getXYFromScreen(screenPoint) {
     const point = {};
     point.x =
-      ((screenPoint.x - this.width / 2) * defaultZoom) / this.zoom +
+      ((screenPoint.x * this.ratio - this.width / 2) * defaultZoom) /
+        this.zoom +
       this.center.x;
     point.y =
-      ((this.height / 2 - screenPoint.y) * defaultZoom) / this.zoom +
+      ((this.height / 2 - screenPoint.y * this.ratio) * defaultZoom) /
+        this.zoom +
       this.center.y;
     return point;
   }
@@ -82,7 +84,7 @@ export default class Coordinate {
 
   updateForCanvas(canvas) {
     if (canvas) {
-      console.log(canvas.offsetWidth, canvas.offsetHeight)
+      console.log(canvas.offsetWidth, canvas.offsetHeight);
       canvas.width = canvas.offsetWidth * this.ratio;
       canvas.height = canvas.offsetHeight * this.ratio;
       this.width = canvas.width;
@@ -105,21 +107,23 @@ export default class Coordinate {
     this.zoom = zoom;
     this.center.x =
       position.x -
-      ((screenPosition.x - this.width / 2) * defaultZoom) / this.zoom;
+      ((screenPosition.x * this.ratio - this.width / 2) * defaultZoom) /
+        this.zoom;
 
     this.center.y =
       position.y -
-      ((this.height / 2 - screenPosition.y) * defaultZoom) / this.zoom;
+      ((this.height / 2 - screenPosition.y * this.ratio) * defaultZoom) /
+        this.zoom;
   }
 
-  moveTo(zoom, screenPosition) {
-    const position = this.getXYFromScreen(screenPosition);
-    this.zoom = zoom;
-    const dx = (screenPosition.x * defaultZoom) / this.zoom - this.width / 2;
-    const dy = this.height / 2 - (screenPosition.y * defaultZoom) / this.zoom;
-    this.center.x = position.x - dx;
-    this.center.y = position.y - dy;
-  }
+  // moveTo(zoom, screenPosition) {
+  //   const position = this.getXYFromScreen(screenPosition);
+  //   this.zoom = zoom;
+  //   const dx = (screenPosition.x * defaultZoom) / this.zoom - this.width / 2;
+  //   const dy = this.height / 2 - (screenPosition.y * defaultZoom) / this.zoom;
+  //   this.center.x = position.x - dx;
+  //   this.center.y = position.y - dy;
+  // }
 
   getPixelRatio(context) {
     var backingStore =

src/graphic/Geometry/Geometry.js

@@ -52,6 +52,14 @@ export default class Geometry {
     return this.parent;
   }
 
+  setValue(value) {
+    this.value = value;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
   setCenter(center) {
     if (center) {
       this.center = {};
@@ -68,6 +76,10 @@ export default class Geometry {
     this.color = value;
   }
 
+  getColor() {
+    return this.color;
+  }
+
   // ptSrc: 圆上某点(初始点);
   // ptRotationCenter: 圆心点;
   // angle: 旋转角度°  -- [angle * M_PI / 180]:将角度换算为弧度

src/graphic/Geometry/Line.js

@@ -12,7 +12,8 @@ export default class Line extends Geometry {
     this.startId = startId;
     this.endId = endId;
     this.category = Settings.lineCategory;
-    this.arrowColor = Style.ArrowLine.strokeStyle; //箭头类型会用到
+    this.color = Style.ArrowLine.strokeStyle; //箭头类型会用到
+    this.value = null; //测量线会用到
     this.geoType = VectorType.Line;
     this.setId(vectorId);
   }
@@ -30,10 +31,6 @@ export default class Line extends Geometry {
     return this.category;
   }
 
-  setArrowColor(value) {
-    this.arrowColor = value;
-  }
-
   getDir(pointId) {
     if (this.startId == pointId) {
       return "start";

src/graphic/History/HistoryUtil.js

@@ -237,6 +237,7 @@ export default class HistoryUtil {
     lineInfo.start = line2.start;
     lineInfo.end = line2.end;
     lineInfo.category = line2.category;
+    lineInfo.value = line2.value;
     this.setLineInfo(lineInfo);
   }
 
@@ -563,6 +564,7 @@ export default class HistoryUtil {
     line.startId = lineInfo.start;
     line.endId = lineInfo.end;
     line.category = lineInfo.category;
+    line.value = lineInfo.value;
     return line;
   }
 

src/graphic/Layer.js

@@ -147,8 +147,9 @@ export default class Layer {
             VectorType.Point,
             SelectState.Select
           );
+        } else {
+          this.uiControl.prompt({ msg: "请先添加基准点", time: 1000 });
         }
-
         break;
       case LayerEvents.AddCircle:
         stateService.setEventName(LayerEvents.AddingCircle);
@@ -234,6 +235,8 @@ export default class Layer {
 
     let dx = X - this.lastX;
     let dy = Y - this.lastY;
+    dx = dx * coordinate.ratio;
+    dy = dy * coordinate.ratio;
 
     let position = coordinate.getXYFromScreen({
       x: X,
@@ -274,8 +277,10 @@ export default class Layer {
         break;
       case LayerEvents.PanBackGround:
         stateService.clearItems();
-        coordinate.center.x = coordinate.center.x - dx;
-        coordinate.center.y = coordinate.center.y + dy;
+        coordinate.center.x =
+          coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
+        coordinate.center.y =
+          coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
 
         dataService.setGridForPan();
         needAutoRedraw = true;

src/graphic/Load.js

@@ -88,8 +88,11 @@ export default class Load {
             dataLocal.lines[key].category,
             key
           );
-          if (dataLocal.lines[key].arrowColor) {
-            line.setArrowColor(dataLocal.lines[key].arrowColor);
+          if (dataLocal.lines[key].color) {
+            line.setColor(dataLocal.lines[key].color);
+          }
+          if (dataLocal.lines[key].value) {
+            line.setValue(dataLocal.lines[key].value);
           }
           line.setDisplay(dataLocal.lines[key].display);
           if (line.getCategory() == VectorCategory.Line.BaseLine) {
@@ -113,45 +116,46 @@ export default class Load {
           }
         } catch (e) {}
         if (data3d.meterPerPixel) {
-          const width = bgImg.imageData.width;
-          const height = bgImg.imageData.height;
           coordinate.setRes(data3d.meterPerPixel);
-          if (data3d.baseLines) {
-            for (let i = 0; i < data3d.baseLines.length; ++i) {
-              //理论上基准线只能有一条
-              let baseLine = lineService.create(
-                this.getXY(width, height, data3d.baseLines[i][0]),
-                this.getXY(width, height, data3d.baseLines[i][1]),
-                VectorCategory.Line.BaseLine
-              );
-              Settings.baseLineId = baseLine.vectorId;
-            }
+        }
+        const width = bgImg.imageData.width;
+        const height = bgImg.imageData.height;
+
+        if (data3d.baseLines) {
+          for (let i = 0; i < data3d.baseLines.length; ++i) {
+            //理论上基准线只能有一条
+            let baseLine = lineService.create(
+              this.getXY(width, height, data3d.baseLines[i][0]),
+              this.getXY(width, height, data3d.baseLines[i][1]),
+              VectorCategory.Line.BaseLine
+            );
+            Settings.baseLineId = baseLine.vectorId;
           }
-          if (data3d.measures) {
-            for (let i = 0; i < data3d.measures.length; ++i) {
-              //理论上基准线只能有一条
-              lineService.create(
-                this.getXY(width, height, data3d.measures[i][0]),
-                this.getXY(width, height, data3d.measures[i][1]),
-                VectorCategory.Line.MeasureLine
-              );
-            }
+        }
+        if (data3d.measures) {
+          for (let i = 0; i < data3d.measures.length; ++i) {
+            //理论上基准线只能有一条
+            lineService.create(
+              this.getXY(width, height, data3d.measures[i][0]),
+              this.getXY(width, height, data3d.measures[i][1]),
+              VectorCategory.Line.MeasureLine
+            );
           }
-          if (data3d.basePoints) {
-            for (let i = 0; i < data3d.basePoints.length; ++i) {
-              let point = pointService.create(
-                this.getXY(width, height, data3d.basePoints[i])
-              );
-              point.setCategory(VectorCategory.Point.BasePoint);
-            }
+        }
+        if (data3d.basePoints) {
+          for (let i = 0; i < data3d.basePoints.length; ++i) {
+            let point = pointService.create(
+              this.getXY(width, height, data3d.basePoints[i])
+            );
+            point.setCategory(VectorCategory.Point.BasePoint);
           }
-          if (data3d.fixPoints) {
-            for (let i = 0; i < data3d.fixPoints.length; ++i) {
-              let point = pointService.create(
-                this.getXY(width, height, data3d.fixPoints[i])
-              );
-              point.setCategory(VectorCategory.Point.FixPoint);
-            }
+        }
+        if (data3d.fixPoints) {
+          for (let i = 0; i < data3d.fixPoints.length; ++i) {
+            let point = pointService.create(
+              this.getXY(width, height, data3d.fixPoints[i])
+            );
+            point.setCategory(VectorCategory.Point.FixPoint);
           }
         }
       }

src/graphic/Renderer/Draw.js

@@ -27,12 +27,12 @@ const help = {
 
     return [
       itemsEntry.reduce((prev, [item, attr]) => {
-        if (!item) return prev
-        const selected = geoId === item.vectorId || (
-          item.parent && Object.keys(item.parent).some(id => id === geoId)
-        );
+        if (!item) return prev;
+        const selected =
+          geoId === item.vectorId ||
+          (item.parent && Object.keys(item.parent).some((id) => id === geoId));
         if (selected && Style[attr]) {
-          const style = Style[attr][geoType] || Style[attr][vector.category]
+          const style = Style[attr][geoType] || Style[attr][vector.category];
           if (style) {
             currentAttr = attr;
             return style;
@@ -54,7 +54,7 @@ const help = {
     }
   },
   setVectorStyle(ctx, vector, geoType = vector.geoType) {
-    let styles, attr
+    let styles, attr;
     if (Array.isArray(geoType)) {
       for (const type of geoType) {
         [styles, attr] = help.getVectorStyle(vector, type);
@@ -65,7 +65,7 @@ const help = {
     } else {
       [styles, attr] = help.getVectorStyle(vector, geoType);
     }
-    help.setStyle(ctx, styles)
+    help.setStyle(ctx, styles);
     return [styles, attr];
   },
   transformCoves(lines) {
@@ -118,13 +118,13 @@ const help = {
   },
   getTextCenter(ctx, txt) {
     const text = ctx.measureText(txt);
-    const height = text.actualBoundingBoxAscent + text.actualBoundingBoxDescent
+    const height = text.actualBoundingBoxAscent + text.actualBoundingBoxDescent;
     return {
       width: text.width,
       height,
       x: text.width / 2,
-      y: -height / 2
-    }
+      y: -height / 2,
+    };
   },
   // 绘制圆角矩形
   roundRect(ctx, x, y, width, height, radius) {
@@ -141,13 +141,15 @@ const help = {
     ctx.closePath();
   },
   getRealDistance(p1, p2) {
-    return Math.round(mathUtil.getDistance(p1, p2) * coordinate.res * 100) / 100
+    return (
+      Math.round(mathUtil.getDistance(p1, p2) * coordinate.res * 100) / 100
+    );
   },
   getPerpendicularPoint(p1, p2, p3, d) {
     if (p1.x === p2.x) {
-      return {x: p3.x + d, y: p3.y}
+      return { x: p3.x + d, y: p3.y };
     } else if (p1.y === p2.y) {
-      return {x: p3.x, y: p3.y + d}
+      return { x: p3.x, y: p3.y + d };
     }
 
     // 计算通过 p1 和 p2 的直线的斜率和截距
@@ -159,11 +161,12 @@ const help = {
     const perpendicularIntercept = p3.y - perpendicularSlope * p3.x;
 
     // 计算垂足点 p0
-    const x = (perpendicularIntercept - intercept) / (slope - perpendicularSlope);
+    const x =
+      (perpendicularIntercept - intercept) / (slope - perpendicularSlope);
     const y = slope * x + intercept;
     const p0 = { x, y };
 
-// 计算点 p4
+    // 计算点 p4
     const distance = d; // 指定距离
     const dx = distance / Math.sqrt(1 + perpendicularSlope ** 2);
     const dy = perpendicularSlope * dx;
@@ -171,16 +174,17 @@ const help = {
   },
   drawLineText(ctx, start, end, text, style) {
     if (start.x > end.x) {
-      [start, end] = [end, start]
+      [start, end] = [end, start];
     }
 
-    const angle = Math.atan2(end.y - start.y, end.x - start.x) * 180 / Math.PI;
-    const center = mathUtil.lineCenter(start, end)
+    const angle =
+      (Math.atan2(end.y - start.y, end.x - start.x) * 180) / Math.PI;
+    const center = mathUtil.lineCenter(start, end);
 
     ctx.save();
     ctx.translate(center.x, center.y);
-    ctx.rotate(angle * Math.PI / 180);
-    const textCenter = help.getTextCenter(ctx, text)
+    ctx.rotate((angle * Math.PI) / 180);
+    const textCenter = help.getTextCenter(ctx, text);
     const padding = style.padding;
     help.roundRect(
       ctx,
@@ -188,14 +192,14 @@ const help = {
       textCenter.y - padding,
       textCenter.width + 2 * padding,
       textCenter.height + 2 * padding,
-      (textCenter.height / 2) + padding
-    )
-    ctx.fillStyle = style.backColor
-    ctx.fill()
-    ctx.fillStyle = style.fillColor
+      textCenter.height / 2 + padding
+    );
+    ctx.fillStyle = style.backColor;
+    ctx.fill();
+    ctx.fillStyle = style.fillColor;
     ctx.fillText(text, -textCenter.x, -textCenter.y);
     ctx.restore();
-  }
+  },
 };
 
 export default class Draw {
@@ -505,8 +509,8 @@ export default class Draw {
     ctx.save();
 
     const [style] = help.setVectorStyle(this.context, vector);
-    if (vector.arrowColor) {
-      ctx.strokeStyle = vector.arrowColor;
+    if (vector.color) {
+      ctx.strokeStyle = vector.color;
     }
 
     const dires =
@@ -615,19 +619,18 @@ export default class Draw {
     }
     const pt = coordinate.getScreenXY({ x: vector.x, y: vector.y });
     const ctx = this.context;
-    let [style, attr] = help.setVectorStyle(
-      ctx,
-      vector,
-      [vector.category, vector.geoType, "Point"]
-
-    );
+    let [style, attr] = help.setVectorStyle(ctx, vector, [
+      vector.category,
+      vector.geoType,
+      "Point",
+    ]);
     if (vector.category === VectorCategory.Point.NormalPoint) {
-      const lineid = Object.keys(vector.parent)[0]
-      let line, style
+      const lineid = Object.keys(vector.parent)[0];
+      let line, style;
       if (!(lineid && (line = dataService.getLine(lineid)))) {
         return;
       }
-      const [_, attr] = help.getVectorStyle(line)
+      const [_, attr] = help.getVectorStyle(line);
       if (!attr) {
         return;
       }
@@ -641,11 +644,11 @@ export default class Draw {
       ctx.save();
       ctx.beginPath();
       ctx.arc(pt.x, pt.y, radius, 0, Math.PI * 2, true);
-      help.setStyle(ctx, style)
+      help.setStyle(ctx, style);
       ctx.stroke();
       ctx.fill();
       ctx.restore();
-    }
+    };
 
     if (Settings.selectBasePointId === vector.vectorId) {
       style = {
@@ -654,12 +657,12 @@ export default class Draw {
         out: style.out && {
           ...style.out,
           strokeStyle: "red",
-        }
-      }
+        },
+      };
     }
-    draw(style)
+    draw(style);
     if (style.out) {
-      draw(style.out)
+      draw(style.out);
     }
 
     if (import.meta.env.DEV) {
@@ -694,7 +697,9 @@ export default class Draw {
     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`;
+    this.context.font = `${
+      vector.fontSize * coordinate.ratio
+    }px Microsoft YaHei`;
     this.drawTextByInfo(vector.center, vector.value, 0, false);
 
     const ctx = this.context;
@@ -715,7 +720,7 @@ export default class Draw {
       coordinate.getScreenXY(endReal),
       help.getRealDistance(startReal, endReal) + "m",
       style
-    )
+    );
   }
 
   drawBaseLineLabel(vector) {
@@ -724,10 +729,18 @@ export default class Draw {
     const endReal = dataService.getPoint(vector.endId);
     const end = coordinate.getScreenXY(endReal);
     const point = mathUtil.translate(
-      end, start, end, mathUtil.getDistance(start, end) / 3
-    )
-    const p4 = help.getPerpendicularPoint(start, end, point, 30 * coordinate.ratio)
-    const ctx = this.context
+      end,
+      start,
+      end,
+      mathUtil.getDistance(start, end) / 3
+    );
+    const p4 = help.getPerpendicularPoint(
+      start,
+      end,
+      point,
+      30 * coordinate.ratio
+    );
+    const ctx = this.context;
     ctx.beginPath();
     const [style] = help.setVectorStyle(
       this.context,
@@ -738,7 +751,12 @@ export default class Draw {
     ctx.lineTo(p4.x, p4.y);
     ctx.stroke();
 
-    const p5 = help.getPerpendicularPoint(start, end, point, 35 * coordinate.ratio)
+    const p5 = help.getPerpendicularPoint(
+      start,
+      end,
+      point,
+      35 * coordinate.ratio
+    );
     this.context.font = `${10 * coordinate.ratio}px Microsoft YaHei`;
     help.drawLineText(
       this.context,
@@ -748,9 +766,9 @@ export default class Draw {
       {
         padding: 6 * coordinate.ratio,
         backColor: "rgba(0,0,0,0)",
-        fillColor: style.strokeStyle
+        fillColor: style.strokeStyle,
       }
-    )
+    );
   }
 
   drawLine(vector) {
@@ -760,11 +778,11 @@ export default class Draw {
     const end = coordinate.getScreenXY(endReal);
 
     this.context.save();
-    const [style, attr] = help.setVectorStyle(
-      this.context,
-      vector,
-      [vector.category, vector.geoType, 'BaseLine']
-    );
+    const [style, attr] = help.setVectorStyle(this.context, vector, [
+      vector.category,
+      vector.geoType,
+      "BaseLine",
+    ]);
     if (style.dash) {
       this.context.setLineDash(style.dash);
     }
@@ -780,24 +798,22 @@ export default class Draw {
       //   this.drawPoint(dataService.getPoint(vector.startId))
       //   this.drawPoint(dataService.getPoint(vector.endId))
       // }
-    }
+    };
 
     switch (vector.category) {
       case VectorCategory.Line.ArrowLine:
         this.drawArrow(vector);
-        drawPoints()
-        break
+        drawPoints();
+        break;
       case VectorCategory.Line.BaseLine:
-        this.drawBaseLineLabel(vector)
-        drawPoints()
+        this.drawBaseLineLabel(vector);
+        drawPoints();
         break;
       case VectorCategory.Line.MeasureLine:
       case VectorCategory.Line.PositionLine:
-        this.drawLineText(vector, style.text)
+        this.drawLineText(vector, style.text);
         break;
-
     }
-
   }
 
   drawElementLine(element) {

src/graphic/Service/LineService.js

@@ -68,7 +68,7 @@ export default class LineService {
     startPoint = uiService.getNewPositionForPop(startPoint);
     endPoint = uiService.getNewPositionForPop(endPoint);
     let newLine = this.create(startPoint, endPoint, line.category);
-    newLine.setArrowColor(line.arrowColor);
+    newLine.setColor(line.color);
     return newLine;
   }
 

src/graphic/Util/MathUtil.js

@@ -621,14 +621,14 @@ export default class MathUtil {
   }
 
   equalJSON(json1, json2) {
-    for (key in json1) {
+    for (let key in json1) {
       if (json2.hasOwnProperty(key) && json1[key] == json2[key]) {
         continue;
       } else {
         return false;
       }
     }
-    for (key in json2) {
+    for (let key in json2) {
       if (json1.hasOwnProperty(key) && json1[key] == json2[key]) {
         continue;
       } else {