@shijiu/jsview-vue-samples 2.1.428 → 2.1.448-test.0

package/DemoHomepage/router.js

@@ -16,11 +16,6 @@ let routeList = [
     path: '/feature/Basic',
     component: () => import('jsview-vue-samples/Basic/App.vue'),
   },
-  // {
-  //   name: '场景过渡',
-  //   path: '/feature/SceneTransition',
-  //   component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
-  // },
   {
     name: 'FlexDemo',
     path: '/feature/FlexDemo',
@@ -48,6 +43,11 @@ let routeList = [
     path: '/feature/TextureStoreTest',
     component: () => import('jsview-vue-samples/TextureStoreTest/App.vue'),
   },
+  {
+    name: 'NinePatch对齐测试',
+    path: '/feature/NinePatchTester',
+    component: () => import('jsview-vue-samples/NinePatchTester/App.vue'),
+  },
   {
     name: 'NativeSharedView测试',
     path: '/feature/TestNativeSharedView',
@@ -305,14 +305,19 @@ let routeList = [
   },
   {
     name: '进度条',
-    path: '/Game/ProgressBar',
+    path: '/Operations/ProgressBar',
     component: () => import('jsview-vue-samples/ProgressBar/App.vue'),
   },
   {
     name: '春联测试',
-    path: '/Game/CoupletsTest',
+    path: '/Operations/CoupletsTest',
     component: () => import('jsview-vue-samples/CoupletsTest/App.vue'),
-  }
+  },
+  {
+    name: '场景过渡',
+    path: '/Operations/SceneTransition',
+    component: () => import('jsview-vue-samples/SceneTransition/App.vue'),
+  },
 ];
 
 //添加MetroWidget demo

package/NinePatchTester/App.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="bgStyle">
+    <div :style="{ top: 50, left: 80 }">
+      <div
+        :style="{
+          top: (sampleImageWidth - innerRadius2) / 2,
+          left: (sampleImageWidth - innerRadius2) / 2,
+          width: innerRadius2,
+          height: innerRadius2,
+          fontSize: 10,
+          textAlign: 'center',
+          lineHeight: innerRadius2,
+          backgroundColor: '#FF0000',
+        }"
+      >
+        {{ `圆环内径方形${innerRadius2}x${innerRadius2}` }}
+      </div>
+      <div
+        :style="{
+          width: sampleImageWidth,
+          height: sampleImageWidth,
+          backgroundImage: `jsvtexturestore://${sourceId}`,
+        }"
+      />
+      <div
+        :style="{
+          top: sampleImageWidth + 5,
+          width: sampleImageWidth,
+          height: 12,
+          fontSize: 10,
+          textAlign: 'center',
+          lineHeight: 12,
+        }"
+      >
+        {{ `NinePatch原图尺寸 ${sampleImageWidth}x${sampleImageWidth}` }}
+      </div>
+    </div>
+
+    <div :style="{ top: 50, left: 80 + sampleImageWidth + 20 }">
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(255,0,0)',
+        }"
+      />
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,100,200)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{
+            `需要外框对齐的带圆角矩形\n\nborderRadius = 圆环内径 / 2\n= ${innerRadius2} / 2`
+          }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div
+      :style="{
+        top: 50,
+        left: 80 + sampleImageWidth + 20 + vTargetRectWidth + 20,
+      }"
+    >
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,100,200)',
+        }"
+      />
+      <div
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          backgroundColor: 'rgb(0,0,255)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      />
+      <JsvNinePatch
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+        }"
+        :imageUrl="`jsvtexturestore://${sourceId}`"
+        :imageWidth="vImageWidth"
+        :centerWidth="vCenterWidth"
+        :imageDspWidth="vImageDspWidth"
+        :borderOutset="vBorderOutset"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{
+            `带圆角矩形 和 NinePatch图形伸缩\n\nborderOutset = (原图高 - 圆环内径) / 2\n= (${sampleImageWidth} - ${innerRadius2}) / 2\n\ncenterWidth = 1`
+          }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { shallowRef, onBeforeUnmount } from "vue";
+import { JsvNinePatch, JsvTextureStoreApi, JsvFlexDiv } from "jsview";
+
+// 调试参数输入设定
+const innerRadius2 = 110; // 最右边图片的内直径(也是右边图矩形的边长值)
+const circleLineWidth = 10; // 最右边图的边缘粗细
+const sampleImageWidth = 148; // 最右边图形的画布尺寸，画布为正方形
+
+const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight = 300; // 需要对齐区域的矩形高
+const vTargetRectRaidus = innerRadius2 / 2; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 计算后的对应NinePatch参数
+let vBorderOutset = (sampleImageWidth - innerRadius2) / 2; // 设置值为图片长度减去内直径除以2
+let vImageWidth = sampleImageWidth; // 原图尺寸设置
+let vImageDspWidth = sampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
+let vCenterWidth = 1; // 圆形的.9图, 中心固定为1
+
+// 设置设定模拟绘制.9图
+let canvasRef;
+let sourceId = shallowRef("");
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+let circleRadius =
+  Math.floor(innerRadius2 / 2) + Math.floor(circleLineWidth / 2); // 圆环绘制路径是粗线的中心线，所以要减去一半的线宽
+let customPath = canvasRef.circlePath(
+  Math.floor(sampleImageWidth / 2),
+  Math.floor(sampleImageWidth / 2),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(200,200,200,0.5)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
+sourceId.value = canvasRef.commit(); // texture和div的textureStore绑定
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value); // 释放texture资源
+});
+</script>
+
+<style lang="css" scoped>
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #819864;
+}
+</style>

