ImageItem.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <div>
  3. <el-row>
  4. <el-button @click="undo">Undo</el-button>
  5. <el-button @click="redo">Redo</el-button>
  6. <el-button @click="reset">Reset</el-button>
  7. </el-row>
  8. <canvas id="imageItem1" width="740" height="400" tabindex="0"/>
  9. </div>
  10. </template>
  11. <script lang="ts">
  12. import { SUndoStack } from "@saga-web/base";
  13. import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
  14. import { SPoint, SPainter } from "@saga-web/draw/lib";
  15. import { SObjectItem } from "@saga-web/big/lib";
  16. /**
  17. * 图片item
  18. *
  19. * @author 张宇(taohuzy@163.com)
  20. */
  21. class SImageItem extends SObjectItem {
  22. /**
  23. * Item绘制操作
  24. *
  25. * @param painter 绘画类
  26. */
  27. onDraw(painter: SPainter): void {
  28. console.log('draw');
  29. } // Function onDraw()
  30. }// Class SImageItem
  31. class SScene extends SGraphScene {
  32. undoStack = new SUndoStack();
  33. imageItem: SImageItem = new SImageItem(null);
  34. constructor() {
  35. super();
  36. this.addItem(this.imageItem);
  37. this.grabItem = this.imageItem;
  38. this.imageItem.connect("onMove", this, this.onItemMove.bind(this));
  39. }
  40. updateText(str: string): void {
  41. if (this.imageItem.text !== str) {
  42. let old = this.imageItem.text;
  43. this.imageItem.text = str;
  44. this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "text", old, str));
  45. }
  46. }
  47. updateColor(color: string): void {
  48. if (this.imageItem.color !== color) {
  49. let old = this.imageItem.color;
  50. this.imageItem.color = color;
  51. this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "color", old, color));
  52. }
  53. }
  54. updateSize(size: number): void {
  55. if (this.imageItem.font.size !== size) {
  56. let old = new SFont(this.imageItem.font);
  57. let font = new SFont(this.imageItem.font);
  58. font.size = size;
  59. this.imageItem.font = font;
  60. this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "font", old, font));
  61. }
  62. }
  63. onItemMove(item: SGraphItem, ...arg: any): void {
  64. this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
  65. }
  66. }
  67. class ImageView extends SGraphView {
  68. constructor() {
  69. super("ImageItem1");
  70. }
  71. }
  72. export default {
  73. mounted(): void {
  74. let view = new ImageView();
  75. view.scene = this.scene;
  76. },
  77. data() {
  78. return {
  79. scene: new SScene(),
  80. }
  81. },
  82. methods: {
  83. undo() {},
  84. redo() {},
  85. reset() {},
  86. }
  87. }
  88. </script>
  89. <style scoped>
  90. </style>