继续

src/graphic/Controls/UIControl.js

@@ -17,23 +17,24 @@ import { addRoad } from "../Controls/AddRoad";
 export default class UIControl {
   constructor(layer, newsletter) {
     this.layer = layer;
-    this.newsletter = newsletter
+    this.newsletter = newsletter;
   }
 
   get selectUI() {
-    return this.newsletter.selectUI
+    return this.newsletter.selectUI;
   }
 
   set selectUI(selectUI) {
     this.updateEventNameForSelectUI(selectUI);
-    this.newsletter.selectUI = selectUI
+    this.newsletter.selectUI = selectUI;
   }
 
+  //弹出面板
   get selectVector() {
-    return this.newsletter.selectVector
+    return this.newsletter.selectVector;
   }
   set selectVector(selectVector) {
-    this.newsletter.selectVector = selectVector
+    this.newsletter.selectVector = selectVector;
   }
 
   /**
@@ -45,7 +46,7 @@ export default class UIControl {
    * 设置选中要操作的UI
    */
   set currentUI(value) {
-    this.selectUI = value
+    this.selectUI = value;
   }
 
   clearUI() {
@@ -54,7 +55,7 @@ export default class UIControl {
 
   //点击左侧栏后，更新事件
   updateEventNameForSelectUI(selectUI) {
-    console.log(this.selectUI, selectUI)
+    console.log(this.selectUI, selectUI);
     if (selectUI != null) {
       if (this.selectUI == selectUI) {
         return;

src/graphic/Layer.js

@@ -148,6 +148,11 @@ export default class Layer {
           coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom;
         coordinate.center.y =
           coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom;
+
+        dataService.setGridForPan(
+          (dx * coordinate.defaultZoom) / coordinate.zoom,
+          (dy * coordinate.defaultZoom) / coordinate.zoom
+        );
         this.lastX = X;
         this.lastY = Y;
         needAutoRedraw = true;
@@ -578,6 +583,11 @@ export default class Layer {
       }
 
       coordinate.updateZoom(zoom);
+      dataService.setGridForZoom(
+        coordinate.width,
+        coordinate.height,
+        coordinate.zoom / coordinate.defaultZoom
+      );
       this.renderer.autoRedraw();
     }
   }

src/graphic/Renderer/Draw.js

@@ -104,30 +104,36 @@ export default class Draw {
     this.context.restore();
   }
 
-  drawGrid(w, h, step1, step2) {
+  drawGrid(startX, startY, w, h, step1, step2) {
+    this.context.save();
     this.context.beginPath();
-    for (var x = 0; x <= w; x += step1) {
-      if (x % step2 == 0) {
-        this.context.strokeStyle = "rgba(0,0,0,0.8)";
-      } else {
-        this.context.strokeStyle = "rgba(0,0,0,0.2)";
-      }
+    for (var x = startX; x <= w; x += step1) {
       this.context.moveTo(x, 0);
       this.context.lineTo(x, h);
     }
 
-    for (var y = 0; y <= h; y += step1) {
-      if (x % step2 == 0) {
-        this.context.strokeStyle = "rgba(0,0,0,0.8)";
-      } else {
-        this.context.strokeStyle = "rgba(0,0,0,0.2)";
-      }
+    for (var y = startY; y <= h; y += step1) {
       this.context.moveTo(0, y);
       this.context.lineTo(w, y);
     }
+    this.context.strokeStyle = "rgba(0,0,0,0.1)";
+    this.context.lineWidth = 0.5;
+    this.context.stroke();
 
+    this.context.beginPath();
+    for (var x = startX; x <= w; x += step2) {
+      this.context.moveTo(x, 0);
+      this.context.lineTo(x, h);
+    }
+
+    for (var y = startY; y <= h; y += step2) {
+      this.context.moveTo(0, y);
+      this.context.lineTo(w, y);
+    }
+    this.context.strokeStyle = "rgba(0,0,0,0.2)";
     this.context.lineWidth = 1;
     this.context.stroke();
+    this.context.restore();
   }
 
   drawRoad(vector, isTemp) {

src/graphic/Renderer/Render.js

@@ -98,7 +98,15 @@ export default class Render {
   autoRedraw() {
     console.log("重绘");
     draw.clear();
-    draw.drawGrid(coordinate.width, coordinate.height, 50, 250);
+    const grid = dataService.getGrid();
+    draw.drawGrid(
+      grid.startX,
+      grid.startY,
+      coordinate.width,
+      coordinate.height,
+      grid.step1,
+      grid.step2
+    );
     this.drawGeometry(dataService.getBackgroundImg());
 
     let roads = dataService.getRoads();

src/graphic/Service/DataService.js

@@ -1,9 +1,40 @@
 export class DataService {
   constructor() {
+    this.grid = {
+      startX: 0,
+      startY: 0,
+      step1: 50,
+      step2: 250,
+      defalutstep1: 50,
+      defalutstep2: 250,
+    };
     this.vectorData = {};
     this.currentId = 0; // 当前可用id
   }
 
+  getGrid() {
+    return this.grid;
+  }
+
+  setGridForPan(dx, dy) {
+    this.grid.startX += dx;
+    this.grid.startY += dy;
+  }
+
+  setGridForZoom(w, h, ratio) {
+    console.log("setGridForZoom:" + ratio);
+    this.grid.startX = w / 2 - (ratio * w) / 2;
+    this.grid.startY = w / 2 - (ratio * h) / 2;
+    this.grid.step1 = this.grid.defalutstep1 * ratio;
+    this.grid.step2 = this.grid.defalutstep2 * ratio;
+    while (this.grid.startX > 0) {
+      this.grid.startX -= this.grid.step1;
+    }
+    while (this.grid.startY > 0) {
+      this.grid.startY -= this.grid.step2;
+    }
+  }
+
   setCurrentId(id) {
     this.currentId = id;
   }

src/graphic/Service/StateService.js

@@ -4,9 +4,9 @@ import SelectState from "../enum/SelectState.js";
 export default class StateService {
   constructor() {
     this.eventName = null;
-    this.selectItem = null;
-    this.focusItem = null;
-    this.draggingItem = null;
+    this.selectItem = null; //选中
+    this.focusItem = null; //点击
+    this.draggingItem = null; //拖拽
   }
 
   getEventName() {