|
@@ -1,78 +1,29 @@
|
|
|
<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-button @click="Full">铺满</el-button>
|
|
|
+ <el-button @click="Equivalency">等比缩放</el-button>
|
|
|
+ <el-button @click="AutoFit">自适应</el-button>
|
|
|
</el-row>
|
|
|
- <canvas id="imageItem1" width="740" height="400" tabindex="0"/>
|
|
|
+ <canvas id="ImageItem1" width="740" height="400"/>
|
|
|
</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
|
|
|
+ import { SGraphScene, SGraphView } from "@saga-web/graph";
|
|
|
+ import { SImageItem } from "@saga-web/big/lib";
|
|
|
+ import { SImageShowType } from "@saga-web/big/lib/enums/SImageShowType";
|
|
|
|
|
|
class SScene extends SGraphScene {
|
|
|
- undoStack = new SUndoStack();
|
|
|
imageItem: SImageItem = new SImageItem(null);
|
|
|
-
|
|
|
constructor() {
|
|
|
super();
|
|
|
+ this.imageItem.moveable = true;
|
|
|
+ this.imageItem.width = 400;
|
|
|
+ this.imageItem.height = 300;
|
|
|
+ this.imageItem.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591685374103&di=cd5a56b2e3f5e12d7145b967afbcfb7a&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F05%2F20140805191039_cuTPn.jpeg";
|
|
|
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 {
|
|
@@ -85,6 +36,7 @@
|
|
|
mounted(): void {
|
|
|
let view = new ImageView();
|
|
|
view.scene = this.scene;
|
|
|
+ view.fitSceneToView();
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
@@ -92,9 +44,15 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- undo() {},
|
|
|
- redo() {},
|
|
|
- reset() {},
|
|
|
+ Full() {
|
|
|
+ this.scene.imageItem.showType = SImageShowType.Full;
|
|
|
+ },
|
|
|
+ Equivalency() {
|
|
|
+ this.scene.imageItem.showType = SImageShowType.Equivalency;
|
|
|
+ },
|
|
|
+ AutoFit() {
|
|
|
+ this.scene.imageItem.showType = SImageShowType.AutoFit;
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|