<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="ImageItem1" width="740" height="400"/>
    </div>
</template>

<script>
    import { SGraphScene, SGraphView, SImageShowType, SImageItem } from "@persagy-web/graph";

    class SScene extends SGraphScene {
        imageItem = 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);
        }
    }

    class ImageView extends SGraphView {
        constructor() {
            super("ImageItem1");
        }
    }

    export default {
        mounted() {
            let view = new ImageView();
            view.scene = this.scene;
            view.fitSceneToView();
        },
        data() {
            return {
                scene: new SScene(),
            }
        },
        methods: {
            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>