|
@@ -0,0 +1,42 @@
|
|
|
+<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>
|