pipe.ts 5.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) 2009-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SGraphItem, SLineStyle } from "@persagy-web/graph/lib";
  27. import { SPainter, SColor, SFont, SPoint } from "@persagy-web/draw/lib";
  28. import { SCircleCornerPolylineItem } from "@persagy-web/big"
  29. export class Pipe extends SGraphItem {
  30. pointList: SGraphItem | null;
  31. // 底部默认的管道
  32. pipe_default: SCircleCornerPolylineItem
  33. // 管道上部的流动像素
  34. pipe_flow: SCircleCornerPolylineItem
  35. // 设置弧度
  36. private _radius: number = 5;
  37. get radius(): number {
  38. return this.pipe_default.radius;
  39. }
  40. set radius(v: number) {
  41. if (v === this._radius) {
  42. return;
  43. }
  44. // 设置弧度
  45. this.pipe_default.radius = v;
  46. this.pipe_flow.radius = v;
  47. }
  48. /** 圆角半径是否需要转像素值 */
  49. private _radiusIsPx: boolean = false;
  50. get radiusIsPx(): boolean {
  51. return this.pipe_default.radiusIsPx;
  52. }
  53. set radiusIsPx(v: boolean) {
  54. if (v === this._radiusIsPx) {
  55. return;
  56. }
  57. // 设置弧度
  58. this.pipe_default.radiusIsPx = v;
  59. this.pipe_flow.radiusIsPx = v;
  60. }
  61. get strokeColor(): SColor {
  62. return this.pipe_default.strokeColor
  63. }
  64. set strokeColor(v: SColor) {
  65. // 设置弧度
  66. this.pipe_default.strokeColor = v;
  67. }
  68. get data(): any {
  69. return this.pipe_default.data
  70. }
  71. set data(v: any) {
  72. // 设置弧度
  73. this.pipe_default.data = v;
  74. }
  75. // 内管道颜色
  76. get flowStrokeColor(): SColor {
  77. return this.pipe_flow.strokeColor
  78. }
  79. set flowStrokeColor(v: SColor) {
  80. // 设置弧度
  81. this.pipe_flow.strokeColor = v;
  82. }
  83. get fillColor(): SColor {
  84. return this.pipe_default.fillColor;
  85. }
  86. set fillColor(v: SColor) {
  87. this.pipe_default.fillColor = v;
  88. }
  89. // 内管道填充颜色
  90. get flowFillColor(): SColor {
  91. return this.pipe_flow.strokeColor
  92. }
  93. set flowFillColor(v: SColor) {
  94. // 设置弧度
  95. this.pipe_flow.strokeColor = v;
  96. }
  97. get lineWidth(): number {
  98. return this.pipe_default.lineWidth;
  99. }
  100. set lineWidth(v: number) {
  101. this.pipe_default.lineWidth = v;
  102. this.pipe_flow.lineWidth = this.pipe_default.lineWidth * this._flowWithScale
  103. }
  104. // 内外管道比
  105. _flowWithScale: number = 0.6;
  106. set flowWithScale(val: number) {
  107. this._flowWithScale = val;
  108. this.pipe_flow.lineWidth = this.pipe_default.lineWidth * this._flowWithScale
  109. }
  110. get flowWithScale(): number {
  111. return this._flowWithScale
  112. }
  113. // 线样式
  114. get lineStyle(): SLineStyle {
  115. return this.pipe_default.lineStyle;
  116. }
  117. set lineStyle(v: SLineStyle) {
  118. this.pipe_default.lineStyle = v;
  119. }
  120. // 内管道线样式
  121. get flowLineStyle(): SLineStyle {
  122. return this.pipe_flow.lineStyle;
  123. }
  124. set flowLineStyle(v: SLineStyle) {
  125. this.pipe_flow.lineStyle = v;
  126. }
  127. // 是否显示滚动
  128. _showScroll = true
  129. get showScroll(): boolean {
  130. return this._showScroll;
  131. }
  132. set showScroll(v: boolean) {
  133. this._showScroll = v;
  134. if(v){
  135. this._flowScroll()
  136. }else{
  137. if(this._setInteveal){
  138. clearInterval(this._setInteveal);
  139. this._setInteveal = null;
  140. }
  141. }
  142. }
  143. _setInteveal :any = null;
  144. constructor(parent: SGraphItem | null, pointList: any) {
  145. super(parent)
  146. this.pointList = pointList;
  147. // 底部默认的管道
  148. this.pipe_default = new SCircleCornerPolylineItem(this, pointList)
  149. // 管道上部的流动像素
  150. this.pipe_flow = new SCircleCornerPolylineItem(this, pointList)
  151. this.flowFillColor = new SColor('#ffffff'); //内管颜色
  152. this.flowStrokeColor = new SColor('#ffffff'); // 内管颜色
  153. this.flowLineStyle = SLineStyle.Dashed; //线型
  154. this.pipe_default.widthIsPx = true; //显示像素宽
  155. this.pipe_flow.widthIsPx = true; //像素宽
  156. this.showScroll = true; //是否滚动
  157. }
  158. _flowScroll(){
  159. this._setInteveal = setInterval(()=>{
  160. this.update()
  161. },60)
  162. }
  163. onDraw(painter: SPainter): void{
  164. if(this.showScroll){
  165. painter.pen.dashOffset = new Date().getTime() / 50 % 40;
  166. }
  167. }
  168. }