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