package/SceneTransition/App.vue

@@ -1,177 +1,268 @@
 <template>
-  <JsvPreload :preloadList="preload_info"></JsvPreload>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
   <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
-    <div :style="{ width: 1280, height: 720, backgroundImage: bg }">
-      <JsvSceneTransition
-        v-show="isShow"
-        :imageUrl="fly1"
-        :ArraySet="ArraySet"
-        :displayWidth="1280"
-        :style="style"
-        :onOff="onOff"
-      ></JsvSceneTransition>
+    <div class="bgStyle">
+      <div :style="{ width: 640, height: 360, backgroundImage: bg, top: 100 }">
+        <JsvSceneTransition
+          v-show="isShow"
+          :imageUrl="fly1"
+          :ArraySet="SelectArray"
+          :displayWidth="640"
+          :style="style"
+          :onOff="onOff"
+        ></JsvSceneTransition>
+      </div>
       <!-- 文字说明 -->
-      <div class="text">{{ '操作说明：按【OK】键进行碎片过渡效果。' }}</div>
+      <div class="text" :style="{ left: 20, top: 20 }">
+        {{ "操作说明：按【OK】键进行随机遮罩层碎片过渡效果。" }}
+      </div>
+      <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
+      <div class="text" :style="{ left: 400, top: 500 }">
+        {{ "按需采用碎片式的图片来进行遮罩，此例只展示一组遮罩素材。" }}
+      </div>
+      <!-- 报错小框 -->
+      <div v-if="boxSwitch" class="smallBox">
+        <div class="text" :style="{ left: 50, top: 40 }">
+          {{ "图片没预加载完成！" }}
+        </div>
+      </div>
+      <!-- 素材展示 -->
+      <div
+        :style="{
+          width: 320,
+          height: 180,
+          backgroundImage: fly1,
+          top: 80,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 320,
+          height: 180,
+          backgroundImage: fly2,
+          top: 280,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[0].url,
+          top: 500,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[1].url,
+          top: 500,
+          left: 800,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[2].url,
+          top: 500,
+          left: 920,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[3].url,
+          top: 550,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[4].url,
+          top: 550,
+          left: 820,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[5].url,
+          top: 550,
+          left: 920,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[6].url,
+          top: 600,
+          left: 700,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 100,
+          height: 60,
+          backgroundImage: ArraySet1[7].url,
+          top: 600,
+          left: 770,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 80,
+          height: 60,
+          backgroundImage: ArraySet1[8].url,
+          top: 600,
+          left: 860,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 60,
+          height: 60,
+          backgroundImage: ArraySet1[9].url,
+          top: 600,
+          left: 930,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 30,
+          height: 30,
+          backgroundImage: ArraySet1[10].url,
+          top: 590,
+          left: 950,
+        }"
+      ></div>
+      <div
+        :style="{
+          width: 40,
+          height: 60,
+          backgroundImage: ArraySet1[11].url,
+          top: 600,
+          left: 980,
+        }"
+      ></div>
     </div>
   </jsv-focus-block>
 </template>
 
 <script setup>
