@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/TextureAnimation/App2.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import {
+  jJsvRuntimeBridge,
+  getKeyFramesGroup,
+  JsvTextureAnim,
+  TexAlignAnchor,
+  DECORATE_NINEPATCH_ALPHA_MIX,
+  DECORATE_BORDER_RADIUS,
+} from "jsview";
+import img from "./assets/light.png";
+import img2 from "./assets/light2.png";
+import mask from "./assets/mask.png";
+
+const getRandom = (start, end) => {
+  return Math.round(Math.random() * (end - start) + start);
+};
+
+const router = useRouter();
+const width = ref(300);
+const height = ref(200);
+const left = ref(50);
+const top = ref(80);
+const rotateAnimation =
+  "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
+
+const ninePatchDecorator = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `url(${mask})`,
+  imageWidth: 86,
+  centerWidth: 2,
+  borderOutset: 0,
+  animTime: 0.5,
+};
+//注意texture的尺寸需要兼顾最大的view
+const texCoord = {
+  width: 600,
+  height: 600,
+};
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  } else if (ev.keyCode == 13) {
+    left.value = getRandom(50, 400);
+    top.value = getRandom(80, 200);
+    width.value = getRandom(100, 300);
+    height.value = getRandom(100, 300);
+  }
+  return true;
+};
+</script>
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onKeyDown="onKeyDown"
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundImage:
+        'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: '30px',
+        lineHeight: '50px',
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      .9型的旋转焦点框,OK键进行随机位置+尺寸变换
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img"
+        :left="left"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+    <div>
+      <jsv-texture-anim
+        :src="img2"
+        :left="left + 500"
+        :top="top"
+        :width="width"
+        :height="height"
+        :texCoord="texCoord"
+        :animation="rotateAnimation"
+        :duration="2000"
+        :repeat="-1"
+        :autoStart="true"
+        :decorate="ninePatchDecorator"
+      ></jsv-texture-anim>
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/TextureSize/App.vue

@@ -1,36 +1,26 @@
-<script>
-import { Vue } from "vue-class-component";
+<script setup>
 import jpegDemo from "./jpegDemo.jpeg";
 import pngDemo from "./pngDemo.png";
 import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
 import bmpDemo from "./bmpDemo.bmp";
+import { useRouter } from "vue-router";
 
-class App extends Vue {
-  constructor(props) {
-    super(props);
+const router = useRouter();
 
-    this.jpegDemo = jpegDemo;
-    this.pngDemo = pngDemo;
-    this.pngNoAlphaDemo = pngNoAlphaDemo;
-    this.bmpDemo = bmpDemo;
-  }
-
-  onKeyDown(ev) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      if (window.JsView) {
-        window.JsView.setGlobalConfig({
-          texCache: -1,
-        });
-      }
-
-      this.$router?.go(-1); // 有router时，回退
-      return true;
+const onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    if (window.JsView) {
+      window.JsView.setGlobalConfig({
+        texCache: -1,
+      });
     }
-    return false;
+
+    router.go(-1); // 有router时，回退
+    return true;
   }
-}
-export default App;
+  return false;
+};
 </script>
 <template>
   <jsv-focus-block autoFocus :onKeyDown="onKeyDown">

package/samples/ThrowMoveDemo/AccelerateDemo.vue

@@ -2,13 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:51:53
+ * @LastEditTime: 2022-07-08 14:11:05
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/LRParabolicDemo.vue

@@ -6,9 +6,8 @@
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/TargetDemo.vue

@@ -2,13 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-20 18:27:25
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-21 14:40:47
+ * @LastEditTime: 2022-07-08 14:11:39
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,

package/samples/ThrowMoveDemo/UDParabolicDemo.vue

@@ -6,9 +6,8 @@
  * @Description: file content
 -->
 <script>
