SVG.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import VectorType from "../enum/VectorType.js";
  2. import Geometry from "./Geometry.js";
  3. import { mathUtil } from "../Util/MathUtil.js";
  4. import { coordinate } from "../Coordinate.js";
  5. import Constant from "../Constant.js";
  6. import VectorCategory from "../enum/VectorCategory";
  7. import RoadStructure from "../enum/RoadStructure";
  8. import SVGType from "../enum/SVGType";
  9. //const sideWidth = 10;
  10. export default class SVG extends Geometry {
  11. constructor(center, type, vectorId) {
  12. super();
  13. this.category = null;
  14. this.center = center;
  15. this.points = null; //包裹的矩形的四个顶点,顺时针。0-1是width,1-3是height
  16. this.angle = 0; //逆时针为负,顺时针为正。单位是:°
  17. this.type = type;
  18. this.geoType = VectorType.SVG;
  19. this.scaleLength = this.getScale();
  20. this.scaleWidth = this.getScale();
  21. this.setBoundingVertexs();
  22. this.setId(vectorId);
  23. this.checkCategory(type);
  24. }
  25. // createDefaultPoints() {
  26. // this.points = [];
  27. // this.points[0] = {
  28. // x: this.center.x - sideWidth / 2,
  29. // y: this.center.y + sideWidth / 2,
  30. // };
  31. // this.points[1] = {
  32. // x: this.center.x + sideWidth / 2,
  33. // y: this.center.y + sideWidth / 2,
  34. // };
  35. // this.points[2] = {
  36. // x: this.center.x + sideWidth / 2,
  37. // y: this.center.y - sideWidth / 2,
  38. // };
  39. // this.points[3] = {
  40. // x: this.center.x - sideWidth / 2,
  41. // y: this.center.y - sideWidth / 2,
  42. // };
  43. // }
  44. checkCategory(type) {
  45. // this.setCategory()
  46. let category = "";
  47. if (RoadStructure[type]) {
  48. category = VectorCategory.SVG["RoadStructure"];
  49. } else if (SVGType[type]) {
  50. category = VectorCategory.SVG["SVG"];
  51. }
  52. this.setCategory(category);
  53. }
  54. setCategory(value) {
  55. this.category = value;
  56. }
  57. setBoundingVertexs() {
  58. this.points = [];
  59. const rec = this.getLengthWidth();
  60. const length = this.scaleLength * rec.length;
  61. const width = this.scaleWidth * rec.width;
  62. const minX = this.center.x - length / 2;
  63. const minY = this.center.y - width / 2;
  64. const maxX = this.center.x + length / 2;
  65. const maxY = this.center.y + width / 2;
  66. const point1 = this.rotatePoint(
  67. {
  68. x: minX,
  69. y: maxY,
  70. },
  71. this.center,
  72. this.angle
  73. );
  74. const point2 = this.rotatePoint(
  75. {
  76. x: maxX,
  77. y: maxY,
  78. },
  79. this.center,
  80. this.angle
  81. );
  82. const point3 = this.rotatePoint(
  83. {
  84. x: maxX,
  85. y: minY,
  86. },
  87. this.center,
  88. this.angle
  89. );
  90. const point4 = this.rotatePoint(
  91. {
  92. x: minX,
  93. y: minY,
  94. },
  95. this.center,
  96. this.angle
  97. );
  98. this.points.push(point1);
  99. this.points.push(point2);
  100. this.points.push(point3);
  101. this.points.push(point4);
  102. }
  103. setPoints(points) {
  104. this.points = points;
  105. }
  106. // setLengthScale(scale1) {
  107. // this.scaleLength = scale1;
  108. // }
  109. // setWidthScale(scale2) {
  110. // this.scaleWidth = scale2;
  111. // }
  112. //不同图例,缩放比不一样
  113. getScale() {
  114. return 1;
  115. }
  116. setBoundingVertexs2(position, pointIndex) {
  117. if (mathUtil.getDistance(position, this.center) < Constant.minAdsorbPix) {
  118. return;
  119. }
  120. mathUtil.clonePoint(this.points[pointIndex], position);
  121. // 【注意】angle 逆时针为正,顺时针为负
  122. let nextIndex = this.getNextIndex(pointIndex);
  123. this.points[nextIndex] = this.rotatePoint(position, this.center, 90);
  124. nextIndex = this.getNextIndex(nextIndex);
  125. this.points[nextIndex] = this.rotatePoint(position, this.center, 180);
  126. nextIndex = this.getNextIndex(nextIndex);
  127. this.points[nextIndex] = this.rotatePoint(position, this.center, 270);
  128. }
  129. getPreIndex(index) {
  130. let preIndex = index - 1;
  131. if (preIndex < 0) {
  132. preIndex = preIndex + 4;
  133. }
  134. return preIndex;
  135. }
  136. getNextIndex(index) {
  137. let nextIndex = index + 1;
  138. if (nextIndex > 3) {
  139. nextIndex = nextIndex - 4;
  140. }
  141. return nextIndex;
  142. }
  143. getLengthWidth() {
  144. return {
  145. length: 100,
  146. width: 100,
  147. };
  148. }
  149. //变更顺序
  150. resetPointsIndex() {
  151. const point0 = JSON.parse(JSON.stringify(this.points[1]));
  152. const point1 = JSON.parse(JSON.stringify(this.points[2]));
  153. const point2 = JSON.parse(JSON.stringify(this.points[3]));
  154. const point3 = JSON.parse(JSON.stringify(this.points[0]));
  155. this.points[0] = point0;
  156. this.points[1] = point1;
  157. this.points[2] = point2;
  158. this.points[3] = point3;
  159. }
  160. }