@shijiu/jsview-vue-samples 2.1.428 → 2.1.435

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',
@@ -305,14 +300,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/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>

package/SceneTransition/JsvSceneTransition.vue

@@ -5,17 +5,17 @@
  *          imageUrl     {String}    (必填) 显示图片的加载地址
  *          displayWidth {Number}    (必填) 想要展示的宽度
  *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
- *          style        {Object}    (必填) 横纵模板总长度和总宽度。(width,height)
+ *          style        {Object}    (必填) 模板配置总长度和总宽度。(width,height)
  *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
 -->
 
 <template>
   <div
     :style="{
-      width: 1280,
-      height: 720,
-      transform: `scale3d(${props.displayWidth / 1280},${
-        props.displayWidth / 1280
+      width: props.style.width,
+      height: props.style.height,
+      transform: `scale3d(${props.displayWidth / props.style.width},${
+        props.displayWidth / props.style.width
       },1)`,
       transformOrigin: 'left top',
     }"
@@ -48,7 +48,7 @@
 
 <script setup>
 import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
-import { onMounted, onBeforeUnmount, watch, shallowRef } from "vue";
+import { onMounted, watch } from "vue";
 
 const props = defineProps({
   imageUrl: { type: String, require: true },
@@ -57,12 +57,27 @@ const props = defineProps({
   style: { type: Object, require: true },
   onOff: { type: Boolean, require: true },
 });
-
-//12个FreeMove引用
+//FreeMove引用
 const refArray = [];
 const controlArray = new Array(props.ArraySet.length).fill(null);
-const timer = { id: -1 };
 
+//算图的中心点
+const center = {
+  x: Math.floor(props.style.width / 2),
+  y: Math.floor(props.style.height / 2),
+};
+//算所有遮罩层中心点
+const centerItemArray = [];
+props.ArraySet.forEach((item, index) => {
+  const centerX = (item.left + item.width) / 2;
+  const centerY = (item.top + item.height) / 2;
+  centerItemArray.push({
+    x: centerX,
+    y: centerY,
+  });
+});
+
+//监听控制开关的值
 watch(
   () => props.onOff,
   (n, o) => {
@@ -71,109 +86,80 @@ watch(
     }
   }
 );
-
+//Y轴方向随机初速度
+const randomYArray = [-60, -70, -80];
+const randomSelect = () => {
+  let randomNum = Math.random();
+  if (randomNum < 0.33) {
+    return randomYArray[0];
+  } else if (randomNum < 0.66) {
+    return randomYArray[1];
+  } else {
+    return randomYArray[2];
+  }
+};
 //运动函数
 const MoveFunc = () => {
-  controlArray[0].run([
-    controlArray[0].action().setSpdAndAccel(-6, -9, 0, 1, null, null),
-    controlArray[0]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[0].action().stopMoving()]),
-  ]);
-
-  controlArray[1].run([
-    controlArray[1].action().setSpdAndAccel(0, -5, 0, 1, null, null),
-    controlArray[1]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[1].action().stopMoving()]),
-  ]);
-  controlArray[2].run([
-    controlArray[2].action().setSpdAndAccel(6, -9, 0, 1, null, null),
-    controlArray[2]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[2].action().stopMoving()]),
-  ]);
-  controlArray[3].run([
-    controlArray[3].action().setSpdAndAccel(-6, -7, 0, 1, null, null),
-    controlArray[3]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[3].action().stopMoving()]),
-  ]);
-  controlArray[4].run([
-    controlArray[4].action().setSpdAndAccel(0, -8, 0, 1, null, null),
-    controlArray[4]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[4].action().stopMoving()]),
-  ]);
-  controlArray[5].run([
-    controlArray[5].action().setSpdAndAccel(6, -7, 0, 1, null, null),
-    controlArray[5]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[5].action().stopMoving()]),
-  ]);
-  controlArray[6].run([
-    controlArray[6].action().setSpdAndAccel(-6, -4, 0, 1, null, null),
-    controlArray[6]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[6].action().stopMoving()]),
-  ]);
-  controlArray[7].run([
-    controlArray[7].action().setSpdAndAccel(0, -8, 0, 1, null, null),
-    controlArray[7]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[7].action().stopMoving()]),
-  ]);
-  controlArray[8].run([
-    controlArray[8].action().setSpdAndAccel(2, -7, 0, 1, null, null),
-    controlArray[8]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[8].action().stopMoving()]),
-  ]);
-  controlArray[9].run([
-    controlArray[9].action().setSpdAndAccel(6, -7, 0, 1, null, null),
-    controlArray[9]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[9].action().stopMoving()]),
-  ]);
-  controlArray[10].run([
-    controlArray[10].action().setSpdAndAccel(4, -4, 0, 1, null, null),
-    controlArray[10]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[10].action().stopMoving()]),
-  ]);
-  controlArray[11].run([
-    controlArray[11].action().setSpdAndAccel(6, -4, 0, 1, null, null),
-    controlArray[11]
-      .condition()
-      .reachPosition(undefined, 720)
-      .then([controlArray[11].action().stopMoving()]),
-  ]);
+  centerItemArray.forEach((item, index) => {
+    if (center.x - item.x <= Math.abs(60)) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(16, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x <= 200) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(8, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x <= 500) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(-8, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x > 500) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(-16, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    } else if (center.x - item.x < -60) {
+      controlArray[index].run([
+        controlArray[index]
+          .action()
+          .setSpdAndAccel(20, randomSelect(), 0, 15, null, null),
+        controlArray[index]
+          .condition()
+          .reachPosition(undefined, 1380)
+          .then([controlArray[index].action().stopMoving()]),
+      ]);
+    }
+  });
 };
 onMounted(() => {
   for (let i = 0; i < refArray.length; i++) {
     controlArray[i] = refArray[i].control;
   }
   if (props.onOff == true) {
-    // timer.id = setTimeout(() => {
-      MoveFunc();
-    // }, 1000);
-  }
-});
-onBeforeUnmount(() => {
-  if (timer.id !== -1) {
-    clearTimeout(timer.id);
-    timer.id = -1;
+    MoveFunc();
   }
 });
 </script>

package/SceneTransition/maskConfig/config1.js

@@ -0,0 +1,101 @@
+// 遮罩拼图格式1的配置
+import mask1_1 from "../images/mask/1.png";
+import mask1_2 from "../images/mask/2.png";
+import mask1_3 from "../images/mask/3.png";
+import mask1_4 from "../images/mask/4.png";
+import mask1_5 from "../images/mask/5.png";
+import mask1_6 from "../images/mask/6.png";
+import mask1_7 from "../images/mask/7.png";
+import mask1_8 from "../images/mask/8.png";
+import mask1_9 from "../images/mask/9.png";
+import mask1_10 from "../images/mask/10.png";
+import mask1_11 from "../images/mask/11.png";
+import mask1_12 from "../images/mask/12.png";
+
+const ArraySet1 = [
+    {
+        left: 0,
+        top: 0,
+        width: 521,
+        height: 302,
+        url: mask1_1,
+    },
+    {
+        left: 301,
+        top: 0,
+        width: 590,
+        height: 266,
+        url: mask1_2,
+    },
+    {
+        left: 693,
+        top: 0,
+        width: 587,
+        height: 306,
+        url: mask1_3,
+    },
+    {
+        left: 0,
+        top: 140,
+        width: 561,
+        height: 431,
+        url: mask1_4,
+    },
+    {
+        left: 482,
+        top: 140,
+        width: 409,
+        height: 377,
+        url: mask1_5,
+    },
+    {
+        left: 717,
+        top: 247,
+        width: 563,
+        height: 247,
+        url: mask1_6,
+    },
+    {
+        left: 0,
+        top: 385,
+        width: 533,
+        height: 335,
+        url: mask1_7,
+    },
+    {
+        left: 333,
+        top: 392,
+        width: 293,
+        height: 328,
+        url: mask1_8,
+    },
+    {
+        left: 569,
+        top: 452,
+        width: 213,
+        height: 268,
+        url: mask1_9,
+    },
+    {
+        left: 714,
+        top: 405,
+        width: 332,
+        height: 315,
+        url: mask1_10,
+    },
+    {
+        left: 810,
+        top: 387,
+        width: 172,
+        height: 117,
+        url: mask1_11,
+    },
+    {
+        left: 893,
+        top: 428,
+        width: 387,
+        height: 292,
+        url: mask1_12,
+    },
+];
+export { ArraySet1 }

package/SceneTransition/maskConfig/config2.js

@@ -0,0 +1,88 @@
+// 遮罩拼图格式2的配置
+const ArraySet2 = [
+    {
+      left: 0,
+      top: 0,
+      width: 565,
+      height: 395,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+    {
+      left: 600,
+      top: 0,
+      width: 236,
+      height: 276,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+    {
+      left: 783,
+      top: 0,
+      width: 497,
+      height: 415,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+    {
+      left: 494,
+      top: 217,
+      width: 481,
+      height: 340,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+    {
+      left: 0,
+      top: 429,
+      width: 601,
+      height: 291,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+    {
+      left: 573,
+      top: 447,
+      width: 230,
+      height: 273,
+      url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask1/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",
+    },
+  ];
+  export { ArraySet2}

package/SceneTransition/maskConfig/config3.js

@@ -0,0 +1,102 @@
+const ArraySet3 = [
+    {
+        left: 0,
+        top: 0,
+        width: 232,
+        height: 287,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 223,
+        top: 0,
+        width: 582,
+        height: 316,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 943,
+        top: 0,
+        width: 337,
+        height: 162,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 86,
+        top: 168,
+        width: 728,
+        height: 350,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 706,
+        top: 0,
+        width: 295,
+        height: 319,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 688,
+        top: 321,
+        width: 304,
+        height: 399,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+    {
+        left: 816,
+        top: 315,
+        width: 464,
+        height: 211,
+        url: "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SceneTransition/mask2/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",
+    },
+];
+
+export { ArraySet3 }

package/TextureStoreTest/App.vue

@@ -7,12 +7,16 @@
         left: 200,
       }"
     >
-      <img :src="`jsvtexturestore://${sourceId}`" class="logo-size" :style="{
-        left:50,
-        top:50
-      }" />
+      <img
+        :src="`jsvtexturestore://${sourceId}`"
+        class="logo-size"
+        :style="{
+          left: 50,
+          top: 50,
+        }"
+      />
     </div>
