SGraphyPolygonItem.ts 5.6 KB

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