SBaseArrowPolyEdit.ts 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
  27. import { SColor, SLine, SPainter, SPoint } from "@persagy-web/draw/lib";
  28. import { SBaseLineEdit } from "@persagy-web/edit";
  29. import { SItemStatus, Marker } from "@persagy-web/big/lib";
  30. import { SGraphItem } from "@persagy-web/graph/lib";
  31. /**
  32. * 箭头编辑(多边形)
  33. *
  34. * @author 韩耀龙 <han_yao_long@163.com>
  35. */
  36. export class SBaseArrowPolyEdit extends SBaseLineEdit {
  37. /** 多边形数组 */
  38. pointList: SPoint[] = [];
  39. /** 绘制时需要旋转的角度 */
  40. private _ang: number = 0;
  41. /** 箭头中间粗细 */
  42. arrowWidth: number = 8;
  43. /** 是否为单向箭头 是-只绘制末端箭头 */
  44. _isSingle: boolean = true;
  45. get isSingle(): boolean {
  46. return this._isSingle;
  47. }
  48. set isSingle(v: boolean) {
  49. this._isSingle = v;
  50. this.update();
  51. }
  52. /**
  53. * 构造函数
  54. *
  55. * @param parent 指向父 Item
  56. * @param data 坐标集合|第一个点坐标
  57. */
  58. constructor(parent: SGraphItem | null, data: Marker) {
  59. super(parent, data);
  60. // 箭头宽度
  61. if (data?.style?.default?.arrowWidth) {
  62. this.arrowWidth = data.style.default.arrowWidth;
  63. }
  64. // 设置罗阔
  65. this.pointChange();
  66. }
  67. /**
  68. * 根据两个顶点生成多边形数组
  69. */
  70. pointChange(): void {
  71. // 轮廓箭头数组数量必须大于两位
  72. if (this.line.length > 1) {
  73. const line = new SLine(this.line[0], this.line[1]);
  74. // 获取两点之间的距离
  75. const dis = SMathUtil.pointDistance(
  76. this.line[0].x,
  77. this.line[0].y,
  78. this.line[1].x,
  79. this.line[1].y
  80. );
  81. // 根据dx dy 获取对应直线的角度
  82. if (line.dx != 0) {
  83. const tempFo = Math.atan(line.dy / line.dx);
  84. this._ang = line.dx > 0 ? tempFo : tempFo + Math.PI;
  85. } else {
  86. this._ang = line.dy > 0 ? Math.PI / 2 : (3 * Math.PI) / 2;
  87. }
  88. // 根据是否是单箭头设置对应的轮廓
  89. if (this.isSingle) {
  90. this.pointList = [
  91. new SPoint(0, this.arrowWidth / 2),
  92. new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
  93. new SPoint(dis - this.arrowWidth, this.arrowWidth),
  94. new SPoint(dis, 0),
  95. new SPoint(dis - this.arrowWidth, -this.arrowWidth),
  96. new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
  97. new SPoint(0, -this.arrowWidth / 2)
  98. ];
  99. } else {
  100. this.pointList = [
  101. new SPoint(0, 0),
  102. new SPoint(this.arrowWidth, this.arrowWidth),
  103. new SPoint(this.arrowWidth, this.arrowWidth / 2),
  104. new SPoint(dis - this.arrowWidth, this.arrowWidth / 2),
  105. new SPoint(dis - this.arrowWidth, this.arrowWidth),
  106. new SPoint(dis, 0),
  107. new SPoint(dis - this.arrowWidth, -this.arrowWidth),
  108. new SPoint(dis - this.arrowWidth, -this.arrowWidth / 2),
  109. new SPoint(this.arrowWidth, -this.arrowWidth / 2),
  110. new SPoint(this.arrowWidth, -this.arrowWidth)
  111. ];
  112. }
  113. }
  114. }
  115. /**
  116. * 返回对象储存的相关数据
  117. *
  118. * @return 对象数据
  119. */
  120. toData() {
  121. const data = super.toData();
  122. data.style.default.arrowWidth = this.arrowWidth;
  123. return data;
  124. }
  125. /**
  126. * 绘制
  127. *
  128. * @param painter 绘制对象
  129. */
  130. onDraw(painter: SPainter): void {
  131. // line数量不能为0
  132. if (this.line.length) {
  133. painter.save();
  134. const lw = painter.toPx(this.lineWidth);
  135. painter.pen.lineWidth = lw;
  136. this.sceneDis = painter.toPx(this.dis);
  137. painter.translate(this.line[0].x, this.line[0].y);
  138. painter.rotate((this._ang * 180) / Math.PI);
  139. painter.pen.color = this.strokeColor;
  140. painter.brush.color = this.fillColor;
  141. // 如果为选中状态且编辑状态为正常则设置阴影
  142. if (this.selected && this.status == SItemStatus.Normal) {
  143. painter.pen.lineWidth = 2 * lw;
  144. painter.shadow.shadowBlur = 10;
  145. painter.shadow.shadowColor = new SColor(`#00000033`);
  146. painter.shadow.shadowOffsetX = 5;
  147. painter.shadow.shadowOffsetY = 5;
  148. }
  149. // 绘制多边形
  150. painter.drawPolygon(this.pointList);
  151. painter.restore();
  152. // 如果状态为编辑态则设置对应节点效果
  153. if (this.status == SItemStatus.Edit) {
  154. painter.pen.lineWidth = lw;
  155. this.line.forEach((p, i) => {
  156. painter.brush.color = SColor.White;
  157. // 如果选中节点则高亮
  158. if (i == this.curIndex) {
  159. painter.brush.color = this.activeFillColor;
  160. }
  161. painter.drawCircle(p.x, p.y, painter.toPx(5));
  162. });
  163. }
  164. }
  165. }
  166. }