Selaa lähdekoodia

video demo添加

haojianlong 4 vuotta sitten
vanhempi
commit
1fa2f7c7f2

+ 1 - 1
docs/.vuepress/components/scene/items/gifItem2.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <canvas id="gifItem2" width="400" height="400" tabindex="0"/>
-        <p>图片源</p>
+        <p>图片源(注意:这是一张图片)</p>
         <img src="./2.png">
     </div>
 </template>

+ 129 - 0
docs/.vuepress/components/scene/items/video.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <canvas id="videoCanvas" width="600" height="480" tabindex="0"/>
+        <div id="video"></div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { SGraphScene, SGraphView, SGraphItem } from "@persagy-web/graph";
+    import { Component, Vue } from "vue-property-decorator";
+    import { SPainter, SRect } from "@persagy-web/draw";
+
+    class SVideoItem extends SGraphItem {
+        /** 图片 dom */
+        VObject: any;
+        /** 图片加载是否完成 */
+        isLoadOver: boolean = false;
+        /** 图片地址 */
+        private _url: string = "";
+        get url(): string {
+            return this._url;
+        }
+        set url(v: string) {
+            this._url = v;
+
+            this.VObject = document.createElement('VIDEO');
+            this.VObject.setAttribute('width', '600');
+            this.VObject.setAttribute('height', '480');
+            this.VObject.setAttribute('autoplay', 'autoplay');
+            this.VObject.setAttribute('src', v);
+
+            let VBox = document.getElementById(this.box);
+            if (VBox) {
+                VBox.innerHTML = '';
+                VBox.appendChild(this.VObject);
+            }
+            this.VObject.style.display = 'none';
+        }
+        /** item 宽 */
+        private _width: number = 600;
+        get width(): number {
+            return this._width;
+        }
+        set width(v: number) {
+            if (v == this._width) {
+                return;
+            }
+            this._width = v;
+            this.update();
+        }
+        /** item 高 */
+        private _height: number = 480;
+        get height(): number {
+            return this._height;
+        }
+        set height(v: number) {
+            if (v == this._height) {
+                return;
+            }
+            this._height = v;
+            this.update();
+        }
+
+        /** 视频播放容器 id */
+        box: string = '';
+
+        /**
+         * 构造函数
+         *
+         * @param parent 父类
+         * @param url    视频路径
+         * @param box    视频播放容器 id
+         */
+        constructor(parent: SGraphItem | null, url: string, box: string) {
+            super(parent);
+            if (url && box) {
+                this.url = url;
+                this.box = box;
+            }
+        }
+
+        /**
+         * Item 对象边界区域
+         *
+         * @return 边界区域
+         */
+        boundingRect(): SRect {
+            return new SRect(0, 0, this.width, this.height);
+        }
+
+        /**
+         * Item 绘制操作
+         *
+         * @param painter   绘制对象
+         */
+        onDraw(painter: SPainter): void {
+            if (this.VObject) {
+                // @ts-ignore
+                painter.drawImage(this.VObject, 0, 0, this.width, this.height);
+            }
+        }
+    }
+
+    @Component
+    export default class videoCanvas extends Vue {
+        timer: any = null;
+        mounted(): void {
+            const view = new SGraphView('videoCanvas');
+            const scene = new SGraphScene();
+            const item = new SVideoItem(null, `https://www.w3cschool.cn/statics/demosource/mov_bbb.mp4`, 'video');
+            scene.addItem(item);
+            view.scene = scene;
+            view.fitSceneToView(1);
+            setInterval(() => {
+                view.update();
+            },60)
+
+            view.scalable = false;
+        }
+        beforeDestroy(): void {
+            this.timer && clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 1 - 0
docs/guides/index.js

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

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

@@ -34,4 +34,6 @@
 
 3.为防止误操作,示例在放大视图上方设置了透明的 div, 使事件不会传入到下方的的 canvas 中
 
+4.如果不想在鼠标移入的时候就触发右侧的联动,可以绑定其他事件如 ``` onMouseDown ```, ``` onMouseUp ```等事件,注意-> <span style="color:red">没有onMouseClick事件</span>
+
 :::

+ 14 - 0
docs/guides/scene/items/video.md

@@ -0,0 +1,14 @@
+# video Item
+
+<scene-items-video />
+
+### 实现原理
+
+与 GifItem 的实现方式一样,也是在不断刷新视图;</br>
+区别是 gif 使用的是 img 标签,而 Image 对象可以 new Image 实例化; 视频没有 new Video 这样的方法,只能手动创建 video 标签 插入到 页面中;
+
+实现步骤可查看下面详细代码
+
+::: details 代码详情
+<<< @/docs/.vuepress/components/scene/items/video.vue
+:::