@shijiu/jsview-vue-samples 2.2.426-test.0 → 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子组件的引用

package/PosterPacker/tools/vortexPacker/Vortex.vue

@@ -43,7 +43,7 @@ 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;

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

@@ -10,13 +10,13 @@ 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)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_1.jpeg)";
 const test2 =
-  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_2.jpeg)";
 const test3 =
-  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_3.jpeg)";
 const test4 =
-  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+  "url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/ScaleDownNeon/App/test_4.jpeg)";
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键

package/SceneTransition/App.vue

@@ -74,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)];
 

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}

package/SceneTransition/maskConfig/config3.js

@@ -4,98 +4,98 @@ const ArraySet3 = [
         top: 0,
         width: 232,
         height: 287,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/1.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/1.png",
     },
     {
         left: 213,
         top: 0,
         width: 588,
         height: 315,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/2.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/2.png",
     },
     {
         left: 223,
         top: 0,
         width: 582,
         height: 316,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/3.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/3.png",
     },
     {
         left: 811,
         top: 62,
         width: 469,
         height: 257,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/4.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/4.png",
     },
     {
         left: 943,
         top: 0,
         width: 337,
         height: 162,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/5.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/5.png",
     },
     {
         left: 0,
         top: 260,
         width: 272,
         height: 460,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/6.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/6.png",
     },
     {
         left: 86,
         top: 168,
         width: 728,
         height: 350,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/7.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/7.png",
     },
     {
         left: 806,
         top: 223,
         width: 474,
         height: 133,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/8.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/8.png",
     },
     {
         left: 706,
         top: 0,
         width: 295,
         height: 319,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/9.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/9.png",
     },
     {
         left: 51,
         top: 319,
         width: 765,
         height: 401,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/10.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/10.png",
     },
     {
         left: 688,
         top: 321,
         width: 304,
         height: 399,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/11.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/11.png",
     },
     {
         left: 814,
         top: 320,
         width: 345,
         height: 400,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/12.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/12.png",
     },
     {
         left: 816,
         top: 315,
         width: 464,
         height: 211,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/13.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/13.png",
     },
     {
         left: 979,
         top: 413,
         width: 301,
         height: 307,
-        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/14.png",
+        url: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SceneTransition/maskConfig/config3/14.png",
     },
 ];