persagy-web-doc/docs/.vuepress/components/scene/items/ImageItem.vue

<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";

/**
 * 图片实例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class Img extends SGraphSvgItem {
        resize(oldSize: SSize, newSize: SSize): void {
            this.width = newSize.width;
            this.height = newSize.height;
        }
    }

    @Component
    export default class imageCanvas extends Vue {
        /** 图 id */
        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>