|
@@ -0,0 +1,55 @@
|
|
|
+<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 "@saga-web/graph/lib";
|
|
|
+ import {SPolylineItem} from "@saga-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.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>
|