STextItem.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import { SObjectItem } from "./SObjectItem";
  2. import {
  3. SPainter,
  4. SRect,
  5. SColor,
  6. SFont
  7. } from "@saga-web/draw/lib";
  8. import { SMouseEvent } from "@saga-web/base/lib";
  9. /**
  10. * 文本item
  11. *
  12. * @author 郝建龙(1061851420@qq.com)
  13. */
  14. export class STextItem extends SObjectItem {
  15. /** 文本内容 */
  16. _text: string = "";
  17. get text(): string {
  18. return this._text;
  19. }
  20. set text(v: string) {
  21. this._text = v;
  22. this.update();
  23. }
  24. /** 文本所占高度 */
  25. private height: number = 0;
  26. /** 文本所占宽度 */
  27. private width: number = 0;
  28. /** 字体 */
  29. _font: SFont = new SFont();
  30. get font(): SFont {
  31. return this._font;
  32. }
  33. set font(v: SFont) {
  34. this._font = v;
  35. this.update();
  36. }
  37. /** 文本绘制最大宽 */
  38. maxWidth: number | undefined = undefined;
  39. /** 文本颜色 */
  40. private _color: string = "#000000";
  41. get color(): string {
  42. return this._color;
  43. }
  44. set color(v: string) {
  45. this._color = v;
  46. this.update();
  47. }
  48. /**
  49. * Item对象边界区域
  50. *
  51. * @return SRect
  52. */
  53. boundingRect(): SRect {
  54. return new SRect(
  55. -this.width / 2,
  56. -this.height / 2,
  57. this.width,
  58. this.height
  59. );
  60. }
  61. /**
  62. * 判断点是否在区域内
  63. *
  64. * @param x
  65. * @param y
  66. */
  67. contains(x: number, y: number): boolean {
  68. return this.boundingRect().contains(x, y);
  69. } // Function contains()
  70. /**
  71. * 鼠标单击事件
  72. *
  73. * @param event 事件参数
  74. * @return boolean
  75. */
  76. onMouseDown(event: SMouseEvent): boolean {
  77. console.log("textDown");
  78. this.$emit("click", event);
  79. return true;
  80. } // Function onMouseDown()
  81. /**
  82. * 鼠标抬起事件
  83. *
  84. * @param event 事件参数
  85. * @return boolean
  86. */
  87. onMouseUp(event: SMouseEvent): boolean {
  88. console.log("textup");
  89. return super.onMouseUp(event);
  90. } // Function onClick()
  91. /**
  92. * Item绘制操作
  93. *
  94. * @param painter painter对象
  95. */
  96. onDraw(painter: SPainter): void {
  97. this.width = painter.toPx(painter.textWidth(this.text));
  98. this.height = painter.toPx(this.font.size);
  99. painter.font.textBaseLine = this.font.textBaseLine;
  100. painter.font.textDirection = this.font.textDirection;
  101. painter.font.textAlign = this.font.textAlign;
  102. painter.font.name = this.font.name;
  103. painter.font.size = painter.toPx(this.font.size);
  104. painter.brush.color = new SColor(this.color);
  105. painter.drawText(this.text, 0, 0, this.maxWidth);
  106. } // Function onDraw()
  107. } // Class STextItem