TextItem.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-input
  5. v-model="text"
  6. @change="handleChangeText"
  7. type="textarea"
  8. :autosize="{ minRows: 1, maxRows: 1}"
  9. placeholder="请输入内容"
  10. style="width:200px;"
  11. ></el-input>
  12. <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number>
  13. <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker>
  14. <el-button @click="undo">Undo</el-button>
  15. <el-button @click="redo">Redo</el-button>
  16. <el-button @click="reset">Reset</el-button>
  17. </el-row>
  18. <canvas id="TextItem1" width="740" height="400" tabindex="0" />
  19. </div>
  20. </template>
  21. <script>
  22. import { SUndoStack } from "@persagy-web/base/lib";
  23. import { SFont } from "@persagy-web/draw/lib";
  24. import {
  25. SGraphScene,
  26. SGraphView,
  27. SGraphPropertyCommand,
  28. SGraphMoveCommand,
  29. STextItem
  30. } from "@persagy-web/graph/lib";
  31. class SScene extends SGraphScene {
  32. undoStack = new SUndoStack();
  33. textItem = new STextItem(null);
  34. constructor() {
  35. super();
  36. this.textItem.moveable = true;
  37. this.textItem.x = 100;
  38. this.textItem.y = 100;
  39. this.textItem.selectable = true
  40. this.addItem(this.textItem);
  41. this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  42. }
  43. updateText(str) {
  44. if (this.textItem.text !== str) {
  45. let old = this.textItem.text;
  46. this.textItem.text = str;
  47. this.undoStack.push(
  48. new SGraphPropertyCommand(this, this.textItem, "text", old, str)
  49. );
  50. }
  51. }
  52. updateColor(color) {
  53. if (this.textItem.color !== color) {
  54. let old = this.textItem.color;
  55. this.textItem.color = color;
  56. this.undoStack.push(
  57. new SGraphPropertyCommand(this, this.textItem, "color", old, color)
  58. );
  59. }
  60. }
  61. updateSize(size) {
  62. if (this.textItem.font.size !== size) {
  63. let old = new SFont(this.textItem.font);
  64. let font = new SFont(this.textItem.font);
  65. font.size = size;
  66. this.textItem.font = font;
  67. this.undoStack.push(
  68. new SGraphPropertyCommand(this, this.textItem, "font", old, font)
  69. );
  70. }
  71. }
  72. onItemMove(item, ...arg) {
  73. this.undoStack.push(
  74. new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
  75. );
  76. }
  77. }
  78. class TestView extends SGraphView {
  79. constructor() {
  80. super("TextItem1");
  81. }
  82. }
  83. export default {
  84. data() {
  85. return {
  86. scene: new SScene(),
  87. text: "测试文本",
  88. size: 20,
  89. color: "#333333"
  90. };
  91. },
  92. mounted() {
  93. let view = new TestView();
  94. this.scene.updateText(this.text);
  95. this.scene.updateColor(this.color);
  96. this.scene.updateSize(this.size);
  97. view.scene = this.scene;
  98. },
  99. methods: {
  100. handleChangeText(text) {
  101. this.scene.updateText(text);
  102. },
  103. handleChangeColor(color) {
  104. this.scene.updateColor(color);
  105. },
  106. handleChangeSize(size) {
  107. this.scene.updateSize(size);
  108. },
  109. undo() {
  110. this.scene.undoStack.undo();
  111. },
  112. redo() {
  113. this.scene.undoStack.redo();
  114. },
  115. reset() {
  116. this.text = "测试文本";
  117. this.size = 20;
  118. this.color = "#333333";
  119. this.scene.updateText(this.text);
  120. this.scene.updateColor(this.color);
  121. this.scene.updateSize(this.size);
  122. }
  123. }
  124. };
  125. </script>
  126. <style scoped>
  127. </style>