PolylineItem.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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 "@persagy-web/graph/lib";
  11. import {SPolylineItem,SItemStatus} from "@persagy-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.item.status = SItemStatus.Create;
  32. this.scene.addItem(this.item);
  33. this.scene.grabItem = this.item;
  34. this.view.update();
  35. },
  36. undo(){
  37. if(this.scene.grabItem) {
  38. this.scene.grabItem.undo()
  39. }
  40. },
  41. redo(){
  42. if(this.scene.grabItem) {
  43. this.scene.grabItem.redo()
  44. }
  45. }
  46. }
  47. }
  48. </script>
  49. <style scoped>
  50. canvas{
  51. border: 1px solid #eeeeee;
  52. outline: none;
  53. }
  54. </style>