<template> <div> <el-button @click="create">创建</el-button> <el-button @click="undo">undo</el-button> <el-button @click="redo">redo</el-button> <canvas id="editLine" width="740" height="400" tabindex="0"/> </div> </template> <script> import { SGraphScene, SGraphView } from "@persagy-web/graph/"; import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus"; import { SLineItem } from "@persagy-web/big/lib"; /** * 可编辑直线示例 * * @author 郝洁 <haojie@persagy.com> */ export default { data() { return { /** 命令所属的场景类 */ scene: null, /** 实例化 view */ view: null }; }, /** * 页面挂载 */ mounted() { this.view = new SGraphView("editLine"); this.scene = new SGraphScene(); this.view.scene = this.scene; }, methods: { create() { this.scene.root.children = []; const lineItem = new SLineItem(null, []); lineItem.status = SItemStatus.Create; this.scene.addItem(lineItem); this.scene.grabItem = lineItem; this.view.fitSceneToView(); }, undo() { if (this.scene.grabItem) { this.scene.grabItem.undo(); } }, redo() { if (this.scene.grabItem) { this.scene.grabItem.redo(); } } } }; </script>