SceneMarkItem.ts 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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 {
  22. SColor,
  23. SPainter,
  24. SPath2D,
  25. SPoint,
  26. SRect
  27. } from "@sybotan-web/draw/lib";
  28. /**
  29. * 蒙版item
  30. *
  31. * @author 郝建龙
  32. */
  33. export class SceneMarkItem extends SGraphyItem {
  34. /** 轮廓线坐标 */
  35. outLine: SPoint[] = [];
  36. /** 是否闭合 */
  37. closeFlag = false;
  38. /** 鼠标移动点 */
  39. private lastPoint = new SPoint();
  40. /** 蒙版 */
  41. private mask = new SPath2D();
  42. /**
  43. * 构造函数
  44. *
  45. * @param parent 指向父对象
  46. * @param data 蒙版起点数据
  47. */
  48. constructor(parent: SGraphyItem | null, data: SPoint) {
  49. super(parent);
  50. this.outLine.push(data);
  51. this.lastPoint = data;
  52. this.zOrder = Number.MAX_SAFE_INTEGER;
  53. } // Constructor
  54. /**
  55. * 鼠标按下事件
  56. *
  57. * @param event 事件参数
  58. * @return boolean
  59. */
  60. onMouseDown(event: SMouseEvent): boolean {
  61. console.log(arguments);
  62. if (!this.closeFlag && event.buttons == 1) {
  63. let p = new SPoint(event.x, event.y);
  64. this.lastPoint.x = p.x;
  65. this.lastPoint.y = p.y;
  66. this.outLine.push(p);
  67. }
  68. return true;
  69. } // Function onMouseDown()
  70. /**
  71. * 鼠标移动事件
  72. *
  73. * @param event 事件参数
  74. * @return boolean
  75. */
  76. onMouseMove(event: SMouseEvent): boolean {
  77. if (!this.closeFlag) {
  78. this.lastPoint = new SPoint(event.x, event.y);
  79. }
  80. return true;
  81. } // Function onMouseMove()
  82. /***
  83. * 键盘按键弹起事件
  84. *
  85. * @param event 事件参数
  86. */
  87. onKeyUp(event: KeyboardEvent): void {
  88. if (event.keyCode == 13 && this.outLine.length >= 3) {
  89. this.createMask();
  90. }
  91. } // Function onKeyUp()
  92. /**
  93. * 创建蒙版
  94. *
  95. */
  96. createMask(): void {
  97. this.closeFlag = true;
  98. this.mask = new SPath2D();
  99. this.mask.moveTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
  100. this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
  101. this.mask.lineTo(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
  102. this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
  103. this.mask.lineTo(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
  104. let antiArr = this.outLine;
  105. if(this.isAntiClockWise(this.outLine)){
  106. antiArr = this.outLine.reverse();
  107. }
  108. this.mask.polygon(antiArr);
  109. } // Function createMask()
  110. /**
  111. * 判断多边形点是否逆时针排列
  112. *
  113. * @param pArr 点数组
  114. * @return boolean 是-true 否-false
  115. */
  116. private isAntiClockWise(pArr: SPoint[]): boolean {
  117. let newArr = pArr.concat([]);
  118. let rightPoint = newArr[0],
  119. index = 0;
  120. for (let i = 1; i < newArr.length; i++) {
  121. if (newArr[i].x > rightPoint.x) {
  122. index = i;
  123. rightPoint = newArr[i];
  124. }
  125. }
  126. index = index == 0 ? newArr.length - 1 : index - 1;
  127. return rightPoint.y > newArr[index].y;
  128. } // Function isAntiClockWise
  129. /**
  130. * Item绘制操作
  131. *
  132. * @param painter painter对象
  133. * @param rect 绘制区域
  134. */
  135. onDraw(painter: SPainter, rect?: SRect): void {
  136. if (this.closeFlag) {
  137. painter.pen.color = SColor.Transparent;
  138. painter.brush.color = new SColor("#FFFF0080");
  139. painter.drawPath(this.mask);
  140. } else {
  141. painter.pen.color = new SColor("#ff0000");
  142. painter.drawPolyline(this.outLine);
  143. painter.drawLine(
  144. this.outLine[this.outLine.length - 1],
  145. this.lastPoint
  146. );
  147. }
  148. } // Function onDraw()
  149. } // Class SceneMarkItem