Browse Source

gif item添加

haojianlong 4 năm trước cách đây
mục cha
commit
46e20b53e4

+ 42 - 0
docs/.vuepress/components/scene/items/gifItem.vue

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

+ 2 - 0
docs/guides/index.js

@@ -49,6 +49,7 @@ const content = [
                     ["/guides/scene/items/svg", "SVG 图"],
                     ["/guides/scene/items/imgText", "图例 item"],
                     ["/guides/scene/items/polyline", "折线 item (拐角为圆角)"],
+                    ["/guides/scene/items/gifItem", "GIF item"],
                 ]
             },
             {
@@ -57,6 +58,7 @@ const content = [
                     ["/guides/scene/items/clock", "时钟"],
                     ["/guides/scene/regularPolygon", "正多边形"],
                     ["/guides/scene/star", "星形"],
+                    ["/guides/scene/enlarge", "放大效果"],
                 ]
             },
         ]

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

@@ -0,0 +1,2 @@
+# 放大效果
+

+ 16 - 0
docs/guides/scene/items/gifItem.md

@@ -0,0 +1,16 @@
+# GIF Item
+
+<scene-items-gifItem />
+
+gif图素材地址是``` http://f.sinaimg.cn/tech/transform/301/w193h108/20210128/7d28-kicwvzr2403640.gif ```
+
+目前谷歌浏览器不支持这2种实现方式, 但是edge可以看到效果
+
+### 方式1: 派生``` SImageItem ``` 重写``` ondraw ```方法;
+
+### 方式2: 在外部写定时器,不断刷新视图
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/scene/items/gifItem.vue
+:::
+

+ 2 - 2
package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@persagy-vue/doc": "1.1.36",
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.41",
+    "@persagy-web/big": "2.2.43",
     "@persagy-web/draw": "2.2.10",
-    "@persagy-web/graph": "2.2.39",
+    "@persagy-web/graph": "2.2.40",
     "axios": "^0.19.2",
     "element-ui": "^2.12.0",
     "vue": "^2.6.10",