SGraphyPolygonItem.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = function (d, b) {
  3. extendStatics = Object.setPrototypeOf ||
  4. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  5. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  6. return extendStatics(d, b);
  7. };
  8. return function (d, b) {
  9. extendStatics(d, b);
  10. function __() { this.constructor = d; }
  11. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  12. };
  13. })();
  14. import { SGraphyItem } from '@sybotan-web/graphy';
  15. import { SRect, SPoint } from "@sybotan-web/base";
  16. import { SColor } from "@sybotan-web/draw";
  17. /**
  18. * 不规则多边形Item类
  19. *
  20. */
  21. var SGraphyPolygonItem = /** @class */ (function (_super) {
  22. __extends(SGraphyPolygonItem, _super);
  23. // actived: boolean = false; //是否激活
  24. /**
  25. * 构造函数
  26. *
  27. * @param pointArr 点坐标list
  28. * @param width 边框的宽度
  29. * @param color 边框的颜色
  30. * @param fillColor 多边形填充的颜色
  31. * @param businessId 空间id
  32. * @param businessName 空间名称
  33. * @param centerOfGravityPoint 中心点
  34. * @param isBusiness 状态
  35. * @param parent
  36. */
  37. function SGraphyPolygonItem(PolygonItemData) {
  38. var _this = _super.call(this, PolygonItemData.parent) || this;
  39. _this.fillColor = new SColor('#F2F6FC');
  40. _this.color = SColor.Black;
  41. _this.width = 200;
  42. _this.viewText = ''; //绘出的文案
  43. _this.isBusiness = 1;
  44. _this.cacheColor = SColor.Black; //需要缓存的边框
  45. _this.cacheFillColor = new SColor('#F2F6FC'); //需要缓存的填充色
  46. _this.cacheWidth = 100;
  47. _this.businessType = ''; //类型
  48. // 修改绘制路径格式
  49. var newSpacePaths = PolygonItemData.space.Paths[0].map(function (item) {
  50. return new SPoint(item.X, item.Y);
  51. });
  52. _this.pointArr = newSpacePaths;
  53. // 填充色
  54. _this.fillColor = PolygonItemData.space.fillColor ? PolygonItemData.space.fillColor : new SColor('#F2F6FC');
  55. // 边框色
  56. _this.color = PolygonItemData.space.color ? PolygonItemData.space.color : SColor.Black;
  57. //边框宽度
  58. _this.width = PolygonItemData.space.width ? PolygonItemData.space.width : 100;
  59. //中心点
  60. _this.centerOfGravityPoint = {
  61. x: PolygonItemData.space.LocationPoint.X,
  62. y: -PolygonItemData.space.LocationPoint.Y
  63. };
  64. //业务空间类型
  65. _this.isBusiness = PolygonItemData.space.isBusiness ? PolygonItemData.space.isBusiness : 1;
  66. //业务空间id
  67. _this.businessId = PolygonItemData.space.businessId ? PolygonItemData.space.businessId : null;
  68. //业务空间名称
  69. _this.businessName = PolygonItemData.space.Name;
  70. _this.initName = PolygonItemData.space.Name;
  71. // 空间id
  72. _this.id = PolygonItemData.space.id;
  73. _this.viewText = PolygonItemData.space.Name;
  74. //类型
  75. _this.businessType = PolygonItemData.businessType ? PolygonItemData.businessType : '';
  76. return _this;
  77. }
  78. /**
  79. * Item对象边界区域
  80. *
  81. * @return SRect
  82. */
  83. SGraphyPolygonItem.prototype.boundingRect = function () {
  84. var minX = this.pointArr[0].x;
  85. var maxX = minX;
  86. var minY = this.pointArr[0].y;
  87. var maxY = minY;
  88. for (var i = 1; i < this.pointArr.length; i++) {
  89. if (this.pointArr[i].x < minX) {
  90. minX = this.pointArr[i].x;
  91. }
  92. if (this.pointArr[i].y < minY) {
  93. minY = this.pointArr[i].y;
  94. }
  95. if (this.pointArr[i].x > maxX) {
  96. maxX = this.pointArr[i].x;
  97. }
  98. if (this.pointArr[i].y > maxY) {
  99. maxY = this.pointArr[i].y;
  100. }
  101. }
  102. return new SRect(minX, minY, maxX - minX, maxY - minY);
  103. }; // Function boundingRect()
  104. /**
  105. * 判断点是否在区域内
  106. *
  107. * @param x
  108. * @param y
  109. */
  110. SGraphyPolygonItem.prototype.contains = function (x, y) {
  111. var nCross = 0, point = [x, y], APoints = this.pointArr, length = APoints.length, p1, p2, i, xinters;
  112. p1 = APoints[0];
  113. for (i = 1; i <= length; i++) {
  114. p2 = APoints[i % length];
  115. if (point[0] > Math.min(p1.x, p2.x) &&
  116. point[0] <= Math.max(p1.x, p2.x)) {
  117. if (point[1] <= Math.max(p1.y, p2.y)) {
  118. if (p1.x != p2.x) {
  119. //计算位置信息
  120. xinters = (point[0] - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
  121. if (p1.y == p2.y || point[1] <= xinters) {
  122. nCross++;
  123. }
  124. }
  125. }
  126. }
  127. p1 = p2;
  128. }
  129. return nCross % 2 === 1;
  130. };
  131. /**
  132. *
  133. * @param text 修改的文字
  134. * @param centerOfGravityPoint 文字的坐标
  135. */
  136. SGraphyPolygonItem.prototype.addText = function (text, centerOfGravityPoint) {
  137. this.viewText = text;
  138. if (centerOfGravityPoint) {
  139. this.centerOfGravityPoint = centerOfGravityPoint;
  140. }
  141. };
  142. /**
  143. * Item绘制操作
  144. *
  145. * @param painter painter对象
  146. * @param rect 绘制区域
  147. */
  148. SGraphyPolygonItem.prototype.onDraw = function (painter, rect) {
  149. if (this.pointArr.length) {
  150. painter.pen.color = this.color;
  151. painter.brush.color = this.fillColor;
  152. painter.pen.lineWidth = this.width;
  153. painter.drawPolygon(this.pointArr);
  154. // let text = ''
  155. // if (this.businessName || this.businessId) {
  156. // text = '👇 ' + this.businessName
  157. // } else {
  158. // text = '⬇️ ' + this.initName
  159. // }
  160. painter.font.size = this.scale * 200;
  161. painter.brush.color = SColor.Black;
  162. // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
  163. painter.drawText(this.viewText, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y);
  164. }
  165. };
  166. SGraphyPolygonItem.prototype.onClick = function (event) {
  167. this.$emit('click', { item: this, event: event });
  168. return true;
  169. }; // Function onClick()
  170. /**
  171. * 鼠标双击事件
  172. *
  173. * @param event 保存事件参数
  174. * @return boolean
  175. */
  176. SGraphyPolygonItem.prototype.onDoubleClick = function (event) {
  177. this.$emit('doubleClick', event);
  178. return true;
  179. };
  180. /**
  181. * 鼠标按下事件
  182. *
  183. * @param event 保存事件参数
  184. * @return boolean
  185. */
  186. SGraphyPolygonItem.prototype.onMouseDown = function (event) {
  187. this.$emit('mouseDown', event);
  188. return true;
  189. }; // Function onMouseDown()
  190. /**
  191. * 鼠标移动事件
  192. *
  193. * @param event 保存事件参数
  194. * @return boolean
  195. */
  196. SGraphyPolygonItem.prototype.onMouseMove = function (event) {
  197. this.$emit('mouseMove', event);
  198. return true;
  199. }; // Function onMouseMove()
  200. /**
  201. * 释放鼠标事件
  202. *
  203. * @param event 保存事件参数
  204. * @return boolean
  205. */
  206. SGraphyPolygonItem.prototype.onMouseUp = function (event) {
  207. this.$emit('mouseUp', event);
  208. return true;
  209. };
  210. return SGraphyPolygonItem;
  211. }(SGraphyItem)); // Class SGraphyPolygonItem
  212. export default SGraphyPolygonItem;