-    <!-- 圆框点九 -->
+    <!-- 圆框点九-底色 -->
     <div
       class="logo-bg"
       :style="{
@@ -28,24 +32,24 @@
           backgroundColor: '#FF1213',
           top: 50,
         }"
-      >
-        <JsvNinePatch
-          :style="{
-            left: 0,
-            top: 0,
-            width: 200,
-            height: 200,
-          }"
-          :imageUrl="`jsvtexturestore://${sourceId2}`"
-          :imageWidth="136"
-          :centerWidth="1"
-          :imageDspWidth="136"
-          :borderOutset="8"
-          :animTime="0"
-        />
-      </div>
+      ></div>
     </div>
-    <!-- 方框点九 -->
+    <!-- 圆框点九-框 -->
+    <JsvNinePatch
+      :style="{
+        left: 750,
+        top: 50,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId2}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="8"
+      :animTime="0"
+    />
+    <!-- 方框点九-底色 -->
     <div class="logo-bg" :style="{ left: 200, top: 360 }">
       <div
         class="logo-size"
@@ -54,27 +58,67 @@
           backgroundColor: '#FF1213',
           top: 50,
         }"
-      >
-        <JsvNinePatch
-          :style="{
-            left: 0,
-            top: 0,
-            width: 200,
-            height: 200,
-          }"
-          :imageUrl="`jsvtexturestore://${sourceId3}`"
-          :imageWidth="136"
-          :centerWidth="1"
-          :imageDspWidth="136"
-          :borderOutset="6"
-          :animTime="0"
-        />
-      </div>
+      ></div>
+    </div>
+    <!-- 方框点九-框 -->
+    <JsvNinePatch
+      :style="{
+        left: 250,
+        top: 410,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId3}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="6"
+      :animTime="0"
+    />
+    <!-- 渐变点九-底色 -->
+    <div
+      class="logo-bg"
+      :style="{
+        left: 700,
+        top: 360,
+      }"
+    >
+      <div
+        class="logo-size"
+        :style="{
+          borderRadius: 60,
+          left: 50,
+          backgroundImage: `jsvtexturestore://${sourceId4}`,
+          top: 50,
+        }"
+      ></div>
     </div>
