123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- <template>
- <div>
- <el-row>
- <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="imageItem1" width="740" height="400" tabindex="0"/>
- </div>
- </template>
- <script lang="ts">
- import { SUndoStack } from "@saga-web/base";
- import { SGraphItem, SGraphScene, SGraphView, SGraphPropertyCommand, SGraphMoveCommand } from "@saga-web/graph";
- import { SPoint, SPainter } from "@saga-web/draw/lib";
- import { SObjectItem } from "@saga-web/big/lib";
- /**
- * 图片item
- *
- * @author 张宇(taohuzy@163.com)
- */
- class SImageItem extends SObjectItem {
- /**
- * Item绘制操作
- *
- * @param painter 绘画类
- */
- onDraw(painter: SPainter): void {
- console.log('draw');
- } // Function onDraw()
- }// Class SImageItem
- class SScene extends SGraphScene {
- undoStack = new SUndoStack();
- imageItem: SImageItem = new SImageItem(null);
- constructor() {
- super();
- this.addItem(this.imageItem);
- this.grabItem = this.imageItem;
- this.imageItem.connect("onMove", this, this.onItemMove.bind(this));
- }
- updateText(str: string): void {
- if (this.imageItem.text !== str) {
- let old = this.imageItem.text;
- this.imageItem.text = str;
- this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "text", old, str));
- }
- }
- updateColor(color: string): void {
- if (this.imageItem.color !== color) {
- let old = this.imageItem.color;
- this.imageItem.color = color;
- this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "color", old, color));
- }
- }
- updateSize(size: number): void {
- if (this.imageItem.font.size !== size) {
- let old = new SFont(this.imageItem.font);
- let font = new SFont(this.imageItem.font);
- font.size = size;
- this.imageItem.font = font;
- this.undoStack.push(new SGraphPropertyCommand(this, this.imageItem, "font", old, font));
- }
- }
- onItemMove(item: SGraphItem, ...arg: any): void {
- this.undoStack.push(new SGraphMoveCommand(this, item, arg[0][0] as SPoint, arg[0][1] as SPoint));
- }
- }
- class ImageView extends SGraphView {
- constructor() {
- super("ImageItem1");
- }
- }
- export default {
- mounted(): void {
- let view = new ImageView();
- view.scene = this.scene;
- },
- data() {
- return {
- scene: new SScene(),
- }
- },
- methods: {
- undo() {},
- redo() {},
- reset() {},
- }
- }
- </script>
- <style scoped>
- </style>
|