STextItem.ts 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. import { SObjectItem } from "./SObjectItem";
  2. import { SPainter, SRect, SColor, SFont } from "@saga-web/draw/lib";
  3. import { SGraphItem } from "../SGraphItem";
  4. /**
  5. * 文本item
  6. *
  7. * @author 张宇(taohuzy@163.com)
  8. */
  9. /**
  10. * 文本item
  11. *
  12. * @author 张宇(taohuzy@163.com)
  13. */
  14. export class STextItem extends SObjectItem {
  15. /** 记录painter */
  16. private _painter: SPainter | null = null;
  17. /** 文本内容 */
  18. private _text: string = "";
  19. get text(): string {
  20. return this._text;
  21. }
  22. set text(v: string) {
  23. this._text = v;
  24. this._textArr = this.text.split(/\n/g);
  25. this.drawFormatText();
  26. this.update();
  27. }
  28. /** 切割后的文本数组 */
  29. private _textArr: string[] = [];
  30. /** 文本颜色 */
  31. private _color: string = "#333333";
  32. get color(): string {
  33. return this._color;
  34. }
  35. set color(v: string) {
  36. this._color = v;
  37. this.update();
  38. }
  39. /** 字体 */
  40. private _font: SFont;
  41. get font(): SFont {
  42. return this._font;
  43. }
  44. set font(v: SFont) {
  45. this._font = v;
  46. this.drawFormatText();
  47. this.update();
  48. }
  49. /** 背景色 */
  50. private _backgroundColor: SColor = new SColor("#00000000");
  51. get backgroundColor(): SColor {
  52. return this._backgroundColor;
  53. }
  54. set backgroundColor(v: SColor) {
  55. this._backgroundColor = v;
  56. this.update();
  57. }
  58. /** 边框色 */
  59. private _strokeColor: SColor = new SColor("#00000000");
  60. get strokeColor(): SColor {
  61. return this._strokeColor;
  62. }
  63. set strokeColor(v: SColor) {
  64. this._strokeColor = v;
  65. this.update();
  66. }
  67. private _showBorder: boolean = false;
  68. get showBorder(): boolean {
  69. return this._showBorder;
  70. }
  71. set showBorder(v: boolean) {
  72. if (this._showBorder === v) {
  73. return;
  74. }
  75. this._showBorder = v;
  76. this.update();
  77. }
  78. /** 文本绘制最大宽 */
  79. maxWidth: number | undefined = undefined;
  80. /**
  81. * 构造函数
  82. *
  83. * @param parent 指向父Item
  84. * @param str 文本内容
  85. */
  86. constructor(parent: SGraphItem | null, str: string = "") {
  87. super(parent);
  88. this._text = str;
  89. this._font = new SFont("sans-serif", 12);
  90. this.height = 12;
  91. } // Constructor
  92. /**
  93. * 对象边界区域
  94. *
  95. * @return 边界区域
  96. */
  97. boundingRect(): SRect {
  98. return new SRect(0, 0, this.width, this.height);
  99. } // Function boundingRect()
  100. /**
  101. * 绘制显示状态文本Item
  102. *
  103. * @param painter 绘制类
  104. */
  105. protected drawShowText(painter: SPainter): void {
  106. //绘制矩形轮廓
  107. if (this.showBorder) {
  108. painter.brush.color = this.backgroundColor;
  109. painter.pen.color = this.strokeColor;
  110. painter.drawRect(this.boundingRect());
  111. }
  112. //绘制文本
  113. painter.brush.color = new SColor(this.color);
  114. painter.font = this.font;
  115. this._textArr.forEach((text: string, index: number) => {
  116. painter.drawText(
  117. text,
  118. 2,
  119. index * (this.font.size + 2) + 2,
  120. this.maxWidth
  121. );
  122. });
  123. } // Function drawShowText()
  124. /**
  125. * 根据换行切割文本,绘制多行并计算外轮廓宽高
  126. *
  127. * @param painter 绘制类
  128. */
  129. protected drawFormatText(): void {
  130. if (this._painter instanceof SPainter) {
  131. let textMaxWidth = 0;
  132. let textHeight: number = this.font.size;
  133. this._textArr.forEach((text: string, index: number) => {
  134. let textWidth: number = this._painter?this._painter.textWidth(text)+4:4;
  135. if (textWidth > textMaxWidth) {
  136. textMaxWidth = textWidth;
  137. }
  138. });
  139. // 在绘制文本后计算文本的宽高
  140. this.width = textMaxWidth;
  141. this.height = (textHeight + 2) * this._textArr.length;
  142. }
  143. } // Function drawFormatText()
  144. /**
  145. * Item绘制操作
  146. *
  147. * @param painter 绘画类
  148. */
  149. onDraw(painter: SPainter): void {
  150. if (!(this._painter instanceof SPainter)) {
  151. this._painter = painter;
  152. this.drawFormatText();
  153. }
  154. this.drawShowText(painter);
  155. } // Function onDraw()
  156. } // Class STextItem