+    <!-- 渐变点九-框（同圆框点九框） -->
+    <JsvNinePatch
+      :style="{
+        left: 750,
+        top: 410,
+        width: 200,
+        height: 200,
+      }"
+      :imageUrl="`jsvtexturestore://${sourceId2}`"
+      :imageWidth="136"
+      :centerWidth="1"
+      :imageDspWidth="136"
+      :borderOutset="8"
+      :animTime="0"
+    />
     <!-- 文字说明 -->
-    <div class="text" :style="{top:320,left:200}">{{ '半圆' }}</div>
-    <div class="text" :style="{top:320,left:700}">{{ '圆角NinePatch' }}</div>
-    <div class="text" :style="{top:680,left:200}">{{ '直角NinePatch' }}</div>
+    <div class="text" :style="{ top: 320, left: 200 }">{{ "半圆" }}</div>
+    <div class="text" :style="{ top: 320, left: 700 }">
+      {{ "圆角NinePatch" }}
+    </div>
+    <div class="text" :style="{ top: 680, left: 200 }">
+      {{ "直角NinePatch" }}
+    </div>
+    <div class="text" :style="{ top: 680, left: 700 }">
+      {{ "渐变圆角NinePatch" }}
+    </div>
   </div>
 </template>
 
@@ -85,9 +129,11 @@ import { JsvTextureStoreApi } from "jsview";
 let canvasRef;
 let canvasRef2;
 let canvasRef3;
