@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/ThrowMoveDemo/App.vue

@@ -1,43 +1,33 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:08
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-25 09:38:21
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-05 
  * @Description: file content
 -->
-<script>
+<script setup>
 import LRParabolicDemo from "./LRParabolicDemo.vue";
 import UDParabolicDemo from "./UDParabolicDemo.vue";
 import TargetDemo from "./TargetDemo.vue";
 import AccelerateDemo from "./AccelerateDemo.vue";
+import { shallowRef } from "vue"
+import { useRouter } from "vue-router"
 
-export default {
-  components: {
-    LRParabolicDemo,
-    UDParabolicDemo,
-    TargetDemo,
-    AccelerateDemo,
-  },
-  data() {
-    return {
-      demoIndex: 0,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
+const router=useRouter()
+let  demoIndex=shallowRef(0)
+
+const  onKeyDown=(ev)=>{
       if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
         return true;
       }
       if (ev.keyCode === 37) {
-        this.demoIndex = this.demoIndex - 1 < 0 ? 3 : this.demoIndex - 1;
+        demoIndex.value = demoIndex.value - 1 < 0 ? 3 : demoIndex.value - 1;
       } else if (ev.keyCode === 39) {
-        this.demoIndex = this.demoIndex - +1 > 3 ? 0 : this.demoIndex + 1;
+        demoIndex.value = demoIndex.value + 1 > 3 ? 0 : demoIndex.value + 1;
       }
       return true;
-    },
-  },
-};
+    }
 </script>
 
 <template>

package/ThrowMoveDemo/TargetDemo.vue

@@ -1,44 +1,31 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 14:11:39
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-05
  * @Description: file content
 -->
-<script>
+<script setup>
 import { JsvActorMoveControl, JsvActorMove } from "jsview";
