EditText.ts 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. import { SObjectItem } from "@persagy-web/graph/";
  2. import { SPainter, SRect, SColor, SFont, SPoint } from "@persagy-web/draw";
  3. import { SGraphItem } from "@persagy-web/graph/";
  4. import { SLineStyle } from "@persagy-web/graph/";
  5. import { STextOrigin } from "@persagy-web/graph/";
  6. /**
  7. * 文本item
  8. *
  9. * @author 韩耀龙(han_yao_long@163.com)
  10. */
  11. export class EditText extends SObjectItem {
  12. /** 记录painter */
  13. private _painter: SPainter | null = null;
  14. /** 文本内容 */
  15. private _text: string = "";
  16. get text(): string {
  17. return this._text;
  18. }
  19. set text(v: string) {
  20. this._text = v;
  21. this._textArr = this.text.split(/\n/g);
  22. this.drawFormatText();
  23. this.update();
  24. }
  25. /** 切割后的文本数组 */
  26. private _textArr: string[] = [];
  27. /** 文本颜色 */
  28. private _color: SColor = new SColor("#333333");
  29. get color(): SColor {
  30. return this._color;
  31. }
  32. set color(v: SColor) {
  33. this._color = v;
  34. this.update();
  35. }
  36. /** 字体 */
  37. private _font: SFont;
  38. get font(): SFont {
  39. return this._font;
  40. }
  41. set font(v: SFont) {
  42. this._font = v;
  43. this.drawFormatText();
  44. this.update();
  45. }
  46. /** 背景色 */
  47. private _backgroundColor: SColor = SColor.Transparent;
  48. get backgroundColor(): SColor {
  49. return this._backgroundColor;
  50. }
  51. set backgroundColor(v: SColor) {
  52. this._backgroundColor = v;
  53. this.update();
  54. }
  55. /** 边框色 */
  56. private _strokeColor: SColor = SColor.Transparent;
  57. get strokeColor(): SColor {
  58. return this._strokeColor;
  59. }
  60. set strokeColor(v: SColor) {
  61. this._strokeColor = v;
  62. this.update();
  63. }
  64. /** 边框宽度 */
  65. private _lineWidth: number = 1;
  66. get lineWidth(): number {
  67. return this._lineWidth;
  68. }
  69. set lineWidth(v: number) {
  70. this._lineWidth = v;
  71. this.update();
  72. }
  73. /** 边框样式 */
  74. private _borderStyle: SLineStyle = SLineStyle.None;
  75. get borderStyle(): SLineStyle {
  76. return this._borderStyle;
  77. }
  78. set borderStyle(v: SLineStyle) {
  79. this._borderStyle = v;
  80. this.update();
  81. }
  82. /** 原点位置 */
  83. private _originPosition: STextOrigin = STextOrigin.LeftTop;
  84. get originPosition(): STextOrigin {
  85. return this._originPosition;
  86. }
  87. set originPosition(v: STextOrigin) {
  88. this._originPosition = v;
  89. this.update();
  90. }
  91. /** 文本绘制最大宽 */
  92. maxWidth: number | undefined = undefined;
  93. /**
  94. * 构造函数
  95. *
  96. * @param parent 指向父Item
  97. * @param str 文本内容
  98. */
  99. constructor(parent: SGraphItem | null, str: string = "") {
  100. super(parent);
  101. this._text = str;
  102. this._font = new SFont("sans-serif", 12);
  103. this.height = 12;
  104. } // Constructor
  105. /**
  106. * 对象边界区域
  107. *
  108. * @return 边界区域
  109. */
  110. boundingRect(): SRect {
  111. return new SRect(
  112. -this.origin.x,
  113. -this.origin.y,
  114. this.width,
  115. this.height
  116. );
  117. } // Function boundingRect()
  118. /**
  119. * 移动后处理所有坐标,并肩原点置为场景原点
  120. *
  121. * @param x x坐标
  122. * @param y y坐标
  123. */
  124. moveToOrigin(x: number, y: number): void {
  125. this.moveTo(this.x + x, this.y + y);
  126. } // Function moveToOrigin()
  127. /**
  128. * 绘制显示状态文本Item
  129. *
  130. * @param painter 绘制类
  131. */
  132. protected drawShowText(painter: SPainter): void {
  133. painter.translate(-this.origin.x, -this.origin.y);
  134. //绘制矩形轮廓
  135. if (this.selected) {
  136. painter.shadow.shadowBlur = 10;
  137. painter.shadow.shadowColor = new SColor(`#00000033`);
  138. painter.shadow.shadowOffsetX = 5;
  139. painter.shadow.shadowOffsetY = 5;
  140. } else {
  141. painter.shadow.shadowColor = SColor.Transparent;
  142. }
  143. painter.brush.color = this.backgroundColor;
  144. painter.pen.lineWidth = this.lineWidth;
  145. painter.pen.color = this.strokeColor;
  146. painter.drawRect(0, 0, this.width, this.height);
  147. //绘制文本
  148. painter.brush.color = new SColor(this.color);
  149. painter.shadow.shadowColor = SColor.Transparent;
  150. painter.font = this.font;
  151. this._textArr.forEach((text: string, index: number) => {
  152. painter.drawText(
  153. text,
  154. this.font.size / 4,
  155. index * (this.font.size * 1.25) + this.font.size / 4,
  156. this.maxWidth
  157. );
  158. });
  159. } // Function drawShowText()
  160. /**
  161. * 根据换行切割文本,绘制多行并计算外轮廓宽高
  162. *
  163. */
  164. protected drawFormatText(): void {
  165. if (this._painter instanceof SPainter) { // 实例在 SPainter 绘制对象中
  166. this._painter.save();
  167. this._painter.font = this.font;
  168. let textMaxWidth = 0;
  169. let fontSize: number = this.font.size;
  170. this._textArr.forEach((text: string, index: number) => {
  171. let textWidth: number = this._painter
  172. ? this._painter.textWidth(text) + fontSize / 2
  173. : fontSize / 2;
  174. if (textWidth > textMaxWidth) {
  175. textMaxWidth = textWidth;
  176. }
  177. });
  178. // 在绘制文本后计算文本的宽高
  179. this.width = textMaxWidth;
  180. this.height = fontSize * 1.25 * this._textArr.length + fontSize / 8;
  181. // 设置原点位置(默认左上角)
  182. if (this.originPosition == STextOrigin.Centrum) {
  183. this.origin = new SPoint(this.width / 2, this.height / 2);
  184. }
  185. this._painter.restore();
  186. }
  187. } // Function drawFormatText()
  188. /**
  189. * Item绘制操作
  190. *
  191. * @param painter 绘画类
  192. */
  193. onDraw(painter: SPainter): void {
  194. if (!(this._painter instanceof SPainter)) { // 实例在 SPainter 绘制对象中
  195. this._painter = painter;
  196. this.drawFormatText();
  197. }
  198. this.drawShowText(painter);
  199. }
  200. } // Class STextItem