+let canvasRef4;
 let sourceId = shallowRef("");
 let sourceId2 = shallowRef("");
 let sourceId3 = shallowRef("");
+let sourceId4 = shallowRef("");
 let bitmap = {
   width: 150,
   height: 150,
@@ -100,9 +146,14 @@ let bitmap3 = {
   width: 136,
   height: 136,
 };
+let bitmap4 = {
+  width: 136,
+  height: 136,
+};
 canvasRef = JsvTextureStoreApi.canvasTexture(bitmap.width, bitmap.height);
 canvasRef2 = JsvTextureStoreApi.canvasTexture(bitmap2.width, bitmap2.height);
 canvasRef3 = JsvTextureStoreApi.canvasTexture(bitmap3.width, bitmap3.height);
+canvasRef4 = JsvTextureStoreApi.canvasTexture(bitmap4.width, bitmap4.height);
 //第一个图
 let centerX = bitmap.width / 2;
 let centerY = bitmap.height / 2;
@@ -134,11 +185,26 @@ sourceId2.value = canvasRef2.commit();
 let customPath3 = canvasRef3.rectPath(3, 3, 133, 133);
 customPath3.stroke(6, "#87CEEB");
 sourceId3.value = canvasRef3.commit();
+//第四个图(底色即使用渐变色接口描绘)
+const multiColorSet = {
+  color: ["#ff0000", "#0000ff", "#00ff00", "#ff00ff"],
+  position: [0, 0.3, 0.8, 1],
+};
+ canvasRef4.drawLinearGradientRect(
+  0,
+  0,
+  0,
+  136,
+  multiColorSet.color,
+  multiColorSet.position
+);
+sourceId4.value = canvasRef4.commit();
 
 onBeforeUnmount(() => {
   JsvTextureStoreApi.deleteTexture(sourceId.value);
   JsvTextureStoreApi.deleteTexture(sourceId2.value);
   JsvTextureStoreApi.deleteTexture(sourceId3.value);
+  JsvTextureStoreApi.deleteTexture(sourceId4.value);
 });
 </script>
 
@@ -157,12 +223,12 @@ onBeforeUnmount(() => {
   height: 300;
   background-color: #007f00;
 }
-.text{
-  width:300;
-  height:30;
+.text {
+  width: 300;
+  height: 30;
   font-size: 28;
   line-height: 30;
-  color: #FFFFFF;
+  color: #ffffff;
   text-align: center;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.428",
+  "version": "2.1.435",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/SceneTransition/images/mask-025/config.json

@@ -1,29 +0,0 @@
-{
-  "style": "Irregular",
-  "type":"Regular",
-  "age": [3, 4],
-  "level": 1,
-  "grade": "Easy",
-  "components": [
-    {
-      "key": "1",
-      "x": 0,
-      "y": 0
-    },
-    {
-      "key": "2",
-      "x": 227,
-      "y": 0
-    },
-    {
-      "key": "3",
-      "x": 0,
-      "y": 327
-    },
-    {
-      "key": "4",
-      "x": 327,
-      "y": 227
-    }
-  ]
-}