TextItem.vue 3.0 KB

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