SGraphyPolygonItem.ts 6.1 KB

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