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

<template>
    <div>
        <canvas id="gifItem" width="400" height="400" tabindex="0"/>
    </div>
</template>

<script lang="ts">
    import { SGraphItem, SGraphScene, SGraphView, SGraphSvgItem, SImageItem } from "@persagy-web/graph";
    import { Component, Vue } from "vue-property-decorator";
    import { SColor, SLineCapStyle, SPainter, SRect, SSize } from "@persagy-web/draw";

    class SGifItem extends SImageItem {
        onDraw(painter: SPainter) {
            super.onDraw(painter);
            this.update()
        }
    } // Class SGraphClockItem

    @Component
    export default class GIFCanvas extends Vue {
        /**
         * 页面挂载
         */
        mounted(): void {
            const view = new SGraphView('gifItem');
            const scene = new SGraphScene()
            // const item = new SGifItem(null, {url:'http://f.sinaimg.cn/tech/transform/301/w193h108/20210128/7d28-kicwvzr2403640.gif'});
            const item = new SGifItem(null, 'http://f.sinaimg.cn/tech/transform/301/w193h108/20210128/7d28-kicwvzr2403640.gif');
            scene.addItem(item);
            view.scene = scene;
            view.fitItemToView([item]);
            // 方式2 直接使用 SImageItem, 增加以下代码
            // setInterval(() => {
            //     view.update()
            // }, 60);
        }
    }
</script>

<style scoped>

</style>