<template> <div> <el-row> <el-input v-model="text" @change="handleChangeText" type="textarea" :autosize="{ minRows: 1, maxRows: 1}" placeholder="请输入内容" style="width:200px;" ></el-input> <el-input-number v-model="size" @change="handleChangeSize" :min="1" label="字号"></el-input-number> <el-color-picker v-model="color" @change="handleChangeColor" style="top: 15px;"></el-color-picker> <el-button @click="undo">Undo</el-button> <el-button @click="redo">Redo</el-button> <el-button @click="reset">Reset</el-button> </el-row> <canvas id="TextItem1" width="740" height="400" tabindex="0"/> </div> </template> <script> import { SUndoStack } from "@persagy-web/base/lib"; import { SFont } from "@persagy-web/draw/lib"; import { SGraphMoveCommand, SGraphPropertyCommand, SGraphScene, SGraphView, STextItem } from "@persagy-web/graph/lib"; /** * 文本实例 * * @author 郝洁 <haojie@persagy.com> */ class SScene extends SGraphScene { undoStack = new SUndoStack(); textItem = new STextItem(null); /** * 构造函数 */ constructor() { super(); this.textItem.moveable = true; this.textItem.x = 100; this.textItem.y = 100; this.textItem.selectable = true this.addItem(this.textItem); this.textItem.connect("onMove", this, this.onItemMove.bind(this)); } updateText(str) { if (this.textItem.text !== str) { let old = this.textItem.text; this.textItem.text = str; this.undoStack.push( new SGraphPropertyCommand(this, this.textItem, "text", old, str) ); } } updateColor(color) { if (this.textItem.color !== color) { let old = this.textItem.color; this.textItem.color = color; this.undoStack.push( new SGraphPropertyCommand(this, this.textItem, "color", old, color) ); } } updateSize(size) { if (this.textItem.font.size !== size) { let old = new SFont(this.textItem.font); let font = new SFont(this.textItem.font); font.size = size; this.textItem.font = font; this.undoStack.push( new SGraphPropertyCommand(this, this.textItem, "font", old, font) ); } } onItemMove(item, ...arg) { this.undoStack.push( new SGraphMoveCommand(this, item, arg[0][0], arg[0][1]) ); } } class TestView extends SGraphView { /** * 构造函数 */ constructor() { super("TextItem1"); } } export default { data() { return { /** 命令所属的场景类 */ scene: new SScene(), text: "测试文本", size: 20, color: "#333333" }; }, /** * 页面挂载 */ mounted() { let view = new TestView(); this.scene.updateText(this.text); this.scene.updateColor(this.color); this.scene.updateSize(this.size); view.scene = this.scene; }, methods: { handleChangeText(text) { this.scene.updateText(text); }, handleChangeColor(color) { this.scene.updateColor(color); }, handleChangeSize(size) { this.scene.updateSize(size); }, undo() { this.scene.undoStack.undo(); }, redo() { this.scene.undoStack.redo(); }, reset() { this.text = "测试文本"; this.size = 20; this.color = "#333333"; this.scene.updateText(this.text); this.scene.updateColor(this.color); this.scene.updateSize(this.size); } } }; </script> <style scoped> </style>