-import { shallowRef } from "vue";
-import { JsvPreload, buildPreloadInfo,JsvSceneTransition } from "jsview";
-import fly1 from "./images/fly1.jpg";
-import fly2 from "./images/fly2.jpg";
-//P1格式，12张
-import png1 from "./images/mask/1.png";
-import png2 from "./images/mask/2.png";
-import png3 from "./images/mask/3.png";
-import png4 from "./images/mask/4.png";
-import png5 from "./images/mask/5.png";
-import png6 from "./images/mask/6.png";
-import png7 from "./images/mask/7.png";
-import png8 from "./images/mask/8.png";
-import png9 from "./images/mask/9.png";
-import png10 from "./images/mask/10.png";
-import png11 from "./images/mask/11.png";
-import png12 from "./images/mask/12.png";
-//预加载
-const preload_info = [
-  buildPreloadInfo(png1),
-  buildPreloadInfo(png2),
-  buildPreloadInfo(png3),
-  buildPreloadInfo(png4),
-  buildPreloadInfo(png5),
-  buildPreloadInfo(png6),
-  buildPreloadInfo(png7),
-  buildPreloadInfo(png8),
-  buildPreloadInfo(png9),
-  buildPreloadInfo(png10),
-  buildPreloadInfo(png11),
-  buildPreloadInfo(png12),
-  buildPreloadInfo(fly1),
-  buildPreloadInfo(fly2),
-];
+import { shallowRef, onBeforeUnmount } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import JsvSceneTransition from "./jsvSceneTransition.vue";
+import { ArraySet1 } from "./maskConfig/config1";
+import { ArraySet2 } from "./maskConfig/config2";
+import { ArraySet3 } from "./maskConfig/config3";
+
+const fly1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly1.jpg";
+const fly2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly2.jpg";
+//预加载数组
+const preload_info = [buildPreloadInfo(fly1), buildPreloadInfo(fly2)];
+
+//三个配置数组分别添加自己的图片地址进行预加载
+ArraySet1.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+ArraySet2.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+ArraySet3.forEach((item, index) => {
+  preload_info.push(buildPreloadInfo(item.url));
+});
+
+//预加载完成标志
+let isDone = shallowRef(false);
+//小框显示标志
+let boxSwitch = shallowRef(false);
+//计时器
+let timer = { id: -1 };
+//预加载完成回调
+const loadDone = () => {
+  isDone.value = true;
+};
 const style = { width: 1280, height: 720 };
 let isShow = shallowRef(false);
 let bg = shallowRef(fly1);
 let onOff = shallowRef(false);
 
-//12个FreeMove引用
-const refArray = [];
-for (let i = 0; i < 12; i++) {
-  refArray.push(shallowRef(null));
-}
-
-const ArraySet = [
-  {
-    left: 0,
-    top: 0,
-    width: 521,
-    height: 302,
-    url: png1,
-  },
-  {
-    left: 301,
-    top: 0,
-    width: 590,
-    height: 266,
-    url: png2,
-  },
-  {
-    left: 693,
-    top: 0,
-    width: 587,
-    height: 306,
-    url: png3,
-  },
-  {
-    left: 0,
-    top: 140,
-    width: 561,
-    height: 431,
-    url: png4,
-  },
-  {
-    left: 482,
-    top: 140,
-    width: 409,
-    height: 377,
-    url: png5,
-  },
-  {
-    left: 717,
-    top: 247,
-    width: 563,
-    height: 247,
-    url: png6,
-  },
-  {
-    left: 0,
-    top: 385,
-    width: 533,
-    height: 335,
-    url: png7,
-  },
-  {
-    left: 333,
-    top: 392,
-    width: 293,
-    height: 328,
-    url: png8,
-  },
-  {
-    left: 569,
-    top: 452,
-    width: 213,
-    height: 268,
-    url: png9,
-  },
-  {
-    left: 714,
-    top: 405,
-    width: 332,
-    height: 315,
-    url: png10,
-  },
-  {
-    left: 810,
-    top: 387,
-    width: 172,
-    height: 117,
-    url: png11,
-  },
-  {
-    left: 893,
-    top: 428,
-    width: 387,
-    height: 292,
-    url: png12,
-  },
-];
+//随机选择数组
+const randomSelect = () => {
+  let randomNum = Math.random();
+  if (randomNum <= 0.33) {
+    return ArraySet1;
+  } else if (randomNum <= 0.66) {
+    return ArraySet2;
+  } else {
+    return ArraySet3;
+  }
+};
+const SelectArray = randomSelect();
 
 const onKeyDown = (ev) => {
   switch (ev.keyCode) {
     case 13:
-      bg.value = fly2;
-      onOff.value = true;
-      isShow.value = true;
+      if (isDone.value == true) {
+        bg.value = fly2;
+        onOff.value = true;
+        isShow.value = true;
+      } else {
+        boxSwitch.value = true;
+        timer.id = setTimeout(() => {
+          boxSwitch.value = false;
+        }, 1000);
+      }
+
       break;
 
     default:
       break;
   }
 };
+//卸载时清除定时器
+onBeforeUnmount(() => {
+  if (timer.id) {
+    clearTimeout(timer.id);
+    timer.id = -1;
+  }
+});
 </script>
 
 <style scoped>
-.text{
-  width:300;
-  height:60;
-  color:#FFFFFF;
+.text {
+  width: 300;
+  height: 80;
+  color: #ffffff;
   font-weight: bold;
   line-height: 26;
   font-size: 24;
-  left:20;
-  top:20;
+}
+.bgStyle {
+  width: 1280;
+  height: 720;
+  background-color: #007788;
+}
+.smallBox {
+  width: 300;
+  height: 100;
+  left: 170;
+  top: 230;
+  border-radius: 20;
+  background-color: #006400;
 }
 </style>