1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <template>
- <div>
- <el-button size="mini" @click="init">清空画布,并初始化折线item</el-button>
- <el-button size="mini" @click="undo">undo</el-button>
- <el-button size="mini" @click="redo">redo</el-button>
- <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
- </div>
- </template>
- <script>
- import {SGraphScene, SGraphView} from "@persagy-web/graph/lib";
- import {SPolylineItem,SItemStatus} from "@persagy-web/big/lib";
- export default {
- name: "editPolyline",
- data() {
- return {
- scene: null,
- view: null,
- item: null,
- };
- },
- mounted() {
- this.view = new SGraphView("editPolyline");
- this.scene = new SGraphScene();
- this.view.scene = this.scene;
- this.init()
- },
- methods:{
- init(){
- this.scene.root.children = [];
- this.item = new SPolylineItem(null,[]);
- this.item.status = SItemStatus.Create;
- this.scene.addItem(this.item);
- this.scene.grabItem = this.item;
- this.view.update();
- },
- undo(){
- if(this.scene.grabItem) {
- this.scene.grabItem.undo()
- }
- },
- redo(){
- if(this.scene.grabItem) {
- this.scene.grabItem.redo()
- }
- }
- }
- }
- </script>
- <style scoped>
- canvas{
- border: 1px solid #eeeeee;
- outline: none;
- }
- </style>
|