@shijiu/jsview-vue-samples 2.2.35 → 2.2.128

package/BakeViewDemo/AnimatePic.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { onMounted, onUnmounted, shallowRef } from "vue";
+import { getDataUrl } from "../CommonUtils/ResourceData";
+//无网络环境下使用
+const DemoResourceBase = getDataUrl();
+const item_url = DemoResourceBase
+  ? `${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
+  : "http://oss.image.qcast.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+
+const staticLeftPos = shallowRef(0);
+let moveLeftTimer = -1;
+
+onMounted(() => {
+  moveLeftTimer = setInterval(() => {
+    if (staticLeftPos.value > 200) {
+      staticLeftPos.value = 0;
+    } else {
+      staticLeftPos.value = staticLeftPos.value + 10;
+    }
+  }, 800);
+});
+
+onUnmounted(() => {
+  if (moveLeftTimer != -1) {
+    clearInterval(moveLeftTimer);
+    moveLeftTimer = -1;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        left: staticLeftPos,
+        width: 50,
+        height: 50,
+        backgroundImage: `url(${item_url})`,
+      }"
+    />
+    <div
+      className="blockStyle"
+      :style="{
+        backgroundColor: '#0000FF',
+        animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+      }"
+    />
+    <img
+      className="blockStyle"
+      :style="{
+        objectFit: 'contain',
+        animation: 'opacityDemo_CompositeOpacity 3s infinite',
+      }"
+      :src="item_url"
+    />
+  </div>
+</template>
+
+<style scoped>
+.blockStyle {
+  top: 50;
+  left: 50;
+  width: 150;
+  height: 150;
+}
+
+.picTitleTextClass {
+  font-size: 25;
+  height: 68;
+  line-height: 34;
+  color: #000000;
+  text-align: "center";
+}
+
+@keyframes opacityDemo_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+}
+</style>

package/BakeViewDemo/App.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import { onMounted, onUnmounted, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+import AnimatePic from "./AnimatePic.vue";
+import { jJsvRuntimeBridge, JsvTextureStoreApi, JsvFilterView } from "jsview";
+
+const router = useRouter();
+
+const vCapturedTexture = shallowRef(null);
+// const vCapturedTexture = shallowRef("123");
+const vToCapture = shallowRef(null);
+
+window.MyCapture = vToCapture;
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+};
+
+let loopCaptureTimer = -1;
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+
+  loopCaptureTimer = setInterval(() => {
+    JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      (textureName, autoRecycle, w, h) => {
+        vCapturedTexture.value = textureName;
+        console.log(`capture done id=${textureName} w=${w} h=${h}`);
+      }
+    );
+  }, 2200);
+});
+
+onUnmounted(() => {
+  if (loopCaptureTimer != -1) {
+    clearInterval(loopCaptureTimer);
+    loopCaptureTimer = -1;
+  }
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      :style="{
+        textAlign: 'center',
+        fontSize: 30,
+        lineHeight: 50,
+        color: '#ffffff',
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      左边的div会被制成快照(每2秒)显示在右图
+    </div>
+    <div
+      ref="vToCapture"
+      :style="{
+        left: 140,
+        top: 200,
+        width: 300, // 截屏区域的宽
+        height: 300, // 截屏区域的高
+      }"
+    >
+      <jsv-filter-view :width="300" :height="300">
+        <div
+          :style="{
+            width: 300,
+            height: 300,
+            backgroundColor: 'rgb(128, 128, 0)',
+          }"
+        />
+        <animate-pic />
+      </jsv-filter-view>
+    </div>
+
+    <div
+      v-if="vCapturedTexture != null"
+      :style="{
+        top: 200,
+        left: 650,
+        width: 150,
+        height: 150,
+        backgroundImage: `jsvtexturestore://${vCapturedTexture}`,
+      }"
+    />
+  </jsv-focus-block>
+</template>
+
+<style scoped></style>

package/ClickDivDemo/App.vue

