<template>
    <div>
        <el-row>
            <el-button @click="Full">铺满</el-button>
            <el-button @click="Equivalency">等比缩放</el-button>
            <el-button @click="AutoFit">自适应</el-button>
        </el-row>
        <canvas :id="id" width="740" height="400"/>
    </div>
</template>

<script lang="ts">
    import { SGraphScene, SGraphView } from "@persagy-web/graph";
    import { SGraphSvgItem} from "@persagy-web/graph/lib";
    import { Component, Vue } from "vue-property-decorator";
    import { SSize} from "@persagy-web/draw/lib";
    import { v1 as uuid } from "uuid";

    class Img extends SGraphSvgItem{
        resize(oldSize:SSize, newSize: SSize) :void {
            this.width = newSize.width;
            this.height = newSize.height;
        }
    }

    @Component
    export default class ZoneCanvas extends Vue {
        id: string = uuid();
        url: string = require('./1.jpg');
        mounted() {
            const view = new SGraphView(this.id);
            const scene = new SGraphScene();
            const item = new Img(null, {Url: this.url, X: 0, Y: 0, Width: 100, Height: 100});
            item.selectable = true;
            view.scene = scene;
            scene.addItem(item);
            view.fitSceneToView();
        };
        Full() {
            // this.scene.imageItem.showType = SImageShowType.Full;
        };
        Equivalency() {
            // this.scene.imageItem.showType = SImageShowType.Equivalency;
        };
        AutoFit() {
            // this.scene.imageItem.showType = SImageShowType.AutoFit;
        };
    }
</script>

<style scoped>

</style>