+import { shallowRef } from "vue";
 
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+const props = defineProps({
+  name: String,
+})
+let direction = shallowRef(1)
+let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+let focusNode=shallowRef(null)
 
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
+const  onKeyDown=(ev)=>{
       if (ev.keyCode === 13) {
-        let preDirection = this.direction;
-        this.direction = -this.direction;
-        this.moveControl.moveToX(195 * this.direction, 250, (x, y) => {
+        let preDirection = direction.value;
+        direction.value = -direction.value;
+        moveControl.moveToX(195 * direction.value, 250, (x, y) => {
           console.log(`Move end with x=${x} y=${y}`);
         });
         const position = (-100 * preDirection) / 2;
-        this.throwControl.throwAlongY(
+        throwControl.throwAlongY(
           -500 * preDirection,
           750 * preDirection,
           {
@@ -53,40 +40,24 @@ export default {
         return true;
       }
       return false;
-    },
-  },
-};
+    }
+
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
+  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+  }">
+    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
       拐点前触碰目标点
     </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
+    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
       {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
     </div>
     <div :style="{ top: 590, left: 625 }">
       <jsv-actor-move key="move" :control="moveControl">
         <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"
-          ></div>
+          <div :style="{ backgroundColor: '#0916ff', width: 30, height: 30 }"></div>
         </jsv-actor-move>
       </jsv-actor-move>
     </div>

package/ThrowMoveDemo/UDParabolicDemo.vue

@@ -1,49 +1,36 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:07:16
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-05 
  * @Description: file content
 -->
-<script>
+<script setup>
 import { JsvActorMoveControl, JsvActorMove } from "jsview";
+import { shallowRef, computed } from "vue";
 
-export default {
-  components: {
-    JsvActorMove,
-  },
-  props: {
-    name: String,
-  },
-  data() {
-    return {
-      direction: 1,
-    };
-  },
-  computed: {
-    directionDetail() {
-      return this.direction < 0 ? "上" : "下";
-    },
-    detail() {
-      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
-    },
-  },
-  setup() {
-    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
-    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+let focusNode=shallowRef(null)
 
-    return {
-      throwControl,
-      moveControl,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      let preDirection = this.direction;
+const props = defineProps({
+  name: String,
+})
+let direction = shallowRef(1)
+
+const directionDetail = computed(() => {
+  return direction.value < 0 ? "上" : "下";
+})
+const detail = computed(() => {
+  return direction.value < 0 ? "向上抛物" : "向下掷物并弹起";
+})
+
+const  onKeyDown=(ev)=>{
+      let preDirection = direction.value;
       switch (ev.keyCode) {
         case 13:
-          this.direction = -this.direction;
-          this.throwControl.throwAlongY(
+          direction.value = -direction.value;
+          throwControl.throwAlongY(
             -400 * preDirection,
             550 * preDirection,
             {
@@ -58,40 +45,24 @@ export default {
           return true;
       }
       return false;
-    },
-  },
-};
+    }
+
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      key="sample1"
-      class="detail-font"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
+  <jsv-focus-block ref="focusNode" :name="props.name" autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+  }">
+    <div key="sample1" class="detail-font" :style="{ top: 150, left: 425, width: 430, height: 40 }">
       {{ detail }}
     </div>
-    <div
-      key="DirectText"
-      class="font"
-      :style="{ top: 250, left: 425, width: 430, height: 40 }"
-    >
+    <div key="DirectText" class="font" :style="{ top: 250, left: 425, width: 430, height: 40 }">
       {{ `当前方向:${directionDetail}` }}
     </div>
     <div :style="{ top: 590, left: 625 }">
       <jsv-actor-move key="move" :control="moveControl">
         <jsv-actor-move key="throw" :control="throwControl">
-          <div
-            :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"
-          ></div>
+          <div :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"></div>
         </jsv-actor-move>
       </jsv-actor-move>
     </div>

package/VideoDemo/App.vue

@@ -1,121 +1,76 @@
+<!--
+ * @Author: ZhengYi
+ * @Date: 2023-05-06 
+ * @Description: file content
+-->
 <script setup>
-import { provide, reactive, ref, shallowRef,  watch } from "vue";
-import Controllor from "./components/Controllor.vue";
-import VideoFrame from "./components/VideoFrame.vue";
-
-const Caption = {
-  offscreenVideo:
-    "名称:OffscreenVideo(自动播放）\n" +
-    "功能描述:\n" +
-    "1.离屏视频播放、支持前进/后退控制\n" +
-    "2.支持圆角设置\n" +
-    "3.支持平移、缩放、旋转等动画\n" +
-    "4.支持ObjectFit调整\n",
-  normalVideo:
-    "名称:Video\n" +
-    "功能描述:\n" +
-    "1.视频播放、支持前进/后退控制\n" +
-    "2.支持ObjectFit调整\n",
-};
-
-let caption = shallowRef(null);
-let useTexture = shallowRef(null);
-let videoTime = reactive({
-  currentTime: 0,
-  duration: 0,
-});
-let objectFitTitle = shallowRef(null);
-let playStatus = ref("");
-provide("useTexture", useTexture);
-provide("objectFit", shallowRef(null));
-provide("videoRect", ref({}));
-provide("playVideo", shallowRef(null));
-provide("seekVideo", shallowRef(null));
-provide("enableAnimation", shallowRef(null));
-provide("videoTime", videoTime);
-provide("objectFitTitle", objectFitTitle);
-provide("playStatus", playStatus);
-watch(useTexture, () => {
-  caption.value = useTexture.value ? Caption.offscreenVideo : Caption.normalVideo;
-});
-</script>
-
-<template>
-  <div
-    :style="{
-      top: 0,
-      left: 0,
-      width: 1280,
-      height: 720,
-      backgroundColor: 'rgb(222,211,140)',
-    }"
-  >
-    <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
-    <VideoFrame :key="useTexture" />
-
-    <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
-    <div class="caption" :key="useTexture">
-      {{ caption }}
-    </div>
-    <div>
-      <div class="text status">
-        {{ "播放状态: " + playStatus }}
-      </div>
-      <div class="text objectFit">
-        {{ objectFitTitle }}
-      </div>
-      <div class="text current">
-        {{ Math.ceil(videoTime.currentTime) }}
-      </div>
-      <div class="text duration">
-        {{ "/" + Math.ceil(videoTime.duration) }}
-      </div>
-    </div>
-    <Controllor class="controllor" />
-  </div>
-</template>
-
-<style scoped>
-.caption {
-  text-align: left;
-  font-size: 24;
-  line-height: 30;
-  color: #ffffff;
-  left: 10;
-  top: 10;
-  width: 400;
-  height: 180;
-  background-color: rgba(27, 38, 151, 0.8);
-}
-
-.text {
-  color: #ff0000;
-  font-size: 24;
-  top: 550;
-  width: 60;
-  height: 40;
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { JsvPlayer } from "jsview"
+import { useRouter } from "vue-router";
+//路由
+const router = useRouter()
+//位移变量
+let leftMove = shallowRef(0)
+//定时器
+let timer = {
+  id: -1
 }
-.status {
-  left: 50;
-  width: 300;
+//动画
+const changeTransition = () => {
+  let transition = "left 0.5s"
+  return transition
 }
-.objectFit {
-  left: 800;
-  width: 200;
-  text-align: center;
+//挂载时启动定时器
+onMounted(() => {
+  timer.id = setInterval(() => {
+    if (leftMove.value > (1280-350)) {
+      leftMove.value = -60
+    }
+    leftMove.value = leftMove.value + 60
+  }, 500)
+})
+onBeforeUnmount(() => {
+  if (timer.id > 0) {
+    clearInterval(timer.id)
+    timer.id = -1;
+  }
+})
+//设定视频来源
+const video_url =
+  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
+//按键事件
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
 }
-
-.current {
-  left: 1060;
-  text-align: right;
+//注册事件
+let actionDefines = {
+  onKeyDown
 }
-.duration {
-  left: 1120;
-  text-align: left;
-}
-
-.controllor {
-  left: 40;
-  top: 600;
-}
-</style>
+</script>
+<template>
+  <jsv-focus-block autoFocus :onAction="actionDefines">
+    <div :style="{ width: 700, height: 500, top: 60, left: leftMove, transition: changeTransition() }">
+      <JsvPlayer :src="video_url" autoplay="autoplay" loop="loop" :style="{
+        top: 0,
+        left: 0,
+        width: 700,
+        height: 500,
+      }"></JsvPlayer>
+    </div>
+    <div :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 100,
+      top: 620,
+      width: 1280 - 200,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)'
+    }">观察视频在移动过程中是否正常播放，特别是在出屏幕一半时。</div>
+  </jsv-focus-block>
+</template>
+<style></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.0.1073",
+  "version": "2.0.1106",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/VideoDemo/components/Button.vue

@@ -1,58 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const props = defineProps({
-  style: Object,
-  autoFocus: Boolean,
-  name: String,
-  onClick: Function,
-});
-
-const hasFocused = ref(false);
-
-const onFocus = () => {
-  hasFocused.value = true;
-};
-
-const onBlur = () => {
-  hasFocused.value = false;
-};
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 13) {
-    // Enter
-    props.onClick?.();
-    return true;
-  }
-  return false;
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    :autoFocus="autoFocus ? '' : undefined"
-    :onAction="{
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      class="item"
-      :style="{
-        ...style,
-        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
-      }"
-    >
-      <slot></slot>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.item {
-  text-align: center;
-  font-size: 24;
-  line-height: 40;
-}
-</style>