TextItem.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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.addItem(this.textItem);
  40. this.textItem.connect("onMove", this, this.onItemMove.bind(this));
  41. }
  42. updateText(str) {
  43. if (this.textItem.text !== str) {
  44. let old = this.textItem.text;
  45. this.textItem.text = str;
  46. this.undoStack.push(
  47. new SGraphPropertyCommand(this, this.textItem, "text", old, str)
  48. );
  49. }
  50. }
  51. updateColor(color) {
  52. if (this.textItem.color !== color) {
  53. let old = this.textItem.color;
  54. this.textItem.color = color;
  55. this.undoStack.push(
  56. new SGraphPropertyCommand(this, this.textItem, "color", old, color)
  57. );
  58. }
  59. }
  60. updateSize(size) {
  61. if (this.textItem.font.size !== size) {
  62. let old = new SFont(this.textItem.font);
  63. let font = new SFont(this.textItem.font);
  64. font.size = size;
  65. this.textItem.font = font;
  66. this.undoStack.push(
  67. new SGraphPropertyCommand(this, this.textItem, "font", old, font)
  68. );
  69. }
  70. }
  71. onItemMove(item, ...arg) {
  72. this.undoStack.push(
  73. new SGraphMoveCommand(this, item, arg[0][0], arg[0][1])
  74. );
  75. }
  76. }
  77. class TestView extends SGraphView {
  78. constructor() {
  79. super("TextItem1");
  80. }
  81. }
  82. export default {
  83. data() {
  84. return {
  85. scene: new SScene(),
  86. text: "测试文本",
  87. size: 20,
  88. color: "#333333"
  89. };
  90. },
  91. mounted() {
  92. let view = new TestView();
  93. this.scene.updateText(this.text);
  94. this.scene.updateColor(this.color);
  95. this.scene.updateSize(this.size);
  96. view.scene = this.scene;
  97. },
  98. methods: {
  99. handleChangeText(text) {
  100. this.scene.updateText(text);
  101. },
  102. handleChangeColor(color) {
  103. this.scene.updateColor(color);
  104. },
  105. handleChangeSize(size) {
  106. this.scene.updateSize(size);
  107. },
  108. undo() {
  109. this.scene.undoStack.undo();
  110. },
  111. redo() {
  112. this.scene.undoStack.redo();
  113. },
  114. reset() {
  115. this.text = "测试文本";
  116. this.size = 20;
  117. this.color = "#333333";
  118. this.scene.updateText(this.text);
  119. this.scene.updateColor(this.color);
  120. this.scene.updateSize(this.size);
  121. }
  122. }
  123. };
  124. </script>
  125. <style scoped>
  126. </style>