<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>