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

<template>
    <div>
        <canvas id="gifItem2" width="400" height="400" tabindex="0"/>
        <p>图片源(注意:这是一张图片)</p>
        <img src="./2.png">
    </div>
</template>
<script lang="ts">
    import { SGraphScene, SGraphView, SImageItem } from "@persagy-web/graph";
    import { Component, Vue } from "vue-property-decorator";
    import { SPainter } from "@persagy-web/draw";


    // 前置条件
    class SGGifItem extends SImageItem {
        /** 当前帧数 */
        _curFrame: number = 0;

        /** 裁剪的起始点 x 坐标 */
        sx: number = 0;
        /** 裁剪的起始点 y 坐标 */
        sy: number = 0;

        onDraw(painter: SPainter) {
            painter.translate(-this.origin.x, -this.origin.y);
            if (this.isLoadOver) {
                // @ts-ignore
                painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight, this.sx + this.width * this._curFrame, this.sy, this.width, this.height);

                this._curFrame++;
                if (this._curFrame > 15) {
                    this._curFrame = 0;
                }
            }
        }
    }


    @Component
    export default class GIFCanvas2 extends Vue {
        imgSrc: string = require('./2.png');
        /**
         * 页面挂载
         */
        mounted(): void {
            // 步骤1
            const view = new SGraphView('gifItem2');
            const scene = new SGraphScene();
            // 步骤2
            const item = new SGGifItem(null, this.imgSrc);
            // 步骤3
            item.width = 500;
            item.height = 500;
            // 步骤4
            scene.addItem(item);
            view.scene = scene;
            view.fitItemToView([item]);

            // 步骤5
            setInterval(() => {
                view.update();
            }, 80)
        }
    }



</script>

<style scoped>

</style>