-import JsvActorMove, {
-  JsvActorMoveControl,
-} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+import { JsvActorMoveControl, JsvActorMove } from "jsview";
+
 export default {
   components: {
     JsvActorMove,

package/samples/TouchSample/App.vue

@@ -2,16 +2,15 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-10 21:20:39
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 09:51:24
+ * @LastEditTime: 2022-07-08 14:12:05
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
 import MetroWidgetHorizontal from "./MetroWidgetHorizontal.vue";
 import MetroWidgetVertical from "./MetroWidgetVertical.vue";
 import TouchContainerHorizontal from "./TouchContainerHorizontal.vue";
 import TouchContainerVertical from "./TouchContainerVertical.vue";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { jJsvRuntimeBridge, JsvTouchContainer } from "jsview";
 
 export default {
   components: {

package/samples/TouchSample/Item.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script>
-import { getPositionRelativeToView } from "jsview/utils/JsViewEngineWidget";
+import { getPositionRelativeToView } from "jsview";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
   return (
@@ -29,7 +29,7 @@ export default {
   setup() {
     return {
       randomColor,
-    }
+    };
   },
   computed: {
     style() {
@@ -44,7 +44,7 @@ export default {
   methods: {
     onFocus() {
       this.focused = true;
-      console.log("cchtest item onfocus", this.data)  
+      console.log("cchtest item onfocus", this.data);
     },
 
     onBlur() {
@@ -53,7 +53,7 @@ export default {
 
     onClick() {
       console.log(`item ${this.query.id} clicked`);
-    }
+    },
   },
   created() {
     // console.log("cchtest item created", this.data.content)
@@ -69,7 +69,7 @@ export default {
   },
   updated() {
     // console.log("cchtest item update", this.data.content)
-  }
+  },
 };
 </script>
 
@@ -77,18 +77,20 @@ export default {
   <div ref="element" :class="focused ? 'focus' : 'blur'" :style="style">
     {{ data.content }}
   </div>
-  <div :style="{
-    left: data.width/2,
-    top: data.height/2,
-    width: 10,
-    height: 10,
-    backgroundColor: focused ? '#000000' : '#FF0000'
-  }"/>
+  <div
+    :style="{
+      left: data.width / 2,
+      top: data.height / 2,
+      width: 10,
+      height: 10,
+      backgroundColor: focused ? '#000000' : '#FF0000',
+    }"
+  />
 </template>
 
 <style scoped>
 .focus {
-  transform: scale3d(1.0, 1.0, 1);
+  transform: scale3d(1, 1, 1);
   transition: transform 0.25s linear;
   font-size: 30px;
 }

package/samples/TouchSample/MetroWidgetHorizontal.vue

@@ -5,7 +5,7 @@ import {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
-} from "jsview/utils/JsViewEngineWidget";
+} from "jsview";
 
 import Item from "./Item.vue";
 
@@ -51,7 +51,7 @@ export default {
 
 <template>
   <div class="rootSize">
-    <div :style="{ width: 1280, height: 720, left: 50, }">
+    <div :style="{ width: 1280, height: 720, left: 50 }">
       <div
         :style="{
           top: 0,

package/samples/TouchSample/MetroWidgetVertical.vue

@@ -5,7 +5,7 @@ import {
   WholePageSlide,
   SeamlessSlide,
   FixPositionSlide,
-} from "jsview/utils/JsViewEngineWidget";
+} from "jsview";
 
 import Item from "./Item.vue";
 

package/samples/TouchSample/TouchContainerHorizontal.vue

@@ -2,15 +2,16 @@
  * @Author: ChenChanghua
  * @Date: 2022-04-10 21:21:02
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-04-11 10:05:35
+ * @LastEditTime: 2022-07-08 14:40:19
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer, {
+import {
+  JsvTouchContainer,
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   DIRECTION_DISABLE,
-} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+} from "jsview";
 import { touchContainerH, measures } from "./data.js";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);

package/samples/TouchSample/TouchContainerVertical.vue

@@ -6,11 +6,12 @@
  * @Description: file content
 -->
 <script>
-import JsvTouchContainer, {
+import {
+  JsvTouchContainer,
   DIRECTION_VERTICAL,
   DIRECTION_HORIZONTAL,
   DIRECTION_DISABLE,
-} from "jsview/utils/JsViewVueWidget/JsvTouchContainer.vue";
+} from "jsview";
 import { touchContainerV, measures } from "./data.js";
 function randomColor() {
   let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);

package/samples/TransitPage/App.vue

@@ -1,41 +1,29 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-import DemoApp from "../DemoHomepage/App.vue"
-import ActivityApp from "../SimpleWidgetDemo/App.vue" // TODO
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+<script setup>
+import DemoApp from "../DemoHomepage/App.vue";
+import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
+import { jJsvRuntimeBridge } from "jsview";
+import { ref, onMounted } from "vue";
 
-@Options({
-  components: {
-     DemoApp, ActivityApp,
-  }
-})
-class TransitPage extends Vue {
-  constructor(props) {
-    super(props);
-    this.showMode = TransitPage.getShowMode()
-  }
-  mounted() {
-    jJsvRuntimeBridge.notifyPageLoaded();
+const getShowMode = () => {
+  let showMode = 0;
+  // showMode信息可被URL中的?后缀信息替换
+  if (window.location.search.indexOf("showMode=0") >= 0) {
+    showMode = 0;
+  } else if (window.location.search.indexOf("showMode=1") >= 0) {
+    showMode = 1;
   }
 
-  static getShowMode() {
-    let showMode = 0
-    // showMode信息可被URL中的?后缀信息替换
-    if (window.location.search.indexOf("showMode=0") >= 0) {
-      showMode = 0;
-    } else if (window.location.search.indexOf("showMode=1") >= 0) {
-      showMode = 1;
-    }
+  return showMode;
+};
 
-    return showMode;
-  }
-}
-TransitPage.Router = TransitPage.getShowMode() == 0 ? DemoApp.Router : ActivityApp.Router;
+const showMode = ref(getShowMode());
 
-export default TransitPage;
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
-<DemoApp v-if="showMode === 0" />
-<ActivityApp v-else-if="showMode === 1"/>
+  <DemoApp v-if="showMode === 0" />
+  <ActivityApp v-else-if="showMode === 1" />
 </template>

package/samples/VideoDemo/App.vue

@@ -1,93 +1,78 @@
-<script>
-import { provide, reactive, ref, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
+<script setup>
+import { provide, reactive, ref, watch } from "vue";
 import Controllor from "./components/Controllor";
 import VideoFrame from "./components/VideoFrame";
 
-@Options({
-  components: {
-    Controllor,
-    VideoFrame,
-  },
-})
+const Caption = {
+  offscreenVideo:
+    "名称:OffscreenVideo(自动播放）\n" +
+    "功能描述:\n" +
+    "1.离屏视频播放、支持前进/后退控制\n" +
+    "2.支持圆角设置\n" +
+    "3.支持平移、缩放、旋转等动画\n" +
+    "4.支持ObjectFit调整\n",
+  normalVideo:
+    "名称:Video\n" +
+    "功能描述:\n" +
+    "1.视频播放、支持前进/后退控制\n" +
+    "2.支持ObjectFit调整\n",
+};
 
-class App extends Vue {
-  constructor(props) {
-    super(props);
-    this.caption = null;
-    this.useTexture = ref(null);
-    this.videoTime = reactive({
-      currentTime: 0,
-      duration: 0,
-    })
-    this.objectFitTitle = ref(null);
-    this.playStatus = ref('');
-    provide('useTexture', this.useTexture)
-    provide('objectFit', ref(null))
-    provide('videoRect', ref({}))
-    provide('playVideo', ref(null))
-    provide('seekVideo', ref(null))
-    provide('enableAnimation', ref(null))
-    provide('videoTime', this.videoTime)
-    provide('objectFitTitle', this.objectFitTitle)
-    provide('playStatus', this.playStatus)
-    watch(this.useTexture, () => {
-      this.caption = (this.useTexture ? App.Caption.offscreenVideo : App.Caption.normalVideo);
-    });
-  }
-}
-App.Caption = {
-  offscreenVideo: "名称:OffscreenVideo(自动播放）\n"
-                + "功能描述:\n"
-                + "1.离屏视频播放、支持前进/后退控制\n"
-                + "2.支持圆角设置\n"
-                + "3.支持平移、缩放、旋转等动画\n"
-                + "4.支持ObjectFit调整\n",
-  normalVideo: "名称:Video\n"
-             + "功能描述:\n"
-             + "1.视频播放、支持前进/后退控制\n"
-             + "2.支持ObjectFit调整\n",
-}
-
-export default App;
+let caption = ref(null);
+let useTexture = ref(null);
+let videoTime = reactive({
+  currentTime: 0,
+  duration: 0,
+});
+let objectFitTitle = ref(null);
+let playStatus = ref("");
+provide("useTexture", useTexture);
+provide("objectFit", ref(null));
+provide("videoRect", ref({}));
+provide("playVideo", ref(null));
+provide("seekVideo", ref(null));
+provide("enableAnimation", ref(null));
+provide("videoTime", videoTime);
+provide("objectFitTitle", objectFitTitle);
+provide("playStatus", playStatus);
+watch(useTexture, () => {
+  caption.value = useTexture.value ? Caption.offscreenVideo : Caption.normalVideo;
+});
 </script>
 
 <template>
-<div
+  <div
     :style="{
-      top: 0, left: 0,
-      width: 1280, height: 720,
-      backgroundColor: 'rgb(222,211,140)'
+      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) }}
+    <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
+    <VideoFrame :key="useTexture" />
+
+    <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
+    <div class="caption" :key="useTexture">
+      {{ caption }}
     </div>
-    <div class="text duration">
-      {{ '/' + Math.ceil(videoTime.duration) }}
+    <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>
-  <Controllor class="controllor"/>
-</div>
 </template>
 
 <style scoped>
@@ -95,16 +80,16 @@ export default App;
   text-align: left;
   font-size: 24px;
   line-height: 30px;
-  color: #FFFFFF;
+  color: #ffffff;
   left: 10;
   top: 10;
   width: 400;
   height: 180;
-  background-color: rgba(27,38,151,0.8);
+  background-color: rgba(27, 38, 151, 0.8);
 }
 
 .text {
-  color: #FF0000;
+  color: #ff0000;
   font-size: 24px;
   top: 550;
   width: 60;
@@ -133,5 +118,4 @@ export default App;
   left: 40;
   top: 600;
 }
-
 </style>