<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 { SItemStatus, SPolylineItem } from "@persagy-web/big/lib"; /** * 可编辑折线示例 * * @author 郝洁 <haojie@persagy.com> */ export default { name: "editPolyline", data() { return { /** 命令所属的场景类 */ scene: null, /** 实例化 view */ 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>