SGraphyPolygonItem.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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 = 0;
  42. _this.isBusiness = 1;
  43. _this.cacheColor = SColor.Black; //需要缓存的边框
  44. _this.cacheFillColor = new SColor('#F2F6FC'); //需要缓存的填充色
  45. _this.cacheWidth = 0;
  46. // 修改绘制路径格式
  47. var newSpacePaths = PolygonItemData.space.Paths[0].map(function (item) {
  48. return new SPoint(item.X, -item.Y);
  49. });
  50. _this.pointArr = newSpacePaths;
  51. // // 填充色
  52. PolygonItemData.fillColor ? _this.fillColor = PolygonItemData.fillColor : _this.fillColor = new SColor('#F2F6FC');
  53. // 边框色
  54. PolygonItemData.color ? _this.color = PolygonItemData.color : _this.color = SColor.Black;
  55. //边框宽度
  56. PolygonItemData.width ? _this.width = PolygonItemData.width : _this.width = 0;
  57. //中心点
  58. _this.centerOfGravityPoint = {
  59. x: PolygonItemData.space.LocationPoint.X,
  60. y: PolygonItemData.space.LocationPoint.Y
  61. };
  62. //业务空间类型
  63. PolygonItemData.isBusiness ? _this.isBusiness = PolygonItemData.isBusiness : _this.isBusiness = 1;
  64. //业务空间id
  65. PolygonItemData.businessId ? _this.businessId = PolygonItemData.businessId : _this.businessId = null;
  66. //业务空间名称
  67. _this.businessName = PolygonItemData.space.Name;
  68. _this.initName = PolygonItemData.space.Name;
  69. // 空间id
  70. _this.id = PolygonItemData.space.id;
  71. return _this;
  72. }
  73. /**
  74. * Item对象边界区域
  75. *
  76. * @return SRect
  77. */
  78. SGraphyPolygonItem.prototype.boundingRect = function () {
  79. var minX = this.pointArr[0].x;
  80. var maxX = minX;
  81. var minY = this.pointArr[0].y;
  82. var maxY = minY;
  83. for (var i = 1; i < this.pointArr.length; i++) {
  84. if (this.pointArr[i].x < minX) {
  85. minX = this.pointArr[i].x;
  86. }
  87. if (this.pointArr[i].y < minY) {
  88. minY = this.pointArr[i].y;
  89. }
  90. if (this.pointArr[i].x > maxX) {
  91. maxX = this.pointArr[i].x;
  92. }
  93. if (this.pointArr[i].y > maxY) {
  94. maxY = this.pointArr[i].y;
  95. }
  96. }
  97. return new SRect(minX, minY, maxX - minX, maxY - minY);
  98. }; // Function boundingRect()
  99. /**
  100. * 判断点是否在区域内
  101. *
  102. * @param x
  103. * @param y
  104. */
  105. SGraphyPolygonItem.prototype.contains = function (x, y) {
  106. var nCross = 0, point = [x, y], APoints = this.pointArr, length = APoints.length, p1, p2, i, xinters;
  107. p1 = APoints[0];
  108. for (i = 1; i <= length; i++) {
  109. p2 = APoints[i % length];
  110. if (point[0] > Math.min(p1.x, p2.x) &&
  111. point[0] <= Math.max(p1.x, p2.x)) {
  112. if (point[1] <= Math.max(p1.y, p2.y)) {
  113. if (p1.x != p2.x) {
  114. //计算位置信息
  115. xinters = (point[0] - p1.x) * (p2.y - p1.y) / (p2.x - p1.x) + p1.y;
  116. if (p1.y == p2.y || point[1] <= xinters) {
  117. nCross++;
  118. }
  119. }
  120. }
  121. }
  122. p1 = p2;
  123. }
  124. return nCross % 2 === 1;
  125. };
  126. /**
  127. * Item绘制操作
  128. *
  129. * @param painter painter对象
  130. * @param rect 绘制区域
  131. */
  132. SGraphyPolygonItem.prototype.onDraw = function (painter, rect) {
  133. if (this.pointArr.length) {
  134. painter.pen.color = this.color;
  135. painter.brush.color = this.fillColor;
  136. painter.pen.lineWidth = this.width;
  137. painter.drawPolygon(this.pointArr);
  138. var text = '';
  139. if (this.businessName || this.businessId) {
  140. text = '👇 ' + this.businessName;
  141. }
  142. else {
  143. text = '⬇️ ' + this.initName;
  144. }
  145. painter.font.size = this.scale * 200;
  146. painter.brush.color = SColor.Black;
  147. painter.drawText(text, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y);
  148. }
  149. };
  150. SGraphyPolygonItem.prototype.onClick = function (event) {
  151. this.$emit('click', { item: this, event: event });
  152. return true;
  153. }; // Function onClick()
  154. /**
  155. * 鼠标双击事件
  156. *
  157. * @param event 保存事件参数
  158. * @return boolean
  159. */
  160. SGraphyPolygonItem.prototype.onDoubleClick = function (event) {
  161. this.$emit('doubleClick', { item: this, event: event });
  162. return true;
  163. };
  164. /**
  165. * 鼠标按下事件
  166. *
  167. * @param event 保存事件参数
  168. * @return boolean
  169. */
  170. SGraphyPolygonItem.prototype.onMouseDown = function (event) {
  171. this.$emit('mouseDown', { item: this, event: event });
  172. return true;
  173. }; // Function onMouseDown()
  174. /**
  175. * 鼠标移动事件
  176. *
  177. * @param event 保存事件参数
  178. * @return boolean
  179. */
  180. SGraphyPolygonItem.prototype.onMouseMove = function (event) {
  181. this.$emit('mouseMove', { item: this, event: event });
  182. return true;
  183. }; // Function onMouseMove()
  184. /**
  185. * 释放鼠标事件
  186. *
  187. * @param event 保存事件参数
  188. * @return boolean
  189. */
  190. SGraphyPolygonItem.prototype.onMouseUp = function (event) {
  191. this.$emit('mouseUp', { item: this, event: event });
  192. return true;
  193. };
  194. return SGraphyPolygonItem;
  195. }(SGraphyItem)); // Class SGraphyPolygonItem
  196. export { SGraphyPolygonItem };