@@ -0,0 +1,150 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:58:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 14:20:46
+ * @Description: file content
+-->
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+// @click处理项目的响应处理
+const clickItemColor = shallowRef("#c3aa20");
+const onClickItemClick = () => {
+  clickItemColor.value = "#ba69af";
+  // 点击后改变背景颜色来提示
+  setTimeout(() => {
+    clickItemColor.value = "#c3aa20";
+  }, 150);
+};
+
+// TapListener处理项目的响应处理
+const tapItemColor = shallowRef("#c3aa20");
+const tapDivRef = shallowRef(null);
+const registerTap = () => {
+  tapDivRef.value.jsvSetTapListener({
+    // 长按响应，以变色来回应
+    onLongPress: () => {
+      tapItemColor.value = "#25ac47";
+      console.log("Long pressed");
+    },
+
+    // 长按响应结束，以颜色还原来回应
+    onLongPressRelease: () => {
+      tapItemColor.value = "#c3aa20";
+      console.log("Long pressed release");
+    },
+
+    // 长按响应取消，通过长按 + 不放手时移动阿里激活，以颜色还原来回应
+    onCancel: () => {
+      tapItemColor.value = "#c3aa20";
+      console.log("canceled");
+    },
+
+    // 同样的click处理，以blink来回应
+    onClick: () => {
+      console.log("onClicked");
+      tapItemColor.value = "#ba69af";
+      // 点击后改变背景颜色来提示
+      setTimeout(() => {
+        tapItemColor.value = "#c3aa20";
+      }, 150);
+    },
+  });
+};
+
+onMounted(() => {
+  registerTap();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      class="baseTextSet"
+      :style="{
+        lineHeight: 50,
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      展示两种接受点击事件div的写法
+    </div>
+
+    <div
+      class="baseTextSet clickItem"
+      :style="{
+        left: 300,
+        top: 230,
+        backgroundColor: clickItemColor,
+      }"
+      @click="onClickItemClick"
+    >
+      {{ "@click" }}
+    </div>
+    <div
+      class="baseTextSet"
+      :style="{ left: 174, top: 350, width: 400, height: 50, lineHeight: 50 }"
+    >
+      {{ "点击会闪紫色" }}
+    </div>
+
+    <div
+      class="baseTextSet clickItem"
+      ref="tapDivRef"
+      :style="{
+        left: 600,
+        top: 230,
+        backgroundColor: tapItemColor,
+        width: 320,
+        lineHeight: 50,
+      }"
+    >
+      {{ "TapListener\n支持Click/LongPress" }}
+    </div>
+
+    <div
+      class="baseTextSet"
+      :style="{ left: 550, top: 350, width: 400, height: 100, lineHeight: 50 }"
+    >
+      {{ "点击会闪紫色\n长按会出现绿色" }}
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.baseTextSet {
+  text-align: center;
+  font-size: 30;
+  color: #ffffff;
+}
+
+.clickItem {
+  width: 150;
+  height: 100;
+  line-height: 100;
+}
+</style>

package/DemoHomepage/components/Dialog.vue

@@ -1,11 +1,20 @@
 <script setup>
-import { shallowRef } from "vue"
+import { shallowRef, watchEffect } from "vue";
+import { useFocusHub } from "jsview";
 const props = defineProps({
   name: String,
   onAction: Function,
-})
+  focused: Boolean,
+});
 
-let focusId = shallowRef(0)
+let focusId = shallowRef(0);
+
+const focusHub = useFocusHub();
+watchEffect(() => {
+  if (props.focused) {
+    focusHub.setFocus(props.name);
+  }
+});
 
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
@@ -29,25 +38,42 @@ const onKeyDown = (ev) => {
     default:
   }
   return true;
-}
+};
 const actionDefines = {
-  onKeyDown
-}
+  onKeyDown,
+};
+
+const funcDialogOuterClick = () => {
+  console.log("Clicked on dialog outer");
+  props.onAction("back");
+};
+
+const funcDialogBackClick = () => {
+  console.log("Clicked on dialog back");
+};
+
+const funcDialogOKClick = () => {
+  props.onAction("ok");
+};
 
+const funcDialogNGClick = () => {
+  props.onAction("cancel");
+};
 </script>
 
 <template>
-  <jsv-focus-block autoFocus :name="props.name" :onAction="actionDefines">
+  <jsv-focus-block :name="props.name" :onAction="actionDefines">
+    <div :style="{ width: 1280, height: 720 }" @click="funcDialogOuterClick" />
     <div :style="{ top: 200, left: 465 }">
-      <div class="background"></div>
+      <div class="background" @click="funcDialogBackClick"></div>
       <div class="message">是否退出</div>
       <div :style="{ top: 120, left: 30 }">
         <div v-if="focusId == 0" class="focus"></div>
-        <div class="normal">确定</div>
+        <div class="normal" @click="funcDialogOKClick">确定</div>
       </div>
       <div :style="{ top: 120, left: 220 }">
         <div v-if="focusId == 1" class="focus"></div>
