circle变成椭圆

src/graphic/CanvasStyle/default.js

@@ -103,13 +103,6 @@ const Circle = {
   radius: 30 * coordinate.ratio,
 };
 
-const Elliptic = {
-  strokeStyle: "red",
-  fillStyle: "rgba(0,0,0,0)",
-  lineWidth: 2 * coordinate.ratio,
-  radius: 30 * coordinate.ratio,
-};
-
 const Measure = {
   txt: "rgba(255,255,255,1)", //画墙/选墙的时候 测量值的颜色
   strokeStyle: "rgba(255,255,255,1)",
@@ -133,7 +126,7 @@ const GuidePositionLine = {
   strokeStyle: "#ccc",
   lineWidth: 2 * coordinate.ratio,
   dash: [3 * coordinate.ratio, 2 * coordinate.ratio, 2 * coordinate.ratio],
-}
+};
 const MeasureLine = {
   strokeStyle: "#2F8FFF",
   lineWidth: 2 * coordinate.ratio,
@@ -225,7 +218,6 @@ export default {
   Point,
   BaseLine,
   Circle,
-  Elliptic,
   Text,
   CrossPoint,
   CurveLine,

src/graphic/Controls/AddCircle.js

@@ -22,8 +22,9 @@ export default class AddCircle {
 
   updateCircle(position) {
     if (this.newCircle != null && !mathUtil.equalPoint(this.center, position)) {
-      this.newCircle.setRadius(mathUtil.getDistance(this.center, position));
-      this.newCircle.createPoints();
+      this.newCircle.setRadiusX(Math.abs(this.center.x - position.x));
+      this.newCircle.setRadiusY(Math.abs(this.center.y - position.y));
+      this.newCircle.initPoints();
     }
   }
 

src/graphic/Controls/AddElliptic.js

@@ -1,52 +0,0 @@
-import { mathUtil } from "../Util/MathUtil";
-import { ellipticService } from "../Service/EllipticService";
-import { listenLayer } from "../ListenLayer";
-
-export default class AddElliptic {
-  constructor() {
-    this.newElliptic = null;
-    this.center = null;
-  }
-
-  setCenter(value) {
-    this.center = {};
-    mathUtil.clonePoint(this.center, value);
-  }
-
-  buildElliptic(position) {
-    if (
-      this.newElliptic == null &&
-      !mathUtil.equalPoint(this.center, position)
-    ) {
-      const radius = mathUtil.getDistance(this.center, position);
-      this.newElliptic = ellipticService.create(this.center, radius, radius);
-    }
-  }
-
-  // updateElliptic(position, index) {
-  //   if (
-  //     this.newElliptic != null &&
-  //     !mathUtil.equalPoint(this.center, position)
-  //   ) {
-  //     this.newElliptic.setRadius(mathUtil.getDistance(this.center, position));
-  //     this.newElliptic.createPoints();
-  //   }
-  // }
-
-  finish(position) {
-    if (
-      this.newElliptic != null &&
-      mathUtil.equalPoint(this.center, position)
-    ) {
-      dataService.deleteElliptic(this.newElliptic.vectorId);
-    }
-  }
-
-  clear() {
-    this.newElliptic = null;
-    this.center = null;
-  }
-}
-
-const addElliptic = new AddElliptic();
-export { addElliptic };

src/graphic/Controls/MoveCircle.js

@@ -1,6 +1,7 @@
 import { dataService } from "../Service/DataService";
 import { mathUtil } from "../Util/MathUtil";
 import Constant from "../Constant.js";
+import { circleService } from "../Service/CircleService";
 
 export default class MoveCircle {
   constructor() {}
@@ -16,44 +17,14 @@ export default class MoveCircle {
 
   movePoint(position, circleId, pointIndex) {
     let circle = dataService.getCircle(circleId);
-    let flag = this.check(position, circle.center, pointIndex);
-
-    let line = mathUtil.createLine1(circle.center, circle.points[pointIndex]);
-    let join = mathUtil.getJoinLinePoint(position, line);
-
-    let radius = mathUtil.getDistance(circle.center, join) / Math.sqrt(2);
-    //没有超出界
-    if (flag && radius > Constant.minAdsorbPix) {
-      circle.setRadius(radius);
-      circle.createPoints();
-    }
-  }
-
-  check(position, center, pointIndex) {
-    if (pointIndex == 0) {
-      if (position.x < center.x && position.y > center.y) {
-        return true;
-      }
-    } else if (pointIndex == 1) {
-      if (position.x > center.x && position.y > center.y) {
-        return true;
-      }
-    } else if (pointIndex == 2) {
-      if (position.x > center.x && position.y < center.y) {
-        return true;
-      }
-    } else if (pointIndex == 3) {
-      if (position.x < center.x && position.y < center.y) {
-        return true;
-      }
+    const radius = mathUtil.getDistance(circle.center, position);
+    if (pointIndex == 0 || pointIndex == 2) {
+      circle.setRadiusY(radius);
+    } else {
+      circle.setRadiusX(radius);
     }
-    return false;
+    circle.createPoints(position, pointIndex);
   }
-
-  // moveRing(position, circleId) {
-  //   let circle = dataService.getCircle(circleId);
-  //   circle.setRadius(mathUtil.getDistance(circle.center, position));
-  // }
 }
 
 const moveCircle = new MoveCircle();

src/graphic/Controls/MoveElliptic.js

@@ -1,82 +0,0 @@
-import { dataService } from "../Service/DataService";
-import { mathUtil } from "../Util/MathUtil";
-import Constant from "../Constant.js";
-
-export default class MoveElliptic {
-  constructor() {}
-
-  moveFull(ellipticId, dx, dy) {
-    dx = dx;
-    dy = -dy;
-    let elliptic = dataService.getElliptic(ellipticId);
-    elliptic.center.x += dx;
-    elliptic.center.y += dy;
-    elliptic.createPoints();
-  }
-
-  movePoint(position, ellipticId, pointIndex) {
-    let elliptic = dataService.getElliptic(ellipticId);
-    let flag = this.check(position, elliptic.center, pointIndex);
-    if (flag) {
-      const lineA = mathUtil.createLine1(
-        elliptic.points[2],
-        elliptic.points[3]
-      );
-      const lineB = mathUtil.createLine1(
-        elliptic.points[0],
-        elliptic.points[1]
-      );
-
-      let join, distance;
-      if (pointIndex == 0) {
-        join = mathUtil.getJoinLinePoint(position, lineB);
-        distance = mathUtil.getDistance(join, elliptic.center);
-        elliptic.points[pointIndex].y = elliptic.center.y + distance;
-        elliptic.points[1].y = elliptic.center.y - distance;
-        elliptic.setRadiusY(distance);
-      } else if (pointIndex == 1) {
-        join = mathUtil.getJoinLinePoint(position, lineB);
-        distance = mathUtil.getDistance(join, elliptic.center);
-        elliptic.points[pointIndex].y = elliptic.center.y - distance;
-        elliptic.points[0].y = elliptic.center.y + distance;
-        elliptic.setRadiusY(distance);
-      } else if (pointIndex == 2) {
-        join = mathUtil.getJoinLinePoint(position, lineA);
-        distance = mathUtil.getDistance(join, elliptic.center);
-        elliptic.points[pointIndex].x = elliptic.center.x - distance;
-        elliptic.points[3].y = elliptic.center.x + distance;
-        elliptic.setRadiusX(distance);
-      } else if (pointIndex == 3) {
-        join = mathUtil.getJoinLinePoint(position, lineA);
-        distance = mathUtil.getDistance(join, elliptic.center);
-        elliptic.points[pointIndex].x = elliptic.center.x + distance;
-        elliptic.points[2].x = elliptic.center.x - distance;
-        elliptic.setRadiusX(distance);
-      }
-    }
-  }
-
-  check(position, center, pointIndex) {
-    if (pointIndex == 0) {
-      if (position.y > center.y) {
-        return true;
-      }
-    } else if (pointIndex == 1) {
-      if (position.y < center.y) {
-        return true;
-      }
-    } else if (pointIndex == 2) {
-      if (position.x < center.x) {
-        return true;
-      }
-    } else if (pointIndex == 3) {
-      if (position.x > center.x) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-
-const moveElliptic = new MoveElliptic();
-export { moveElliptic };

src/graphic/Controls/UIControl.js

@@ -1,38 +1,37 @@
-import { coordinate } from '../Coordinate.js';
-import LayerEvents from '../enum/LayerEvents.js';
-import UIEvents from '../enum/UIEvents.js';
-import RoadTemplate from '../enum/RoadTemplate.js';
-import RoadStructure from '../enum/RoadStructure.js';
-import VectorType from '../enum/VectorType.js';
-import VectorStyle from '../enum/VectorStyle.js';
-import VectorWeight from '../enum/VectorWeight.js';
-import GeoActions from '../enum/GeoActions.js';
-import VectorEvents from '../enum/VectorEvents.js';
-import SVGType from '../enum/SVGType.js';
-import { stateService } from '../Service/StateService.js';
-import { uiService } from '../Service/UIService.js';
-import { dataService } from '../Service/DataService.js';
-import { historyService } from '../Service/HistoryService.js';
-import { elementService } from '../Service/ElementService';
-import { lineService } from '../Service/LineService.js';
-import { circleService } from '../Service/CircleService.js';
-import { textService } from '../Service/TextService.js';
-import { magnifierService } from '../Service/MagnifierService.js';
-import { mathUtil } from '../Util/MathUtil';
-import Constant from '../Constant';
+import { coordinate } from "../Coordinate.js";
+import LayerEvents from "../enum/LayerEvents.js";
+import UIEvents from "../enum/UIEvents.js";
+import RoadTemplate from "../enum/RoadTemplate.js";
+import RoadStructure from "../enum/RoadStructure.js";
+import VectorType from "../enum/VectorType.js";
+import VectorStyle from "../enum/VectorStyle.js";
+import VectorWeight from "../enum/VectorWeight.js";
+import GeoActions from "../enum/GeoActions.js";
+import VectorEvents from "../enum/VectorEvents.js";
+import SVGType from "../enum/SVGType.js";
+import { stateService } from "../Service/StateService.js";
+import { uiService } from "../Service/UIService.js";
+import { dataService } from "../Service/DataService.js";
+import { historyService } from "../Service/HistoryService.js";
+import { elementService } from "../Service/ElementService";
+import { lineService } from "../Service/LineService.js";
+import { circleService } from "../Service/CircleService.js";
+import { textService } from "../Service/TextService.js";
+import { magnifierService } from "../Service/MagnifierService.js";
+import { mathUtil } from "../Util/MathUtil";
+import Constant from "../Constant";
 // import { roomsUtil } from "../Room/RoomsUtil.js";
-import { addRoad } from '../Controls/AddRoad';
-import { addLine } from './AddLine.js';
-import VectorCategory from '../enum/VectorCategory.js';
+import { addRoad } from "../Controls/AddRoad";
+import { addLine } from "./AddLine.js";
+import VectorCategory from "../enum/VectorCategory.js";
 // import { floorplanData } from "../VectorData.js";
-import Message from '@/components/base/components/message/message.vue';
-import { pointService } from '../Service/PointService.js';
-import Settings from '../Settings.js';
-import { addPoint } from './AddPoint.js';
-import { ellipticService } from '../Service/EllipticService.js';
-import { curveRoadPointService } from '../Service/CurveRoadPointService.js';
-import { roadService } from '../Service/RoadService.js';
-import { curveRoadService } from '../Service/CurveRoadService.js';
+import Message from "@/components/base/components/message/message.vue";
+import { pointService } from "../Service/PointService.js";
+import Settings from "../Settings.js";
+import { addPoint } from "./AddPoint.js";
+import { curveRoadPointService } from "../Service/CurveRoadPointService.js";
+import { roadService } from "../Service/RoadService.js";
+import { curveRoadService } from "../Service/CurveRoadService.js";
 
 export default class UIControl {
   constructor(layer, newsletter, graphicStateUI) {
@@ -88,7 +87,7 @@ export default class UIControl {
         }
 
         //执行新的事件
-        if (uiService.isBelongRoad(selectUI) || selectUI == 'road') {
+        if (uiService.isBelongRoad(selectUI) || selectUI == "road") {
           stateService.setEventName(LayerEvents.AddRoad);
         } else if (selectUI == UIEvents.CurveRoad) {
           stateService.setEventName(LayerEvents.AddCurveRoad);
@@ -100,8 +99,6 @@ export default class UIControl {
           stateService.setEventName(LayerEvents.AddPoint);
         } else if (selectUI == UIEvents.Circle) {
           stateService.setEventName(LayerEvents.AddCircle);
-        } else if (selectUI == UIEvents.Elliptic) {
-          stateService.setEventName(LayerEvents.AddElliptic);
         } else if (selectUI == UIEvents.Text) {
           stateService.setEventName(LayerEvents.AddText);
         } else if (selectUI == UIEvents.Magnifier) {
@@ -121,7 +118,7 @@ export default class UIControl {
   }
 
   updateVectorForSelectUI(selectUI) {
-    console.log('selectUI', selectUI);
+    console.log("selectUI", selectUI);
     const focusItem = stateService.getFocusItem();
 
     // if (selectUI == VectorStyle.Bold || selectUI == VectorStyle.Thinning) {
@@ -144,9 +141,9 @@ export default class UIControl {
     if (uiService.isBelongRoadEdgeStyle(selectUI)) {
       let key = null;
       if (VectorStyle[selectUI]) {
-        key = 'setStyle';
+        key = "setStyle";
       } else if (VectorWeight[selectUI]) {
-        key = 'setWeight';
+        key = "setWeight";
       }
       console.log(key);
 
@@ -343,9 +340,6 @@ export default class UIControl {
       case VectorType.Circle:
         dataService.deleteCircle(vectorId);
         break;
-      case VectorType.Elliptic:
-        dataService.deleteElliptic(vectorId);
-        break;
       case VectorType.Text:
         dataService.deleteText(vectorId);
         break;
@@ -377,9 +371,6 @@ export default class UIControl {
       case VectorType.Circle:
         circleService.copy(vectorId);
         break;
-      case VectorType.Elliptic:
-        ellipticService.copy(vectorId);
-        break;
       case VectorType.Text:
         textService.copy(vectorId);
         break;
@@ -416,18 +407,18 @@ export default class UIControl {
   }
 
   getCadBlob(canvas) {
-    var type = 'jpg';
+    var type = "jpg";
     return new Promise((resolve) => canvas.toBlob(resolve, `${type}/image`));
   }
 
   downloadCadImg(canvas, filename) {
     // 图片导出为 jpg 格式
-    var type = 'jpg';
+    var type = "jpg";
     var imgData = canvas.toDataURL(type, 3);
     canvas.toBlob(`${type}/image`);
 
     // 加工image data，替换mime type
-    imgData = imgData.replace(this._fixType(type), 'image/octet-stream');
+    imgData = imgData.replace(this._fixType(type), "image/octet-stream");
     // 下载后的图片名
     //var filename = 'cad_' + new Date().getTime() + '.' + type
     // download
@@ -435,19 +426,38 @@ export default class UIControl {
   }
 
   saveFile(data, filename) {
-    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
+    var save_link = document.createElementNS(
+      "http://www.w3.org/1999/xhtml",
+      "a"
+    );
     save_link.href = data;
     save_link.download = filename;
 
-    var event = document.createEvent('MouseEvents');
-    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    var event = document.createEvent("MouseEvents");
+    event.initMouseEvent(
+      "click",
+      true,
+      false,
+      window,
+      0,
+      0,
+      0,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
     save_link.dispatchEvent(event);
   }
 
   _fixType(type) {
-    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
+    type = type.toLowerCase().replace(/jpg/i, "jpeg");
     var r = type.match(/png|jpeg|bmp|gif/)[0];
-    return 'image/' + r;
+    return "image/" + r;
   }
   /****************************************************************************针对菜单*******************************************************************************/
 
@@ -506,7 +516,9 @@ export default class UIControl {
   /******************************************************************************************************************************************************************/
 
   prompt(msg) {
-    this._prompts.push(Message.success(typeof msg === 'string' ? { msg } : msg));
+    this._prompts.push(
+      Message.success(typeof msg === "string" ? { msg } : msg)
+    );
   }
 
   // 进入持续添加出确认与取消框
@@ -514,7 +526,7 @@ export default class UIControl {
     this.graphicStateUI.continuedMode = true;
   }
   confirmEntry() {
-    console.log('确认');
+    console.log("确认");
     this.graphicStateUI.continuedMode = false;
     this.layer.exit();
     uiService.setSelectLineCategory(VectorCategory.Line.NormalLine);
@@ -523,7 +535,7 @@ export default class UIControl {
     this.layer.renderer.autoRedraw();
   }
   confirmCancel() {
-    console.log('取消');
+    console.log("取消");
     this.graphicStateUI.continuedMode = false;
     addPoint.deleteTestPoints();
     this.layer.exit();
@@ -535,11 +547,17 @@ export default class UIControl {
 
   // 设置默认设置
   setDefaultSetting(setting) {
-    console.log('获得设置', setting);
-
-    uiService.setRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res * coordinate.ratio);
-    uiService.setCurveRoadMidDivideWidth(setting.roadQuarantineWidth / coordinate.res * coordinate.ratio);
-    uiService.setSingleLaneWidth(setting.singleRoadWidth / coordinate.res * coordinate.ratio);
+    console.log("获得设置", setting);
+
+    uiService.setRoadMidDivideWidth(
+      (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
+    );
+    uiService.setCurveRoadMidDivideWidth(
+      (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio
+    );
+    uiService.setSingleLaneWidth(
+      (setting.singleRoadWidth / coordinate.res) * coordinate.ratio
+    );
     // uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res);
     uiService.setLineWidth(setting.lineWidth);
     this.layer.renderer.autoRedraw();

src/graphic/Geometry/Circle.js

@@ -3,50 +3,134 @@ import SelectState from "../enum/SelectState.js";
 import Geometry from "./Geometry";
 import Constant from "../Constant.js";
 import Style from "../CanvasStyle";
+import { mathUtil } from "../Util/MathUtil.js";
 
 export default class Circle extends Geometry {
   constructor(center, radius, vectorId) {
     super();
-    this.radius = Style.Circle.radius;
-    this.center = null;
+    this.radiusX = radius || Style.Circle.radius;
+    this.radiusY = radius || Style.Circle.radius;
+    this.center = center;
     this.color = Style.Circle.strokeStyle;
     this.points = []; //包含圆的4个顶点，按照顺时针的方式存入数组中，第一个元素是左上角顶点
     this.geoType = VectorType.Circle;
     this.setId(vectorId);
 
-    this.setRadius(radius);
-    this.setCenter(center);
-    this.createPoints();
+    this.setRadiusX(this.radiusX);
+    this.setRadiusY(this.radiusY);
+    this.setCenter(this.center);
+    this.initPoints();
   }
 
-  createPoints() {
+  initPoints() {
     this.points[0] = {
-      x: this.center.x - this.radius,
+      x: this.center.x,
       y: this.center.y + this.radius,
     };
     this.points[1] = {
       x: this.center.x + this.radius,
-      y: this.center.y + this.radius,
+      y: this.center.y,
     };
     this.points[2] = {
-      x: this.center.x + this.radius,
+      x: this.center.x,
       y: this.center.y - this.radius,
     };
     this.points[3] = {
       x: this.center.x - this.radius,
-      y: this.center.y - this.radius,
+      y: this.center.y,
     };
   }
 
-  setPoints(points) {
-    if (points && points.length == 4) {
-      this.points = JSON.parse(JSON.stringify(points));
+  createPoints(position, index) {
+    this.points[index] = {
+      x: position.x,
+      y: position.y,
+    };
+    const dx = position.x - this.center.x;
+    const dy = position.y - this.center.y;
+    const oppositeIndex = this.getOpposite(index);
+    this.points[oppositeIndex] = {
+      x: this.center.x - dx,
+      y: this.center.y - dy,
+    };
+    const line = mathUtil.createLine1(
+      this.points[index],
+      this.points[oppositeIndex]
+    );
+    let distance = mathUtil.getDistance(this.center, position);
+
+    if (index == 0 || index == 2) {
+      this.setRadiusY(distance);
+      distance = this.radiusX;
     } else {
-      this.createPoints();
+      this.setRadiusX(distance);
+      distance = this.radiusY;
+    }
+    const lines = mathUtil.getParallelLineForDistance(line, distance);
+    const vLine = mathUtil.getVerticalLine(line, this.center);
+    const join1 = mathUtil.getIntersectionPoint(lines.line1, vLine);
+    const join2 = mathUtil.getIntersectionPoint(lines.line2, vLine);
+    //顺时针
+    if (
+      !mathUtil.isClockwise([
+        this.points[index],
+        join1,
+        this.points[oppositeIndex],
+      ])
+    ) {
+      let nextIndex = this.getNext(index);
+      this.points[nextIndex] = {
+        x: join1.x,
+        y: join1.y,
+      };
+      nextIndex = this.getOpposite(nextIndex);
+      this.points[nextIndex] = {
+        x: join2.x,
+        y: join2.y,
+      };
+    } else {
+      let nextIndex = this.getNext(index);
+      this.points[nextIndex] = {
+        x: join2.x,
+        y: join2.y,
+      };
+      nextIndex = this.getOpposite(nextIndex);
+      this.points[nextIndex] = {
+        x: join1.x,
+        y: join1.y,
+      };
     }
   }
 
   setColor(value) {
     this.color = value;
   }
+
+  setRadiusX(radiusX) {
+    this.radiusX = radiusX;
+  }
+
+  setRadiusY(radiusY) {
+    this.radiusY = radiusY;
+  }
+
+  getOpposite(index) {
+    if (index == 0) {
+      return 2;
+    } else if (index == 1) {
+      return 3;
+    } else if (index == 2) {
+      return 0;
+    } else if (index == 3) {
+      return 1;
+    }
+  }
+
+  getNext(index) {
+    let nextIndex = index + 1;
+    if (nextIndex == 4) {
+      nextIndex = 0;
+    }
+    return nextIndex;
+  }
 }

src/graphic/Geometry/Elliptic.js

@@ -1,62 +0,0 @@
-import VectorType from "../enum/VectorType.js";
-import SelectState from "../enum/SelectState.js";
-import Geometry from "./Geometry";
-import Constant from "../Constant.js";
-import Style from "../CanvasStyle";
-
-export default class Elliptic extends Geometry {
-  constructor(center, radiusX, radiusY, vectorId) {
-    super();
-    //this.radiusX = Style.Elliptic.radiusX;
-    //this.radiusY = Style.Elliptic.radiusY;
-    this.center = null;
-    //this.color = Style.Elliptic.strokeStyle;
-    this.points = []; //包含椭圆上下左右四个点（数组的顺序是上下左右）
-    this.geoType = VectorType.Elliptic;
-    this.setId(vectorId);
-
-    this.setRadiusX(radiusX);
-    this.setRadiusY(radiusY);
-    this.setCenter(center);
-    this.createPoints();
-  }
-
-  createPoints() {
-    this.points[0] = {
-      x: this.center.x,
-      y: this.center.y + this.radiusX,
-    };
-    this.points[1] = {
-      x: this.center.x,
-      y: this.center.y - this.radiusX,
-    };
-    this.points[2] = {
-      x: this.center.x - this.radius,
-      y: this.center.y,
-    };
-    this.points[3] = {
-      x: this.center.x + this.radius,
-      y: this.center.y,
-    };
-  }
-
-  setPoints(points) {
-    if (points && points.length == 4) {
-      this.points = JSON.parse(JSON.stringify(points));
-    } else {
-      this.createPoints();
-    }
-  }
-
-  setColor(value) {
-    this.color = value;
-  }
-
-  setRadiusX(radiusX) {
-    this.radiusX = radiusX;
-  }
-
-  setRadiusY(radiusY) {
-    this.radiusY = radiusY;
-  }
-}

src/graphic/Geometry/Geometry.js

@@ -88,10 +88,6 @@ export default class Geometry {
     }
   }
 
-  setRadius(radius) {
-    this.radius = radius;
-  }
-
   setColor(value) {
     this.color = value;
   }

src/graphic/History/Change.js

@@ -32,9 +32,6 @@ export default class Change {
     this.lastData.circles = JSON.parse(
       JSON.stringify(dataService.getCircles())
     );
-    this.lastData.elliptics = JSON.parse(
-      JSON.stringify(dataService.getElliptics())
-    );
     this.lastData.magnifiers = JSON.parse(
       JSON.stringify(dataService.getMagnifiers())
     );
@@ -71,7 +68,6 @@ export default class Change {
     this.compareCurvePoints();
     this.compareCurveLines();
     this.compareCircles();
-    this.compareElliptics();
     this.compareTexts();
     this.compareMagnifiers();
     this.compareSVGs();
@@ -89,7 +85,6 @@ export default class Change {
       this.currentData.curvePoints.length == 0 &&
       this.currentData.curveLines.length == 0 &&
       this.currentData.circles.length == 0 &&
-      this.currentData.elliptics.length == 0 &&
       this.currentData.texts.length == 0 &&
       this.currentData.magnifiers.length == 0 &&
       this.currentData.roadPoints.length == 0 &&
@@ -349,45 +344,6 @@ export default class Change {
     }
   }
 
-  compareElliptics() {
-    const elliptics = dataService.getElliptics();
-    this.currentData.elliptics = [];
-
-    for (const key in elliptics) {
-      const elliptic = elliptics[key];
-      // 不存在意味着增加
-      if (!this.lastData.elliptics[key]) {
-        const item = {
-          handle: HistoryEvents.AddElliptic,
-          elliptic: historyUtil.getDataForElliptic(elliptic),
-        };
-        this.currentData.elliptics.push(item);
-      } else {
-        const lastElliptic = this.lastData.elliptics[key];
-        if (!historyUtil.isDifferentForElliptics(elliptic, lastElliptic)) {
-          delete this.lastData.elliptics[key];
-          continue;
-        } else {
-          const item = {
-            handle: HistoryEvents.ModifyElliptic,
-            preElliptic: historyUtil.getDataForElliptic(lastElliptic),
-            curElliptic: historyUtil.getDataForElliptic(elliptic),
-          };
-          this.currentData.elliptics.push(item);
-        }
-      }
-      delete this.lastData.elliptics[key];
-    }
-
-    for (const key in this.lastData.elliptics) {
-      const item = {
-        handle: HistoryEvents.DeleteElliptic,
-        elliptic: historyUtil.getDataForElliptic(this.lastData.elliptics[key]),
-      };
-      this.currentData.elliptics.push(item);
-    }
-  }
-
   compareMagnifiers() {
     const magnifiers = dataService.getMagnifiers();
     this.currentData.magnifiers = [];

src/graphic/History/History.js

@@ -10,7 +10,6 @@ import { svgService } from "../Service/SVGService";
 import { roadPointService } from "../Service/RoadPointService";
 import { lineService } from "../Service/LineService";
 import { circleService } from "../Service/CircleService";
-import { ellipticService } from "../Service/EllipticService";
 import { pointService } from "../Service/PointService";
 import { edgeService } from "../Service/EdgeService";
 import { magnifierService } from "../Service/MagnifierService";
@@ -106,7 +105,6 @@ export default class History {
       this.goPreForCurvePoints(item.curvePoints);
       this.goPreForCurveLines(item.curveLines);
       this.goPreForCircles(item.circles);
-      this.goPreForElliptics(item.elliptics);
       this.goPreForTexts(item.texts);
       this.goPreForMagnifiers(item.magnifiers);
       this.goPreForSVGs(item.svgs);
@@ -239,28 +237,6 @@ export default class History {
     }
   }
 
-  goPreForElliptics(itemForElliptics) {
-    for (let i = 0; i < itemForElliptics.length; ++i) {
-      const item = itemForElliptics[i];
-      if (item.handle == HistoryEvents.AddElliptic) {
-        dataService.deleteElliptic(item.elliptic.id);
-      } else if (item.handle == HistoryEvents.DeleteElliptic) {
-        const preElliptic = item.elliptic;
-        let newElliptic = ellipticService.create(
-          preElliptic.center,
-          preElliptic.radiusX,
-          preElliptic.radiusY,
-          preElliptic.id
-        );
-        historyUtil.assignEllipticFromElliptic(newElliptic, preElliptic);
-      } else if (item.handle == HistoryEvents.ModifyElliptic) {
-        const preElliptic = item.preElliptic;
-        let currentElliptic = dataService.getElliptic(item.curElliptic.id);
-        historyUtil.assignEllipticFromElliptic(currentElliptic, preElliptic);
-      }
-    }
-  }
-
   goPreForTexts(itemForTexts) {
     for (let i = 0; i < itemForTexts.length; ++i) {
       const item = itemForTexts[i];
@@ -609,28 +585,6 @@ export default class History {
     }
   }
 
-  goNextForElliptics(itemForElliptics) {
-    for (let i = 0; i < itemForElliptics.length; ++i) {
-      const item = itemForElliptics[i];
-      if (item.handle == HistoryEvents.AddElliptic) {
-        const preElliptic = item.elliptic;
-        let newElliptic = ellipticService.create(
-          preElliptic.center,
-          preElliptic.radiusX,
-          preElliptic.radiusY,
-          preElliptic.id
-        );
-        historyUtil.assignEllipticFromElliptic(newElliptic, preElliptic);
-      } else if (item.handle == HistoryEvents.DeleteElliptic) {
-        dataService.deleteElliptic(item.elliptic.id);
-      } else if (item.handle == HistoryEvents.ModifyElliptic) {
-        const currentElliptic = item.curElliptic;
-        let preElliptic = dataService.getElliptic(item.preElliptic.id);
-        historyUtil.assignEllipticFromElliptic(preElliptic, currentElliptic);
-      }
-    }
-  }
-
   goNextForTexts(itemForTexts) {
     for (let i = 0; i < itemForTexts.length; ++i) {
       const item = itemForTexts[i];
@@ -782,14 +736,14 @@ export default class History {
   goNextForCurveRoadEdges(itemForCurveRoadEdges) {
     for (let i = 0; i < itemForCurveRoadEdges.length; ++i) {
       const item = itemForCurveRoadEdges[i];
- 
+
       if (item.handle == HistoryEvents.AddCurveRoadEdge) {
         let vCurveRoadEdge = curveEdgeService.create(
           item.curveRoadEdge.start,
           item.curveRoadEdge.end,
           item.curveRoadEdge.id,
           item.curveRoadEdge.parent,
-          item.curveRoadEdge.points,
+          item.curveRoadEdge.points
         );
         historyUtil.assignCurveRoadEdgeFromCurveRoadEdge(
           vCurveRoadEdge,
@@ -875,7 +829,6 @@ export default class History {
     historyService.redoHistoryRecord();
     const item = historyService.getHistoryRecord();
     if (item) {
- 
       stateService.clear();
 
       this.goNextForPoints(item.points);
@@ -883,7 +836,6 @@ export default class History {
       this.goNextForCurvePoints(item.curvePoints);
       this.goNextForCurveLines(item.curveLines);
       this.goNextForCircles(item.circles);
-      this.goNextForElliptics(item.elliptics);
       this.goNextForTexts(item.texts);
       this.goNextForMagnifiers(item.magnifiers);
       this.goNextForSVGs(item.svgs);

src/graphic/History/HistoryUtil.js

@@ -64,7 +64,8 @@ export default class HistoryUtil {
   isDifferentForCircles(circle1, circle2) {
     if (
       mathUtil.equalPoint(circle1.center, circle2.center) &&
-      circle1.radius == circle2.radius &&
+      circle1.radiusX == circle2.radiusX &&
+      circle1.radiusY == circle2.radiusY &&
       circle1.color == circle2.color
     ) {
       return false;
@@ -73,19 +74,6 @@ export default class HistoryUtil {
     }
   }
 
-  isDifferentForElliptics(elliptic1, elliptic2) {
-    if (
-      mathUtil.equalPoint(elliptic1.center, elliptic2.center) &&
-      elliptic1.radiusX == elliptic2.radiusX &&
-      elliptic1.radiusY == elliptic2.radiusY &&
-      elliptic1.color == elliptic2.color
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
   isDifferentForTexts(text1, text2) {
     if (
       mathUtil.equalPoint(text1.center, text2.center) &&
@@ -324,23 +312,13 @@ export default class HistoryUtil {
     const circleInfo = {};
     circleInfo.vectorId = circle1.vectorId;
     circleInfo.center = circle2.center;
-    circleInfo.radius = circle2.radius;
+    circleInfo.radiusX = circle2.radiusX;
+    circleInfo.radiusY = circle2.radiusY;
     circleInfo.points = JSON.parse(JSON.stringify(circle2.points));
     circleInfo.color = circle2.color;
     this.setCircleInfo(circleInfo);
   }
 
-  assignEllipticFromElliptic(elliptic1, elliptic2) {
-    const ellipticInfo = {};
-    ellipticInfo.vectorId = elliptic1.vectorId;
-    ellipticInfo.center = elliptic2.center;
-    ellipticInfo.radiusX = elliptic2.radiusX;
-    ellipticInfo.radiusY = elliptic2.radiusY;
-    ellipticInfo.points = JSON.parse(JSON.stringify(elliptic2.points));
-    ellipticInfo.color = elliptic2.color;
-    this.setEllipticInfo(ellipticInfo);
-  }
-
   assignTextFromText(text1, text2) {
     const textInfo = {};
     textInfo.vectorId = text1.vectorId;
@@ -576,26 +554,14 @@ export default class HistoryUtil {
     data.id = circle.vectorId;
     data.center = {};
     mathUtil.clonePoint(data.center, circle.center);
-    data.radius = circle.radius;
+    data.radiusX = circle.radiusX;
+    data.radiusY = circle.radiusY;
     data.points = circle.points;
     data.color = circle.color;
     data.type = circle.geoType;
     return data;
   }
 
-  getDataForElliptic(elliptic) {
-    const data = {};
-    data.id = elliptic.vectorId;
-    data.center = {};
-    mathUtil.clonePoint(data.center, elliptic.center);
-    data.radiusX = elliptic.radiusX;
-    data.radiusY = elliptic.radiusY;
-    data.points = elliptic.points;
-    data.color = elliptic.color;
-    data.type = elliptic.geoType;
-    return data;
-  }
-
   getDataForText(text) {
     const data = {};
     data.id = text.vectorId;
@@ -815,16 +781,6 @@ export default class HistoryUtil {
     return circle;
   }
 
-  setEllipticInfo(ellipticInfo) {
-    let elliptic = dataService.getElliptic(ellipticInfo.vectorId);
-    elliptic.center = ellipticInfo.center;
-    elliptic.radiusX = ellipticInfo.radiusX;
-    elliptic.radiusY = ellipticInfo.radiusY;
-    elliptic.color = ellipticInfo.color;
-    elliptic.points = ellipticInfo.points;
-    return elliptic;
-  }
-
   setTextInfo(textInfo) {
     let text = dataService.getText(textInfo.vectorId);
     text.vectorId = textInfo.vectorId;

src/graphic/Layer.js

@@ -14,7 +14,6 @@ import { addCrossRoad } from "./Controls/AddCrossRoad";
 import { addLine } from "./Controls/AddLine";
 import { addPoint } from "./Controls/AddPoint";
 import { addCircle } from "./Controls/AddCircle";
-import { addElliptic } from "./Controls/AddElliptic";
 import { addText } from "./Controls/AddText";
 import { addMagnifier } from "./Controls/AddMagnifier";
 import { addSVG } from "./Controls/AddSVG";
@@ -22,7 +21,6 @@ import { moveRoad } from "./Controls/MoveRoad";
 import { moveLine } from "./Controls/MoveLine";
 import { movePoint } from "./Controls/MovePoint";
 import { moveCircle } from "./Controls/MoveCircle";
-import { moveElliptic } from "./Controls/MoveElliptic";
 import { coordinate } from "./Coordinate";
 import Render from "./Renderer/Render";
 import { draw } from "./Renderer/Draw";
@@ -169,10 +167,6 @@ export default class Layer {
         stateService.setEventName(LayerEvents.AddingCircle);
         addCircle.setCenter(position);
         break;
-      case LayerEvents.AddElliptic:
-        stateService.setEventName(LayerEvents.AddingElliptic);
-        addElliptic.setCenter(position);
-        break;
       case LayerEvents.AddText:
         stateService.setEventName(LayerEvents.MoveText);
         addText.buildText(position);
@@ -511,20 +505,6 @@ export default class Layer {
         elementService.showPoint();
         this.showElementLine(position);
         break;
-      case LayerEvents.AddElliptic:
-        needAutoRedraw = true;
-        listenLayer.start(position);
-        if (listenLayer.modifyPoint) {
-          position = {
-            x: listenLayer.modifyPoint.x,
-            y: listenLayer.modifyPoint.y,
-          };
-        }
-        elementService.hideAll();
-        elementService.setPoint(position);
-        elementService.showPoint();
-        this.showElementLine(position);
-        break;
       case LayerEvents.AddingRoad:
         needAutoRedraw = true;
         listenLayer.start(position);
@@ -644,29 +624,6 @@ export default class Layer {
         elementService.showPoint();
         this.showElementLine(position);
         break;
-      case LayerEvents.AddingElliptic:
-        needAutoRedraw = true;
-        let exceptEllipticId = null;
-        if (addElliptic.newElliptic != null) {
-          exceptEllipticId = addElliptic.newElliptic.vectorId;
-        }
-        listenLayer.start(position, { exceptEllipticId: exceptEllipticId });
-        if (listenLayer.modifyPoint) {
-          position = {
-            x: listenLayer.modifyPoint.x,
-            y: listenLayer.modifyPoint.y,
-          };
-        }
-        if (addElliptic.newElliptic == null) {
-          addElliptic.buildElliptic(position);
-        } else {
-          addElliptic.updateElliptic(position);
-        }
-        elementService.hideAll();
-        elementService.setPoint(position);
-        elementService.showPoint();
-        this.showElementLine(position);
-        break;
       case LayerEvents.MoveRoad:
         needAutoRedraw = true;
         //只允许拖拽一条公路
@@ -899,31 +856,6 @@ export default class Layer {
           needAutoRedraw = true;
         }
         break;
-      case LayerEvents.MoveElliptic:
-        if (draggingItem != null) {
-          if (draggingItem.state == -1) {
-            moveElliptic.moveFull(
-              draggingItem.vectorId,
-              (dx * coordinate.defaultZoom) / coordinate.zoom,
-              (dy * coordinate.defaultZoom) / coordinate.zoom
-            );
-          } else if (
-            draggingItem.state == 0 ||
-            draggingItem.state == 1 ||
-            draggingItem.state == 2 ||
-            draggingItem.state == 3
-          ) {
-            moveElliptic.movePoint(
-              position,
-              draggingItem.vectorId,
-              draggingItem.state
-            );
-          } else {
-            debugger;
-          }
-          needAutoRedraw = true;
-        }
-        break;
       case LayerEvents.MoveText:
         needAutoRedraw = true;
         if (draggingItem != null) {
@@ -1104,13 +1036,6 @@ export default class Layer {
         this.history.save();
         elementService.hideAll();
         break;
-      case LayerEvents.AddingElliptic:
-        needAutoRedraw = true;
-        addElliptic.finish(position);
-        addElliptic.clear();
-        this.history.save();
-        elementService.hideAll();
-        break;
       case LayerEvents.MoveText:
         needAutoRedraw = true;
         this.history.save();
@@ -1198,10 +1123,6 @@ export default class Layer {
         needAutoRedraw = true;
         this.history.save();
         break;
-      case LayerEvents.MoveElliptic:
-        needAutoRedraw = true;
-        this.history.save();
-        break;
       case LayerEvents.AddPoint:
         if (
           Settings.selectBasePointId != null &&
@@ -1473,8 +1394,6 @@ export default class Layer {
           stateService.setEventName(LayerEvents.MoveCurveLine);
         } else if (selectItem.type == VectorType.Circle) {
           stateService.setEventName(LayerEvents.MoveCircle);
-        } else if (selectItem.type == VectorType.Elliptic) {
-          stateService.setEventName(LayerEvents.MoveElliptic);
         } else if (selectItem.type == VectorType.Text) {
           stateService.setEventName(LayerEvents.MoveText);
         } else if (selectItem.type == VectorType.Magnifier) {

src/graphic/ListenLayer.js

@@ -79,10 +79,6 @@ export default class ListenLayer {
       position,
       exceptVectorIds.exceptCircleId
     );
-    selectInfo.ellipticInfo = this.isSelectElliptic(
-      position,
-      exceptVectorIds.exceptEllipticId
-    );
     //交叉口拐弯处的控制点
     selectInfo.crossPointInfo = this.isSelectCrossCrossPoint(
       position,
@@ -383,69 +379,6 @@ export default class ListenLayer {
     return circleInfo;
   }
 
-  isSelectElliptic(position, exceptEllipticId) {
-    let ellipticInfo = {
-      ellipticId: null,
-      type: null,
-      distance: null,
-    };
-    const elliptics = dataService.getElliptics();
-    let distance;
-    for (const ellipticId in elliptics) {
-      if (ellipticId == exceptEllipticId) {
-        continue;
-      }
-      const elliptic = dataService.getElliptic(ellipticId);
-      for (let i = 0; i < elliptic.points.length; ++i) {
-        distance = this.getDistance(position, elliptic.points[i]);
-        if (distance < Constant.minAdsorbPix) {
-          ellipticInfo = {
-            ellipticId: ellipticId,
-            type: VectorType.Elliptic,
-            distance: distance,
-            x: elliptic.points[i].x,
-            y: elliptic.points[i].y,
-            index: i,
-          };
-          return ellipticInfo;
-        }
-      }
-
-      const distanceX = mathUtil.getDistance(
-        elliptic.points[2],
-        elliptic.points[3]
-      );
-      const distanceY = mathUtil.getDistance(
-        elliptic.points[0],
-        elliptic.points[1]
-      );
-      const flag = mathUtil.isPointInElliptic(
-        position,
-        elliptic.center,
-        distanceX,
-        distanceY
-      );
-      distance = this.getDistance(position, elliptic.center);
-      if (flag) {
-        if (
-          ellipticInfo.ellipticId == null ||
-          distance < ellipticInfo.distance
-        ) {
-          ellipticInfo = {
-            ellipticId: ellipticId,
-            type: VectorType.Elliptic,
-            distance: distance,
-            x: elliptic.center.x,
-            y: elliptic.center.y,
-            index: -1,
-          };
-        }
-      }
-    }
-
-    return ellipticInfo;
-  }
-
   isSelectRoadPoint(position, exceptRoadPointId) {
     let roadPointInfo = {
       roadPointId: null,
@@ -1165,12 +1098,6 @@ export default class ListenLayer {
       this.modifyPoint.index = info.circleInfo.index;
       this.modifyPoint.x = info.circleInfo.x;
       this.modifyPoint.y = info.circleInfo.y;
-    } else if (info && info.ellipticInfo.ellipticId) {
-      this.modifyPoint = {};
-      this.modifyPoint.linkedEllipticId = info.ellipticInfo.ellipticId;
-      this.modifyPoint.index = info.ellipticInfo.index;
-      this.modifyPoint.x = info.ellipticInfo.x;
-      this.modifyPoint.y = info.ellipticInfo.y;
     } else if (info && info.svgInfo.svgId) {
       this.modifyPoint = {};
       this.modifyPoint.svgId = info.svgInfo.svgId;
@@ -1339,12 +1266,6 @@ export default class ListenLayer {
         VectorType.Circle,
         this.modifyPoint.index
       );
-    } else if (this.modifyPoint.linkedEllipticId) {
-      stateService.setSelectItem(
-        this.modifyPoint.linkedEllipticId,
-        VectorType.Elliptic,
-        this.modifyPoint.index
-      );
     } else {
       stateService.clearSelectItem();
     }

src/graphic/Load.js

@@ -1,20 +1,20 @@
-import { dataService } from './Service/DataService.js';
-import { lineService } from './Service/LineService.js';
-import { pointService } from './Service/PointService.js';
-import { imageService } from './Service/ImageService.js';
-import VectorCategory from './enum/VectorCategory.js';
-import { coordinate } from './Coordinate.js';
-import Settings from './Settings';
-import { circleService } from './Service/CircleService.js';
-import { magnifierService } from './Service/MagnifierService.js';
-import { textService } from './Service/TextService.js';
-import { svgService } from './Service/SVGService.js';
-import { mathUtil } from './Util/MathUtil.js';
+import { dataService } from "./Service/DataService.js";
+import { lineService } from "./Service/LineService.js";
+import { pointService } from "./Service/PointService.js";
+import { imageService } from "./Service/ImageService.js";
+import VectorCategory from "./enum/VectorCategory.js";
+import { coordinate } from "./Coordinate.js";
+import Settings from "./Settings";
+import { circleService } from "./Service/CircleService.js";
+import { magnifierService } from "./Service/MagnifierService.js";
+import { textService } from "./Service/TextService.js";
+import { svgService } from "./Service/SVGService.js";
+import { mathUtil } from "./Util/MathUtil.js";
 
 export default class Load {
   constructor(layer) {
     this.layer = layer;
-    this.version = 'v1.0';
+    this.version = "v1.0";
     this.vectorsJson = null;
     this.newVectorId = null;
   }
@@ -23,7 +23,10 @@ export default class Load {
     this.layer.initLocation();
     if (dataLocal) {
       if (dataLocal.backgroundImg) {
-        let bgImg = imageService.createBackgroundImg(dataLocal.backgroundImg.src, dataLocal.backgroundImg.vectorId);
+        let bgImg = imageService.createBackgroundImg(
+          dataLocal.backgroundImg.src,
+          dataLocal.backgroundImg.vectorId
+        );
         bgImg.setCenter(dataLocal.backgroundImg.center);
         bgImg.setDisplay(dataLocal.backgroundImg.display);
         bgImg.setAngle(dataLocal.backgroundImg.angle);
@@ -36,7 +39,13 @@ export default class Load {
       }
       if (dataLocal.circles) {
         for (let key in dataLocal.circles) {
-          let circle = circleService.create(dataLocal.circles[key].center, dataLocal.circles[key].radius, key);
+          let circle = circleService.create(
+            dataLocal.circles[key].center,
+            dataLocal.circles[key].radius || dataLocal.circles[key].radiusX,
+            key
+          );
+          circle.setRadiusX(dataLocal.circles[key].radiusX);
+          circle.setRadiusY(dataLocal.circles[key].radiusY);
           circle.setPoints(dataLocal.circles[key].points);
           circle.setColor(dataLocal.circles[key].color);
           circle.setDisplay(dataLocal.circles[key].display);
@@ -44,7 +53,10 @@ export default class Load {
       }
       if (dataLocal.magnifiers) {
         for (let key in dataLocal.magnifiers) {
-          let magnifier = magnifierService.create(dataLocal.magnifiers[key].position, key);
+          let magnifier = magnifierService.create(
+            dataLocal.magnifiers[key].position,
+            key
+          );
           magnifier.setSrc(dataLocal.magnifiers[key].photoUrl);
           magnifier.setDisplay(dataLocal.magnifiers[key].display);
           try {
@@ -58,20 +70,31 @@ export default class Load {
         for (let key in dataLocal.points) {
           let point = pointService.create(dataLocal.points[key], key);
           point.setCategory(dataLocal.points[key].category);
-          point.setParent(JSON.parse(JSON.stringify(dataLocal.points[key].parent)));
+          point.setParent(
+            JSON.parse(JSON.stringify(dataLocal.points[key].parent))
+          );
           point.setDisplay(dataLocal.points[key].display);
         }
       }
       if (dataLocal.svgs) {
         for (let key in dataLocal.svgs) {
-          let svg = svgService.create(dataLocal.svgs[key].center, dataLocal.svgs[key].type, dataLocal.svgs[key].vectorId);
-          svg.setPoints(dataLocal.svgs[key].points)
+          let svg = svgService.create(
+            dataLocal.svgs[key].center,
+            dataLocal.svgs[key].type,
+            dataLocal.svgs[key].vectorId
+          );
+          svg.setPoints(dataLocal.svgs[key].points);
         }
       }
 
       if (dataLocal.lines) {
         for (let key in dataLocal.lines) {
-          let line = lineService.createByPointId(dataLocal.lines[key].startId, dataLocal.lines[key].endId, dataLocal.lines[key].category, key);
+          let line = lineService.createByPointId(
+            dataLocal.lines[key].startId,
+            dataLocal.lines[key].endId,
+            dataLocal.lines[key].category,
+            key
+          );
 
           if (dataLocal.lines[key].style) {
             line.setStyle(dataLocal.lines[key].style);
@@ -104,15 +127,18 @@ export default class Load {
           text.setAngle(dataLocal.texts[key].angle || 0);
         }
       }
-      if (dataLocal.hasOwnProperty('currentId')) {
+      if (dataLocal.hasOwnProperty("currentId")) {
         dataService.setCurrentId(dataLocal.currentId);
       }
-      if (dataLocal.hasOwnProperty('res')) {
+      if (dataLocal.hasOwnProperty("res")) {
         coordinate.setRes(dataLocal.res);
       }
     } else if (data3d) {
       if (data3d.backImage) {
-        let bgImg = imageService.createBackgroundImg(data3d.backImage, data3d.vectorId);
+        let bgImg = imageService.createBackgroundImg(
+          data3d.backImage,
+          data3d.vectorId
+        );
         bgImg.setCenter(coordinate.center);
         try {
           if (bgImg.src) {
@@ -129,13 +155,20 @@ export default class Load {
         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);
+            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 geometryBaseLine = mathUtil.createLine1(dataService.getPoint(baseLine.startId), dataService.getPoint(baseLine.endId));
+            const geometryBaseLine = mathUtil.createLine1(
+              dataService.getPoint(baseLine.startId),
+              dataService.getPoint(baseLine.endId)
+            );
             //文字要和基准线的方向一致
-            if (typeof geometryBaseLine.a != 'undefined') {
+            if (typeof geometryBaseLine.a != "undefined") {
               angle = Math.atan(geometryBaseLine.a);
-            } else if (geometryBaseLine.hasOwnProperty('x')) {
+            } else if (geometryBaseLine.hasOwnProperty("x")) {
               angle = Math.PI / 2;
             } else {
               angle = 0;
@@ -146,13 +179,19 @@ export default class Load {
           for (let i = 0; i < data3d.measures.length; ++i) {
             //理论上基准线只能有一条
             //
-            const line = lineService.create(this.getXY(width, height, data3d.measures[i].pos[0]), this.getXY(width, height, data3d.measures[i].pos[1]), VectorCategory.Line.MeasureLine);
+            const line = lineService.create(
+              this.getXY(width, height, data3d.measures[i].pos[0]),
+              this.getXY(width, height, data3d.measures[i].pos[1]),
+              VectorCategory.Line.MeasureLine
+            );
             line.value = data3d.measures[i].dis;
           }
         }
         if (data3d.basePoints) {
           for (let i = 0; i < data3d.basePoints.length; ++i) {
-            let point = pointService.create(this.getXY(width, height, data3d.basePoints[i]));
+            let point = pointService.create(
+              this.getXY(width, height, data3d.basePoints[i])
+            );
             point.setCategory(VectorCategory.Point.BasePoint);
           }
         }
@@ -162,9 +201,18 @@ export default class Load {
             //   this.getXY(width, height, data3d.fixPoints[i].pos)
             // );
             // point.setCategory(VectorCategory.Point.FixPoint);
-            console.log('001-fixPoints-' + i + ':' + JSON.stringify(data3d.fixPoints[i].pos));
-            let text = textService.create(this.getXY(width, height, data3d.fixPoints[i].pos));
-            console.log('002-fixPoints-' + i + ':' + JSON.stringify(text.center));
+            console.log(
+              "001-fixPoints-" +
+                i +
+                ":" +
+                JSON.stringify(data3d.fixPoints[i].pos)
+            );
+            let text = textService.create(
+              this.getXY(width, height, data3d.fixPoints[i].pos)
+            );
+            console.log(
+              "002-fixPoints-" + i + ":" + JSON.stringify(text.center)
+            );
             text.setValue(data3d.fixPoints[i].text);
             text.setAngle(angle);
           }
@@ -197,6 +245,6 @@ export default class Load {
   // 退出页面清除缓存及其他操作
   clear() {
     this.layer.uiControl.menu_clear();
-    console.warn('clear');
+    console.warn("clear");
   }
 }

src/graphic/Renderer/Render.js

@@ -57,9 +57,6 @@ export default class Render {
       case VectorType.Circle:
         draw.drawCircle(vector);
         break;
-      case VectorType.Elliptic:
-        draw.drawCircle(vector);
-        break;
       case VectorType.Magnifier:
         draw.drawMagnifier(vector);
         break;
@@ -165,11 +162,6 @@ export default class Render {
       this.drawGeometry(circles[key]);
     }
 
-    const elliptics = dataService.getElliptics();
-    for (const key in elliptics) {
-      this.drawGeometry(elliptics[key]);
-    }
-
     const texts = dataService.getTexts();
     for (const key in texts) {
       this.drawGeometry(texts[key]);

src/graphic/Service/CircleService.js

@@ -26,6 +26,16 @@ export default class CircleService {
     newCircle.setColor(circle.color);
     return newCircle;
   }
+
+  updateRadiusXYForPoint(vectorId, pointIndex) {
+    let circle = dataService.getCircle(vectorId);
+    const radiusX = Math.abs(circle.points[pointIndex].x - circle.center.x);
+    const radiusY = Math.abs(circle.points[pointIndex].y - circle.center.y);
+    return {
+      radiusX: radiusX,
+      radiusY: radiusY,
+    };
+  }
 }
 
 const circleService = new CircleService();

src/graphic/Service/DataService.js

@@ -77,7 +77,6 @@ export class DataService {
     this.vectorData.points = {};
     this.vectorData.curvePoints = {};
     this.vectorData.circles = {};
-    this.vectorData.elliptics = {};
     //基准点
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};
@@ -209,23 +208,6 @@ export class DataService {
     delete this.vectorData.circles[circleId];
   }
 
-  //椭圆
-  getElliptics() {
-    return this.vectorData.elliptics;
-  }
-
-  getElliptic(ellipticId) {
-    return this.vectorData.elliptics[ellipticId];
-  }
-
-  addElliptic(elliptic) {
-    this.vectorData.elliptics[elliptic.vectorId] = elliptic;
-  }
-
-  deleteElliptic(ellipticId) {
-    delete this.vectorData.elliptics[ellipticId];
-  }
-
   //弯曲线条
   addCurveLine(curveLine) {
     this.vectorData.curvelines[curveLine.vectorId] = curveLine;
@@ -595,7 +577,6 @@ export class DataService {
     this.vectorData.points = {};
     this.vectorData.curvePoints = {};
     this.vectorData.circles = {};
-    this.vectorData.elliptics = {};
     //基准点
     this.vectorData.basePointIds = [];
     this.vectorData.texts = {};

src/graphic/Service/EllipticService.js

@@ -1,37 +0,0 @@
-import Point from "../Geometry/Point.js";
-import Elliptic from "../Geometry/Elliptic.js";
-import { dataService } from "./DataService.js";
-import { uiService } from "./UIService.js";
-import VectorCategory from "../enum/VectorCategory.js";
-import { mathUtil } from "../Util/MathUtil.js";
-import Constant from "../Constant.js";
-
-export default class EllipticService {
-  constructor() {}
-
-  create(center, radiusX, radiusY, vectorId) {
-    if (
-      !center ||
-      !radiusX ||
-      radiusX < Constant.minAdsorbPix / 2 ||
-      !radiusY ||
-      radiusY < Constant.minAdsorbPix / 2
-    ) {
-      return null;
-    }
-    let elliptic = new Elliptic(center, radiusX, radiusY, vectorId);
-    dataService.addElliptic(elliptic);
-    return elliptic;
-  }
-
-  copy(vectorId) {
-    let elliptic = dataService.getElliptic(vectorId);
-    let center = uiService.getNewPositionForPop(elliptic.center);
-    let newElliptic = this.create(center, elliptic.radiusX, elliptic.radiusY);
-    newElliptic.setColor(elliptic.color);
-    return newElliptic;
-  }
-}
-
-const ellipticService = new EllipticService();
-export { ellipticService };

src/graphic/enum/HistoryEvents.js

@@ -35,10 +35,6 @@ const HistoryEvents = {
   DeleteCircle: "deleteCircle",
   ModifyCircle: "modifyCircle",
 
-  AddElliptic: "addElliptic",
-  DeleteElliptic: "deleteElliptic",
-  ModifyElliptic: "modifyElliptic",
-
   AddMagnifier: "addMagnifier",
   DeleteMagnifier: "deleteMagnifier",
   ModifyMagnifier: "modifyMagnifier",

src/graphic/enum/LayerEvents.js

@@ -23,10 +23,6 @@ const LayerEvents = {
   AddingCircle: "addingCircle",
   MoveCircle: "moveCircle",
 
-  AddElliptic: "addElliptic",
-  AddingElliptic: "addingElliptic",
-  MoveElliptic: "moveElliptic",
-
   MoveCrossPoint: "moveCrossPoint",
   MoveEdge: "moveEdge",
   MoveCurveEdge: "moveCurveEdge",

src/graphic/enum/UIEvents.js

@@ -7,10 +7,8 @@ const UIEvents = {
   Line: "line",
   // 画曲线
   CurveLine: "Curveline",
-  // 画圆
+  // 画圆/椭圆
   Circle: "Circle",
-  // 画椭圆
-  Elliptic: "Elliptic",
   // 图例
   Img: "backgroundImage",
   // 箭头
@@ -54,7 +52,6 @@ const UIEvents = {
   // 双向三车道直路
   TwoEdgeThreeLanRoad: "TwoEdgeThreeLanRoad",
 
-
   // ------------控制方法----------
   // 回退
   GoBack: "GoBack",

src/graphic/enum/VectorType.js

@@ -1,7 +1,6 @@
 const VectorType = {
   CrossPoint: "CrossPoint",
   Circle: "Circle",
-  Elliptic: "Elliptic",
   Img: "Img",
   Point: "Point",
   Line: "Line",