PolylineItem.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div>
  3. <el-button size="mini" @click="init">清空画布,并初始化折线item</el-button>
  4. <el-button size="mini" @click="undo">undo</el-button>
  5. <el-button size="mini" @click="redo">redo</el-button>
  6. <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
  7. </div>
  8. </template>
  9. <script>
  10. import {SGraphScene, SGraphView} from "@saga-web/graph/lib";
  11. import {SPolylineItem} from "@saga-web/big/lib";
  12. export default {
  13. name: "editPolyline",
  14. data() {
  15. return {
  16. scene: null,
  17. view: null,
  18. item: null,
  19. };
  20. },
  21. mounted() {
  22. this.view = new SGraphView("editPolyline");
  23. this.scene = new SGraphScene();
  24. this.view.scene = this.scene;
  25. this.init()
  26. },
  27. methods:{
  28. init(){
  29. this.scene.root.children = [];
  30. this.item = new SPolylineItem(null,[]);
  31. this.scene.addItem(this.item);
  32. this.scene.grabItem = this.item;
  33. this.view.update();
  34. },
  35. undo(){
  36. if(this.scene.grabItem) {
  37. this.scene.grabItem.undo()
  38. }
  39. },
  40. redo(){
  41. if(this.scene.grabItem) {
  42. this.scene.grabItem.redo()
  43. }
  44. }
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. canvas{
  50. border: 1px solid #eeeeee;
  51. outline: none;
  52. }
  53. </style>