-        <div class="normal">取消</div>
+        <div class="normal" @click="funcDialogNGClick">取消</div>
       </div>
     </div>
   </jsv-focus-block>
@@ -86,4 +112,4 @@ const actionDefines = {
   font-size: 40;
   text-align: center;
 }
-</style>
+</style>

package/DemoHomepage/components/TabFrame.vue

@@ -46,10 +46,17 @@ const data = [
   {
     width: 200,
     height: 50,
-    name: "游戏实例",
+    name: "触控",
     focusable: true,
     id: 3,
   },
+  {
+    width: 200,
+    height: 50,
+    name: "游戏实例",
+    focusable: true,
+    id: 4,
+  },
 ];
 const direction = VERTICAL;
 </script>

package/DemoHomepage/router.js

@@ -16,10 +16,15 @@ let routeList = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
+  // {
+  //   name: 'FreeMoveResize',
+  //   path: '/feature/FreeMoveResize',
+  //   component: () => import('jsview-vue-samples/FreeMoveResize/App.vue'),
+  // },
   {
-    name: '清明节组件效果测试',
-    path: '/Operations/TombSweepingDayTest',
-    component: () => import('jsview-vue-samples/TombSweepingDayTest/App.vue'),
+    name: 'div快照功能',
+    path: '/feature/BakeViewDemo',
+    component: () => import('jsview-vue-samples/BakeViewDemo/App.vue'),
   },
   {
     name: 'FlexDemo',
@@ -73,11 +78,6 @@ let routeList = [
     path: '/feature/GridDemo',
     component: () => import('jsview-vue-samples/GridDemo/App.vue'),
   },
-  {
-    name: '.9图焦点框漂移',
-    path: '/Operations/NinePatchDemo',
-    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
-  },
   {
     name: '有命名空间的焦点切换',
     path: '/feature/BasicFocusControl',
@@ -104,25 +104,15 @@ let routeList = [
     path: '/feature/TextureSize',
     component: () => import('jsview-vue-samples/TextureSize/App.vue'),
   },
-  {
-    name: '动图',
-    path: '/Operations/AnimPicture',
-    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
-  },
-  {
-    name: '粒子效果',
-    path: '/Operations/SprayView',
-    component: () => import('jsview-vue-samples/SprayView/App.vue'),
-  },
   {
     name: '长文字',
     path: '/feature/LongText',
     component: () => import('jsview-vue-samples/LongText/App.vue'),
   },
   {
-    name: '长图片',
-    path: '/Operations/LongImage',
-    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+    name: '长文字Latex',
+    path: '/feature/LongTextLatex',
+    component: () => import('jsview-vue-samples/LongTextLatex/App.vue'),
   },
   {
     name: '二维码',
@@ -160,6 +150,31 @@ let routeList = [
     path: '/feature/Input',
     component: () => import('jsview-vue-samples/Input/App.vue'),
   },
+  {
+    name: '情景主题效果:雨',
+    path: '/Operations/TombSweepingDayTest',
+    component: () => import('jsview-vue-samples/TombSweepingDayTest/App.vue'),
+  },
+  {
+    name: '.9图焦点框漂移',
+    path: '/Operations/NinePatchDemo',
+    component: () => import('jsview-vue-samples/NinePatchDemo/App.vue'),
+  },
+  {
+    name: '动图',
+    path: '/Operations/AnimPicture',
+    component: () => import('jsview-vue-samples/AnimPicture/App.vue'),
+  },
+  {
+    name: '粒子效果',
+    path: '/Operations/SprayView',
+    component: () => import('jsview-vue-samples/SprayView/App.vue'),
+  },
+  {
+    name: '长图片',
+    path: '/Operations/LongImage',
+    component: () => import('jsview-vue-samples/LongImage/App.vue'),
+  },
   {
     name: '拼图demo',
     path: '/Operations/MaskClip',
@@ -306,11 +321,6 @@ let routeList = [
     path: '/feature/LatexFormula',
     component: () => import('jsview-vue-samples/LatexFormula/App.vue'),
   },
-  {
-    name: '触控示例',
-    path: '/feature/TouchWidget',
-    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
-  },
   {
     name: 'Swiper3dTest',
     path: '/Operations/Swiper3D',
@@ -331,6 +341,31 @@ let routeList = [
     path: '/Operations/SceneTransition',
     component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
   },
+  {
+    name: '点击Div',
+    path: '/touch/ClickDivDemo',
+    component: () => import('jsview-vue-samples/ClickDivDemo/App.vue'),
+  },
+  {
+    name: '触控示例',
+    path: '/touch/TouchWidget',
+    component: () => import('jsview-vue-samples/TouchWidget/App.vue'),
+  },
+  // {
+  //   name: 'FreeMove触控磁吸',
+  //   path: '/touch/FreeMoveChildAttract',
+  //   component: () => import('jsview-vue-samples/FreeMoveChildAttract/App.vue'),
+  // },
+  // {
+  //   name: 'FreeMoveLink',
+  //   path: '/touch/FreeMoveLink',
+  //   component: () => import('jsview-vue-samples/FreeMoveLink/App.vue'),
+  // },
+  {
+    name: '可拖拽进度条',
+    path: '/touch/ScrollBoxTest',
+    component: () => import('jsview-vue-samples/ScrollBoxTest/App.vue'),
+  },
 ];
 
 //添加MetroWidget demo

package/DemoHomepage/views/Homepage.vue

@@ -6,15 +6,16 @@ import TabFrame from "../components/TabFrame.vue";
 import BodyFrame from "../components/BodyFrame.vue";
 import Dialog from "../components/Dialog.vue";
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
+const isDevelopment = process.env.NODE_ENV !== "production";
 
 const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
 
 //功能实例 MetroWidgetData 首页/运营 游戏实例
 const featureData = [];
 const metroWidgetData = [];
-const operationsData=[];
-const gameData=[]
+const operationsData = [];
+const gameData = [];
+const touchTestData = [];
 
 const routeList = useRouter().getRoutes();
 for (let item of routeList) {
@@ -25,23 +26,35 @@ for (let item of routeList) {
     height: 100,
     focusable: true,
   };
-  if (item.path.indexOf("feature") >= 0) {
+  if (item.path.indexOf("/feature/") >= 0) {
     obj.backgroundColor = colorTemplete[featureData.length % 4];
     featureData.push(obj);
-  } else if (item.path.indexOf("metroWidget") >= 0) {
+  } else if (item.path.indexOf("/metroWidget/") >= 0) {
     obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
     metroWidgetData.push(obj);
-  }else if (item.path.indexOf("Operations") >= 0) {
+  } else if (item.path.indexOf("/Operations/") >= 0) {
     obj.backgroundColor = colorTemplete[operationsData.length % 4];
     operationsData.push(obj);
-  }else if (item.path.indexOf("Game") >= 0) {
+  } else if (item.path.indexOf("/Game/") >= 0) {
     obj.backgroundColor = colorTemplete[gameData.length % 4];
     gameData.push(obj);
+  } else if (item.path.indexOf("/touch/") >= 0) {
+    obj.backgroundColor = colorTemplete[touchTestData.length % 4];
+    touchTestData.push(obj);
   }
 }
-const dataList = [featureData, metroWidgetData,operationsData,gameData];
-
+const dataList = [
+  featureData,
+  metroWidgetData,
+  operationsData,
+  touchTestData,
+  gameData,
+];
+
+// 控制v-show
+// 不用v-if是为了测试已存在的view从hide到show，并挡住其他view，是否touch判断层级正常
 let showExitDialog = shallowRef(false);
+
 let contentData = shallowRef(dataList[0]);
 let tabId = shallowRef(0);
 
@@ -108,7 +121,7 @@ let tabItemClick = (id, data) => {
     tabId.value = data.id;
     contentData.value = dataList[data.id];
   }
-}
+};
 
 let onDialogAction = (msg) => {
   showExitDialog.value = false;
@@ -141,7 +154,6 @@ onActivated(() => {
 onDeactivated(() => {
   focusNameOfDeactive = focusHub.getDeactivedPageFocus();
 });
-
 </script>
 
 <template>
@@ -149,7 +161,11 @@ onDeactivated(() => {
     <div class="address">
       {{ address }}
     </div>
-    <div class="logo">{{ 'JsView-Vue3 (Vite3) [' + (isDevelopment ? 'Debug' : 'Release') + ']' }}</div>
+    <div class="logo">
+      {{
+        "JsView-Vue3 (Vite3) [" + (isDevelopment ? "Debug" : "Release") + "]"
+      }}
+    </div>
 
     <jsv-focus-block
       autoFocus
@@ -183,9 +199,10 @@ onDeactivated(() => {
       </div>
 
       <Dialog
-        v-if="showExitDialog"
+        v-show="showExitDialog"
         :name="name + '/exitDialog'"
         :onAction="onDialogAction"
+        :focused="showExitDialog"
       ></Dialog>
     </jsv-focus-block>
   </div>