@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/MetroWidgetDemos/focusableItemMetroWidget/WidgetItem.vue

@@ -40,10 +40,12 @@ const onFocus = (rect) => {
    *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
    */
   mwRef.value?.setEnterFocusRect(rect);
+  /** 重要代码: 子节点的获焦必须在往 onAction 注册的 onFocus中调用, 否则父MetroWidget不知道当前真正获焦的 item 是哪一个
+   */
   focusHub.setFocus(props.data.name);
 };
 const onBlur = () => {
-  //onBlur时需要返还焦点给父MetroWidget
+  /** 重要代码: onBlur时需要返还焦点给父MetroWidget */
   focusHub.returnFocusToParent();
 };
 

package/MetroWidgetDemos/routeList.js

@@ -5,95 +5,95 @@
  */
 export default [
   {
-    name: "基础示例",
+    meta: { nameText: "基础示例", },
     path: "/metroWidget/basic",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/basic/App.vue"),
   },
   {
-    name: "direction",
+    meta: { nameText: "direction", },
     path: "/metroWidget/direction",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/direction/App.vue"),
   },
   {
-    name: "padding",
+    meta: { nameText: "padding", },
     path: "/metroWidget/padding",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/padding/App.vue"),
   },
   {
-    name: "slideSetting",
+    meta: { nameText: "slideSetting", },
     path: "/metroWidget/slideSetting",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/slideSetting/App.vue"),
   },
   {
-    name: "layoutType",
+    meta: { nameText: "layoutType", },
     path: "/metroWidget/layoutType",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/layoutType/App.vue"),
   },
   {
-    name: "嵌套(基础)",
+    meta: { nameText: "嵌套(基础)", },
     path: "/metroWidget/focusableItemBasic",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemBasic/App.vue"),
   },
   {
-    name: "嵌套(混合)",
+    meta: { nameText: "嵌套(混合)", },
     path: "/metroWidget/focusableItemMix",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMix/App.vue"),
   },
   {
-    name: "嵌套(MetroWidget)",
+    meta: { nameText: "嵌套(MetroWidget)", },
     path: "/metroWidget/focusableItemMetroWidget",
     component: () => import("@shijiu/jsview-vue-samples/MetroWidgetDemos/focusableItemMetroWidget/App.vue"),
   },
   {
-    name: "乒乓模式",
+    meta: { nameText: "乒乓模式", },
     path: "/metroWidget/PingPong",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PingPong/App.vue"),
   },
   {
-    name: "性能测试",
+    meta: { nameText: "性能测试", },
     path: "/metroWidget/PerformanceTest",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
   {
-    name: "骨架图",
+    meta: { nameText: "骨架图", },
     path: "/metroWidget/SkeletonDiagram",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SkeletonDiagram/App.vue"),
   },
   {
-    name: ".9焦点页面",
+    meta: { nameText: ".9焦点页面", },
     path: "/metroWidget/ninePatchFocusPage",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/ninePatchFocusPage/App.vue"),
   },
   {
-    name: "item尺寸更新",
+    meta: { nameText: "item尺寸更新", },
     path: "/metroWidget/itemSizeUpdate",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/itemSizeUpdate/App.vue"),
   },
   {
-    name: "三层嵌套",
+    meta: { nameText: "三层嵌套", },
     path: "/metroWidget/TripleWidget",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/TripleWidget/App.vue"),
   },
   {
-    name: "数据刷新demo",
+    meta: { nameText: "数据刷新demo", },
     path: "/metroWidget/RefreshDemo",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/RefreshDemo/App.vue"),
   },
   {
-    name: "剧集翻页",
+    meta: { nameText: "剧集翻页", },
     path: "/metroWidget/SeamlessSlide",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
   },
   {
-    name: "多item分段显示",
+    meta: { nameText: "多item分段显示", },
     path: "/metroWidget/MassiveItems",
     component: () =>
       import("@shijiu/jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),

package/Poster3d/App.vue

@@ -0,0 +1,69 @@
+<template>
+  <Jsv3dStage :style="{ width: 1280, height: 720 }" :perspective="700">
+    <Poster3d
+      :position="rPosition"
+      :style="cStyle"
+      :divStyle="{ width: 400, height: 200 }"
+    >
+      <Jsv3dDiv
+        v-for="(item, index) in cSrcImgArray"
+        :style="{
+          width: 100,
+          height: 200,
+          left: index * 130 + 20,
+          backgroundImage: item,
+        }"
+      ></Jsv3dDiv>
+    </Poster3d>
+  </Jsv3dStage>
+</template>
+
+<script setup>
+import { Jsv3dStage, Jsv3dDiv } from "jsview";
+import { shallowReactive, onBeforeUnmount } from "vue";
+import Poster3d from "./Poster3d.vue";
+
+// 使用到的Jsview组件说明:
+// Jsv3dStage用来创建透视区域，透视区域以中间为3d的消失点, perspective为透视率，默认为1000，约小透视扭曲越明显
+// Jsv3dDiv为解决图片倾斜时的锯齿问题，放入Jsv3dStage的内容，如果可能发生旋转的div请全部使用Jsv3dDiv
+// Jsv3dDiv比div的渲染性能略低, 所以非3d场景，不要习惯性全替换成Jsv3dDiv
+
+// Poster3d为应用层样例组件，里面自带类似于tansition的动画功能，可以处理平移和旋转的配置
+
+//起始位置和旋转角
+const rPosition = shallowReactive({
+  x: 720,
+  y: 260,
+  rotateY: -30,
+});
+//3d组件的style
+const cStyle = {
+  width: 400,
+  height: 200,
+};
+//插槽的图片来源数组
+const cSrcImgArray = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228120_img_20230522225739.jpg",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228121_img_20230522225750.jpg",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Poster3d/App/element_228277_img_20230530144223.png",
+];
+//定时器
+let vTimer = { id: -1 };
+let vTimer1 = { id: -1 };
+vTimer.id = setTimeout(() => {
+  rPosition.x = 420;
+  rPosition.rotateY = 0;
+}, 3000);
+vTimer1.id = setTimeout(() => {
+  rPosition.x = 120;
+  rPosition.rotateY = 30;
+}, 6000);
+onBeforeUnmount(() => {
+  clearTimeout(vTimer.id);
+  clearTimeout(vTimer1.id);
+  vTimer.id = -1;
+  vTimer1.id = -1;
+});
+</script>
+
+<style lang="scss" scoped></style>

package/Poster3d/Poster3d.vue

@@ -0,0 +1,92 @@
+<script setup>
+/**
+ * @file
+ *
+ * 【模块 export 内容】
+ * Poster3D：3d移动动画的组件。
+ *  props说明:
+ *      @prop {Object}      position       包含x,y,y旋转的初始配置。
+ *      @prop {Number}      animDuration   动画时间，默认1秒
+ *      @prop {Object}      style          组件的width/height
+ *      @prop {Object}      divStyle       提供给jsv3dDiv的宽高
+ */
+
+import { shallowRef, watch } from "vue";
+import { Jsv3dDiv, getKeyFramesGroup } from "jsview";
+const props = defineProps({
+  position: { require: true, type: Object },
+  xRotate: { require: true, type: Number },
+  animDuration: { type: Number, default: 1 },
+  style: { type: Object, require: true },
+  divStyle: { type: Object, require: true },
+});
+const myPosition = {
+  x: props.position.x,
+  y: props.position.y,
+  rotateY: props.position?.rotateY,
+};
+let myAnim = shallowRef("");
+const styleShell = getKeyFramesGroup();
+let aniName = "";
+watch(
+  () => props.position,
+  (newValue, oldValue) => {
+    if (newValue.rotateY !== 0) {
+      aniName = `@keyframes go
+    { 
+    from { transform: translate3d(${-(
+      newValue.x - myPosition.x
+    )},0,0) rotate3d(0,1,0,${-newValue.rotateY}deg); } 
+    to 
+    { transform: translate3d(0,0,0)  rotate3d(0,1,0,${0}deg);  } }`;
+      myAnim.value = `go ${props.animDuration}s`;
+    } else {
+      aniName = `@keyframes start
+    { 
+    from { transform: translate3d(${-(
+      newValue.x - myPosition.x
+    )},0,0) rotate3d(0,1,0,${myPosition.rotateY}deg); } 
+    to 
+    { transform: translate3d(0,0,0)  rotate3d(0,1,0,${
+      newValue.rotateY
+    }deg);  } }`;
+      myAnim.value = `start ${props.animDuration}s`;
+    }
+    styleShell.insertRule(aniName);
+    myPosition.x = newValue.x;
+    myPosition.y = newValue.y;
+    myPosition.rotateY = newValue?.rotateY;
+  },
+  { deep: true }
+);
+const myEnd = () => {
+  const containsGo = aniName.includes("go");
+  if (containsGo) {
+    styleShell?.removeRule("go");
+  } else {
+    styleShell?.removeRule("start");
+  }
+  myAnim.value = null;
+};
+</script>
+<template>
+  <Jsv3dDiv
+    :style="{
+      width: props.style.width,
+      height: props.style.height,
+      left: props.position.x,
+      top: props.position.y,
+      transform: props.position.rotateY
+        ? `rotate3d(0,1,0,${props.position.rotateY}deg)`
+        : '',
+      backgroundColor: '#FF1313',
+      animation: myAnim,
+    }"
+    @animationend="myEnd"
+  >
+    <Jsv3dDiv :position="props.divStyle">
+      <slot></slot>
+    </Jsv3dDiv>
+  </Jsv3dDiv>
+</template>
+<style scoped></style>

package/PosterPacker/App.vue

@@ -14,9 +14,9 @@ import purple from "./images/purple.png";
 const ImgData = [orange, pink, red, yellowGreen, blue, darkGreen, purple];
 
 const ImageChinChilla =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
-const ImageLandscape = "https://oss.image.qcast.cn/ai-draw/landscape.jpeg";
-const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/BackgroundLongmao.jpg";
+const ImageLandscape = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/landscape.jpeg";
+const ImageOwl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/App/owl.jpeg";
 //旋涡子组件的引用
 const cChildRef1 = ref(null);
 //genie子组件的引用
@@ -114,11 +114,11 @@ const myEnd = () => {
   console.log("动画结束");
 };
 onMounted(() => {
-  window.JsView?.enableFpsDisplay(true);
+  window.JsvCoreApi.enableFpsDisplay(true);
 });
 
 onUnmounted(() => {
-  window.JsView?.enableFpsDisplay(false);
+  window.JsvCoreApi.enableFpsDisplay(false);
 });
 </script>
 

package/PosterPacker/tools/geniePakcer/Genie.vue

@@ -609,7 +609,7 @@ watchEffect(() => {
   console.log("rShow", rShow.value);
 });
 onMounted(() => {
-  window.JsView?.enableFpsDisplay(true);
+  window.JsvCoreApi.enableFpsDisplay(true);
 });
 
 onUnmounted(() => {
@@ -618,7 +618,7 @@ onUnmounted(() => {
     vNextTickStartAnimTimer = -1;
   }
 
-  window.JsView?.enableFpsDisplay(false);
+  window.JsvCoreApi.enableFpsDisplay(false);
 });
 onBeforeUnmount(() => {
   cStyleShell.removeRule("contract");

package/PosterPacker/tools/vortexPacker/Vortex.vue

@@ -43,14 +43,14 @@ const props = defineProps({
   top: { type: Number, default: 0 },
 });
 //图片
-const ImagePanda = "https://oss.image.qcast.cn/ai-draw/panda.jpeg";
+const ImagePanda = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/PosterPacker/tools/vortexPacker/Vortex/panda.jpeg";
 //0-1的x和y的坐标值（初始为x和y的中心点）
 let myX = 0.5;
 let myY = 0.5;
 let keyNum = shallowRef(0);
 //ref
 const rWidgetRef = shallowRef();
-let vSTRENGTH = '10.'
+let vSTRENGTH = "10.";
 //替换
 let replacedShader = shallowRef(
   vortexShader
@@ -58,28 +58,28 @@ let replacedShader = shallowRef(
     .replace(/\$\{myCustomCenterY\}/g, myY)
     .replace(/\$\{STRENGTH\}/g, vSTRENGTH)
 );
-console.log(9998,vortexShader);
+console.log(9998, vortexShader);
 
 //随机替换
 const getRandomDecimal = () => {
   myX = 0.9;
   myY = 0.1;
   //根据x轴的位置确定转数
-  if(myX>=0.8||myX<=0.2){
-    console.log('很小或很大');
-    vSTRENGTH = '40.'
-  }else if(myX>0.2<=0.4){
-     vSTRENGTH = '30.'
-  }else if(myX >=0.6 && myX < 0.8 ){
-     vSTRENGTH = '30.'
-  }else if(myX>0.4 && myX<0.6){
-    vSTRENGTH = '10.'
+  if (myX >= 0.8 || myX <= 0.2) {
+    console.log("很小或很大");
+    vSTRENGTH = "40.";
+  } else if (myX > 0.2 <= 0.4) {
+    vSTRENGTH = "30.";
+  } else if (myX >= 0.6 && myX < 0.8) {
+    vSTRENGTH = "30.";
+  } else if (myX > 0.4 && myX < 0.6) {
+    vSTRENGTH = "10.";
   }
 
   replacedShader.value = vortexShader
     .replace(/\$\{myCustomCenterX\}/g, myX)
     .replace(/\$\{myCustomCenterY\}/g, myY)
-    .replace(/\$\{STRENGTH\}/g, vSTRENGTH)
+    .replace(/\$\{STRENGTH\}/g, vSTRENGTH);
   keyNum.value += 1;
 };
 //接收外部设定中心点
@@ -118,11 +118,11 @@ const rShaderInfo = computed(() => {
   return cShaderSettings;
 });
 onMounted(() => {
-  window.JsView?.enableFpsDisplay(true);
+  window.JsvCoreApi.enableFpsDisplay(true);
 });
 
 onUnmounted(() => {
-  window.JsView?.enableFpsDisplay(false);
+  window.JsvCoreApi.enableFpsDisplay(false);
 });
 //向父组件暴露方法
 defineExpose({

package/QrcodeDemo/App.vue

@@ -13,7 +13,7 @@ const includeImage = true;
 const imageH = 64;
 const imageW = 64;
 const imageSrc =
-  "http://oss.image.qcast.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/QrcodeDemo/App/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
 const tipsInfo = `功能：二维码展示可配置项：
 
 1.前景色

package/Ripple/App.vue

@@ -20,7 +20,7 @@ import img from "../assets/jpegDemo.jpeg";
 const rippleViewRef = shallowRef(null);
 
 const imgUrl =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/demo_images/colorful-blocks.jpg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Ripple/App/colorful-blocks.jpg";
 
 const genSource = () => {
   return [

package/ScaleDownNeon/App.vue

@@ -9,19 +9,22 @@
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
-const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
-const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
-const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+const test1 =
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_1.jpeg)";
+const test2 =
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_2.jpeg)";
+const test3 =
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_3.jpeg)";
+const test4 =
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_4.jpeg)";
 
 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,
-      });
-    }
+    // 关掉TextureCache(通过将waterLevel设置成-1)
+    window.JsvCoreApi.setRenderGlobalConfig({
+      texCache: -1,
+    });
 
     router.go(-1); // 有router时，回退
     return true;
@@ -104,4 +107,4 @@ const style2 = {
 .top250 {
   top: 250;
 }
-</style>
+</style>

package/SceneTransition/App.vue

@@ -18,7 +18,9 @@
       </div>
       <!-- 文字说明 -->
       <div class="textLong" :style="{ left: 20, top: 20 }">
-        {{ "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。" }}
+        {{
+          "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。"
+        }}
       </div>
       <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
       <div class="text" :style="{ left: 400, top: 500 }">
@@ -72,9 +74,9 @@ 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";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/App/fly1.jpg";
 const fly2 =
-  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/fly2.jpg";
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/App/fly2.jpg";
 //预加载数组
 const preload_info = [buildPreloadInfo(fly1), buildPreloadInfo(fly2)];
 
@@ -133,8 +135,7 @@ const onKeyDown = (ev) => {
           boxSwitch.value = false;
         }, 1000);
       }
-
-      break;
+      return true;
 
     //按方向键上调用组件的恢复函数
     case 38:
@@ -142,7 +143,7 @@ const onKeyDown = (ev) => {
         control.value.fireNeEvent();
         down.value = false;
       }
-      break;
+      return true;
     default:
       break;
   }

package/SceneTransition/maskConfig/config2.js

@@ -5,84 +5,84 @@ const ArraySet2 = [
       top: 0,
       width: 565,
       height: 395,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/1.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/1.png",
     },
     {
       left: 245,
       top: 0,
       width: 377,
       height: 305,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/2.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/2.png",
     },
     {
       left: 600,
       top: 0,
       width: 236,
       height: 276,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/3.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/3.png",
     },
     {
       left: 719,
       top: 0,
       width: 418,
       height: 306,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/4.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/4.png",
     },
     {
       left: 783,
       top: 0,
       width: 497,
       height: 415,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/5.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/5.png",
     },
     {
       left: 0,
       top: 366,
       width: 531,
       height: 301,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/6.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/6.png",
     },
     {
       left: 494,
       top: 217,
       width: 481,
       height: 340,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/7.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/7.png",
     },
     {
       left: 891,
       top: 332,
       width: 389,
       height: 388,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/8.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/8.png",
     },
     {
       left: 0,
       top: 429,
       width: 601,
       height: 291,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/9.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/9.png",
     },
     {
       left: 364,
       top: 510,
       width: 254,
       height: 210,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/10.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/10.png",
     },
     {
       left: 573,
       top: 447,
       width: 230,
       height: 273,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/11.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/11.png",
     },
     {
       left: 708,
       top: 453,
       width: 474,
       height: 267,
-      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/12.png",
+      url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config2/12.png",
     },
   ];
   export { ArraySet2}