123456789101112131415161718192021222324252627282930313233343536373839404142 |
- <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()
- }
- }
- @Component
- export default class GIFCanvas extends Vue {
-
- mounted(): void {
- const view = new SGraphView('gifItem');
- const scene = new SGraphScene()
-
- 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]);
-
-
-
-
- }
- }
- </script>
- <style scoped>
- </style>
|