persagy-web-doc/docs/.vuepress/components/scene/items/PolylineItem.vue

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