소스 검색

gif实现效果提交

haojianlong 4 년 전
부모
커밋
2bf5637ef0

+ 2 - 1
docs/.vuepress/components/scene/enlarge.vue

@@ -41,11 +41,12 @@
 
             // 步骤4
             this.viewCopy.scene = scene;
-            this.viewCopy.scale = 9;
 
             this.view.scene = scene;
             this.view.fitItemToView([item]);
 
+            this.viewCopy.scale = 3 * this.view.scale;
+
             this.view.scalable = false;
         }
 

BIN
docs/.vuepress/components/scene/items/2.png


+ 72 - 0
docs/.vuepress/components/scene/items/gifItem2.vue

@@ -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>

+ 1 - 0
docs/guides/index.js

@@ -50,6 +50,7 @@ const content = [
                     ["/guides/scene/items/imgText", "图例 item"],
                     ["/guides/scene/items/polyline", "折线 item (拐角为圆角)"],
                     ["/guides/scene/items/gifItem", "GIF item"],
+                    ["/guides/scene/items/gifItem2", "GIF item2"],
                 ]
             },
             {

+ 4 - 2
docs/guides/scene/enlarge.md

@@ -26,10 +26,12 @@
 <<< @/docs/.vuepress/components/scene/enlarge.vue
 :::
 
-::: tips 注意事项
+::: tip 注意事项
+
 1.该示例为做演示效果设置了,标准视图的不可缩放``` scalable ```为``` false ```
 
-2.演示效果中放大视图设置的放缩比例为放大 9
+2.演示效果中放大视图设置的放缩比例为放大标准图的 3
 
 3.为防止误操作,示例在放大视图上方设置了透明的 div, 使事件不会传入到下方的的 canvas 中
+
 :::

+ 39 - 0
docs/guides/scene/items/gifItem2.md

@@ -0,0 +1,39 @@
+# GIF Item 2
+
+<scene-items-gifItem2 />
+
+### 实现原理
+
+放映机原理;设置一个可视窗口大小,不断更改背后的图片位置,快速刷新,达到动图的效果
+
+### 实现步骤
+
+前置条件: 编写好一个 GIF 的 Item(可查看下边的代码)
+
+1.创建 canvas 标签,并实例化视图(view) 和 场景 (scene)
+
+2.实例化 GifItem, 将图片传入
+
+3.设置 GifItem 的窗口大小,也是每一帧的宽度和高度
+
+4.将实例化好的 GifItem 添加到场景中
+
+5.设置定时器,不断刷新视图(view)
+
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/items/gifItem2.vue
+:::
+
+::: tip 注意
+
+1.本示例的图片素材源宽度为8000,高度为500,总共16帧
+
+2.建议图片帧列为每一帧紧密排列,否则需要更改 Item 的绘制方法
+
+3.绘制方法中的9个参数,依次是 图片-在画布上放置图像的 x 坐标位置-在画布上放置图像的 y 坐标位置-要使用的图像的宽度-要使用的图像的高度-开始剪切的 x 坐标位置-开始剪切的 y 坐标位置-被剪切图像的宽度-被剪切图像的高度,
+其中前5个参数不建议修改,后边4个参数即可视窗口位置及大小;
+
+4.如果图片帧列不是从左向右一列排序,则需要配合修改第3点中 (开始剪切的 x 坐标位置-开始剪切的 y 坐标位置) 这两个参数
+
+:::