WallItem.ts 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. /*
  2. * ********************************************************************************************************************
  3. *
  4. * :*$@@%$*: ;: ;; ;;
  5. * :@@%! :!@@%: %! ;%%@@%$ =@@@@@@@%; @%@@@%%%%@@@@@
  6. * :@%; :$= %%$$$%$$ ;$$ ;$@= !@$
  7. * =@! %! @ $=;% !@@@%: !$$$$$$$$$$$$$$=
  8. * =@* %! @ $= % %@= =%@! %=
  9. * *$%%! @@= ;=$%%%$*: %! @ $= % =%%%%%%@$ *%: =%
  10. * %@@!: !@@@%=$@@@@%! :*@@$: %! @ $= % $* ;@ @* :%*
  11. * ;@@! ;!!!;: ;@%: =======@%========* @ $$ % $%*****$@ :@$=*********=@$
  12. * $@* ;@@@%=!: *@*
  13. * =@$ ;;;!=%@@@@=! =@!
  14. * %@$: =@%: :*@@@* %@= Copyright (c) 2016-2019. 北京上格云技术有限公司
  15. * ;%@@$=$@@%* *@@@$=%@@%;
  16. * ::;:: ::;:: All rights reserved.
  17. *
  18. * ********************************************************************************************************************
  19. */
  20. import { SGraphyItem, SMouseEvent } from "@sybotan-web/graphy/lib";
  21. import { SColor, SPainter, SPoint, SRect } from "@sybotan-web/draw/lib";
  22. class PolygonItemInterface {
  23. space: any;
  24. parent: SGraphyItem | undefined;
  25. }
  26. /**
  27. * 墙item
  28. *
  29. * @author 郝建龙
  30. */
  31. export class WallItem extends SGraphyItem {
  32. /** 点坐标list */
  33. pointArr: SPoint[];
  34. /** 填充色 */
  35. fillColor: SColor = new SColor("#F2F6FC");
  36. /** 边框色 */
  37. color: SColor = SColor.Black;
  38. /** 边框宽度 */
  39. width: number = 200;
  40. /** 墙id */
  41. id: string;
  42. /** 中心坐标 */
  43. centerOfGravityPoint: { x: number; y: number };
  44. /** 墙名称 */
  45. initName: null | string | undefined;
  46. /** 绘制文案 */
  47. viewText: string = "";
  48. /** 需要缓存的边框颜色 */
  49. cacheColor: SColor = SColor.Black;
  50. /** 需要缓存的填充色 */
  51. cacheFillColor: SColor = new SColor("#F2F6FC");
  52. /** 需要缓存的边框宽度 */
  53. cacheWidth: number = 100;
  54. /** 是否激活 */
  55. actived: boolean = false;
  56. /**
  57. * 构造函数
  58. *
  59. * @param PolygonItemData
  60. */
  61. constructor(PolygonItemData: PolygonItemInterface) {
  62. super(PolygonItemData.parent);
  63. // 修改绘制路径格式
  64. let newSpacePaths: SPoint[] = PolygonItemData.space.Paths[0].map(
  65. (item: SPoint) => {
  66. return new SPoint(item.x, item.y);
  67. }
  68. );
  69. this.pointArr = newSpacePaths;
  70. // 填充色
  71. this.fillColor = PolygonItemData.space.fillColor
  72. ? PolygonItemData.space.fillColor
  73. : new SColor("#F2F6FC");
  74. // 边框色
  75. this.color = PolygonItemData.space.color
  76. ? PolygonItemData.space.color
  77. : SColor.Black;
  78. //边框宽度
  79. this.width = PolygonItemData.space.width
  80. ? PolygonItemData.space.width
  81. : 100;
  82. //中心点
  83. this.centerOfGravityPoint = {
  84. x: PolygonItemData.space.LocationPoint.X,
  85. y: -PolygonItemData.space.LocationPoint.Y
  86. };
  87. this.initName = PolygonItemData.space.Name;
  88. this.id = PolygonItemData.space.id;
  89. this.viewText = PolygonItemData.space.Name;
  90. }
  91. /**
  92. * Item对象边界区域
  93. *
  94. * @return SRect
  95. */
  96. boundingRect(): SRect {
  97. let minX = this.pointArr[0].x;
  98. let maxX = minX;
  99. let minY = this.pointArr[0].y;
  100. let maxY = minY;
  101. for (let i = 1; i < this.pointArr.length; i++) {
  102. if (this.pointArr[i].x < minX) {
  103. minX = this.pointArr[i].x;
  104. }
  105. if (this.pointArr[i].y < minY) {
  106. minY = this.pointArr[i].y;
  107. }
  108. if (this.pointArr[i].x > maxX) {
  109. maxX = this.pointArr[i].x;
  110. }
  111. if (this.pointArr[i].y > maxY) {
  112. maxY = this.pointArr[i].y;
  113. }
  114. }
  115. return new SRect(minX, minY, maxX - minX, maxY - minY);
  116. } // Function boundingRect()
  117. /**
  118. * 判断点是否在区域内
  119. *
  120. * @param x
  121. * @param y
  122. */
  123. contains(x: number, y: number): boolean {
  124. let nCross = 0,
  125. point = [x, y],
  126. APoints = this.pointArr,
  127. length = APoints.length,
  128. p1,
  129. p2,
  130. i,
  131. xinters;
  132. p1 = APoints[0];
  133. for (i = 1; i <= length; i++) {
  134. p2 = APoints[i % length];
  135. if (
  136. point[0] > Math.min(p1.x, p2.x) &&
  137. point[0] <= Math.max(p1.x, p2.x)
  138. ) {
  139. if (point[1] <= Math.max(p1.y, p2.y)) {
  140. if (p1.x != p2.x) {
  141. //计算位置信息
  142. xinters =
  143. ((point[0] - p1.x) * (p2.y - p1.y)) /
  144. (p2.x - p1.x) +
  145. p1.y;
  146. if (p1.y == p2.y || point[1] <= xinters) {
  147. nCross++;
  148. }
  149. }
  150. }
  151. }
  152. p1 = p2;
  153. }
  154. return nCross % 2 === 1;
  155. }
  156. /**
  157. *
  158. * @param text 修改的文字
  159. * @param centerOfGravityPoint 文字的坐标
  160. */
  161. addText(text: string, centerOfGravityPoint?: { x: number; y: number }) {
  162. this.viewText = text;
  163. if (centerOfGravityPoint) {
  164. this.centerOfGravityPoint = centerOfGravityPoint;
  165. }
  166. }
  167. /**
  168. * Item绘制操作
  169. *
  170. * @param painter painter对象
  171. * @param rect 绘制区域
  172. */
  173. onDraw(painter: SPainter, rect?: SRect): void {
  174. if (this.pointArr.length) {
  175. painter.pen.color = this.color;
  176. painter.brush.color = this.fillColor;
  177. painter.pen.lineWidth = this.width;
  178. painter.drawPolygon(this.pointArr);
  179. // let text = ''
  180. // if (this.businessName || this.businessId) {
  181. // text = '👇 ' + this.businessName
  182. // } else {
  183. // text = '⬇️ ' + this.initName
  184. // }
  185. painter.font.size = this.scale * 200;
  186. painter.brush.color = SColor.Black;
  187. // painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
  188. painter.drawText(
  189. this.viewText,
  190. this.centerOfGravityPoint.x,
  191. this.centerOfGravityPoint.y
  192. );
  193. }
  194. }
  195. } // Class WallItem