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

package/SceneTransition/App.vue

@@ -0,0 +1,177 @@
+<template>
+  <JsvPreload :preloadList="preload_info"></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="text">{{ '操作说明：按【OK】键进行碎片过渡效果。' }}</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),
+];
+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 onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 13:
+      bg.value = fly2;
+      onOff.value = true;
+      isShow.value = true;
+      break;
+
+    default:
+      break;
+  }
+};
+</script>
+
+<style scoped>
+.text{
+  width:300;
+  height:60;
+  color:#FFFFFF;
+  font-weight: bold;
+  line-height: 26;
+  font-size: 24;
+  left:20;
+  top:20;
+}
+</style>

package/SceneTransition/JsvSceneTransition.vue

@@ -0,0 +1,181 @@
+<!--
+ * 【模块 export 内容】
+ * JsvSceneTransition:场景过渡组件。
+ *      props说明:
+ *          imageUrl     {String}    (必填) 显示图片的加载地址
+ *          displayWidth {Number}    (必填) 想要展示的宽度
+ *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
+ *          style        {Object}    (必填) 横纵模板总长度和总宽度。(width,height)
+ *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
+-->
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      transform: `scale3d(${props.displayWidth / 1280},${
+        props.displayWidth / 1280
+      },1)`,
+      transformOrigin: 'left top',
+    }"
+  >
+    <jsv-free-move-actor
+      v-for="(item, index) in props.ArraySet"
+      :ref="(el) => (refArray[index] = el)"
+      :top="item.top"
+      :left="item.left"
+      :width="item.width"
+      :height="item.height"
+    >
+      <jsv-mask-clip-div
+        :style="{
+          top: 0,
+          left: 0,
+          width: item.width,
+          height: item.height,
+        }"
+        :viewSrc="props.imageUrl"
+        :maskSrc="item.url"
+        :maskLeft="item.left / props.style.width"
+        :maskTop="item.top / props.style.height"
+        :maskWidth="item.width / props.style.width"
+        :maskHeight="item.height / props.style.height"
+      />
+    </jsv-free-move-actor>
+  </div>
+</template>
+
+<script setup>
+import { JsvMaskClipDiv, JsvFreeMoveActor } from "jsview";
+import { onMounted, onBeforeUnmount, watch, shallowRef } from "vue";
+
+const props = defineProps({
+  imageUrl: { type: String, require: true },
+  displayWidth: { type: Number, require: true },
+  ArraySet: { type: Array, require: true },
+  style: { type: Object, require: true },
+  onOff: { type: Boolean, require: true },
+});
+
+//12个FreeMove引用
+const refArray = [];
+const controlArray = new Array(props.ArraySet.length).fill(null);
+const timer = { id: -1 };
+
+watch(
+  () => props.onOff,
+  (n, o) => {
+    if (n == true) {
+      MoveFunc();
+    }
+  }
+);
+
+//运动函数
+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()]),
+  ]);
+};
+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;
+  }
+});
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,29 @@
+{
+  "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
+    }
+  ]
+}

package/SecTorTest/App.vue

@@ -5,30 +5,33 @@
         :centerPosition="center"
         :radius="360"
         :data="data"
+        :animationTime="0.5"
       ></JsvPieChart>
       <!-- 文字说明 -->
       <div class="text">
         {{
-          "图为圆心在(400,400)位置，半径为360的饼图。"
+          "图为圆心在(400,400)位置，半径为360的饼图。此样例限制最多六个扇形。"
         }}
       </div>
       <!-- 操作说明 -->
       <div class="text1">
-        {{ "按上方向键随机板块增加百分比，按下方向键随机减小板块百分比" }}
+        {{
+          "按【上】键随机板块增加百分比，按【下】键随机减小板块百分比,按【左】键删除项，按【右】键增加项"
+        }}
       </div>
     </div>
   </jsv-focus-block>
 </template>
 
 <script setup>
-import { reactive } from "vue";
+import { reactive, shallowRef } from "vue";
 import { JsvPieChart } from "jsview";
 const center = {
   x: 400,
   y: 400,
 };
 
-let data = reactive([
+let data = shallowRef([
   {
     percent: 23.33,
     color: "#0000FF",
@@ -50,28 +53,147 @@ let data = reactive([
     color: "#6EFFE1",
   },
 ]);
-
+let TempData = reactive([]);
+for (let i = 0; i < data.value.length; i++) {
+  TempData.push({
+    percent: data.value[i].percent,
+    color: data.value[i].color,
+  });
+}
 // 生成随机整数
 const randomNumber = () => {
-  const randomInt = Math.floor(Math.random() * 4) + 1;
+  const randomInt = Math.floor(Math.random() * data.value.length) + 1;
   return randomInt;
 };
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 38) {
-    let total = 0;
-    for (let i = 0; i < data.length - 1; i++) {
-      data[i].percent += randomNumber();
-      total += data[i].percent;
-    }
-    data[4].percent = 100 - total;
-  } else if (ev.keyCode === 40) {
-    // 随机减;
-    let total = 0;
-    for (let i = 0; i < data.length - 1; i++) {
-      data[i].percent -= randomNumber();
-      total += data[i].percent;
+//随机颜色函数
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+//找出最大的百分比
+const findMaxPercentItem = (data) => {
+  let maxPercent = 0;
+  let maxItem = null;
+
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].percent > maxPercent) {
+      maxPercent = data[i].percent;
+      maxItem = data[i];
     }
-    data[4].percent = 100 - total;
+  }
+
+  return maxItem;
+};
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    //删除项
+    case 37:
+      if (data.value.length >= 2) {
+        const tempPercent = TempData[TempData.length - 1].percent;
+        TempData.pop();
+        TempData[TempData.length - 1].percent += tempPercent;
+        data.value = TempData;
+      }
+      break;
+    case 38:
+      //最后一项随机增加
+      const random = randomNumber();
+      TempData[TempData.length - 1].percent += random;
+      if (TempData[TempData.length - 1].percent > 100) {
+        TempData[TempData.length - 1].percent = 100;
+        for (let i = 0; i < TempData.length - 1; i++) {
+          TempData[i].percent = 0;
+        }
+      } else {
+        for (let i = 0; i < TempData.length - 1; i++) {
+          TempData[i].percent -= random / (TempData.length - 1);
+          if (TempData[i].percent < 0) {
+            let tempPercent = TempData[i].percent;
+            TempData[i].percent = 0;
+            let maxItem = findMaxPercentItem(TempData);
+            maxItem.percent += tempPercent;
+          }
+        }
+      }
+      data.value = TempData;
+      break;
+    case 39:
+      //增加项
+      if (data.value.length >= 1 && data.value.length <= 5) {
+        TempData.push({
+          percent: 10,
+          color: randomColor(),
+        });
+        let maxItem = findMaxPercentItem(TempData);
+        maxItem.percent -= 10;
+        data.value = TempData;
+      }
+      break;
+    case 40:
+      // 随机减;
+      if (data.value[data.value.length - 1].percent == 0) {
+        // 随机减少百分比
+        let randomDecrement = randomNumber();
+        let adjusted = false;
+
+        for (let i = TempData.length - 1; i >= 0; i--) {
+          if (TempData[i].percent > 0) {
+            if (TempData[i].percent >= randomDecrement) {
+              TempData[i].percent -= randomDecrement;
+              adjusted = true;
+              break; // 成功减少，结束循环
+            } else {
+              // 如果当前项百分比不足以减去randomDecrement，则全部减去并尝试从前一个元素继续减少
+              randomDecrement -= TempData[i].percent;
+              TempData[i].percent = 0;
+            }
+          }
+        }
+
+        if (!adjusted) {
+          // 如果没有成功减少（所有项都为0或randomDecrement大于所有项的总和），可以选择忽略剩余的randomDecrement
+          // 或者根据需求进行特殊处理
+        }
+
+        // 确保总和为100%
+        let totalPercent = TempData.reduce(
+          (total, item) => total + item.percent,
+          0
+        );
+        let diff = 100 - totalPercent; // 计算差异
+
+        if (diff !== 0) {
+          // 如果总和不为100%，则尝试平衡，优先从前往后增加
+          for (let i = 0; i < TempData.length && diff !== 0; i++) {
+            let availableIncrease = 100 - TempData[i].percent; // 计算当前项可增加的最大值
+            let increment = Math.min(diff, availableIncrease); // 确定实际增加的值
+            TempData[i].percent += increment;
+            diff -= increment; // 更新剩余差异
+          }
+        }
+      } else {
+        const random = randomNumber();
+        if (TempData[TempData.length - 1].percent - random < 0) {
+          const shouldNumber = TempData[TempData.length - 1].percent;
+          TempData[TempData.length - 1].percent = 0;
+          for (let i = 0; i < TempData.length - 2; i++) {
+            TempData[i].percent += shouldNumber / (TempData.length - 2);
+          }
+        } else {
+          TempData[TempData.length - 1].percent -= random;
+          for (let i = 0; i < TempData.length - 1; i++) {
+            TempData[i].percent += random / (TempData.length - 1);
+          }
+        }
+      }
+      data.value = TempData;
+      break;
+
+    default:
+      break;
   }
 };
 let actionDefines = {
@@ -86,7 +208,7 @@ let actionDefines = {
   background-color: #007788;
 }
 .text {
-  width: 280;
+  width: 500;
   height: 60;
   left: 700;
   top: 300;
@@ -96,7 +218,7 @@ let actionDefines = {
 }
 .text1 {
   width: 500;
-  height: 60;
+  height: 90;
   left: 700;
   top: 440;
   background-color: rgba(255, 255, 255, 0.5);

package/SwiperTest/App.vue

@@ -13,12 +13,12 @@
       :onClick="onClick"
       :onChange="onChange"
     >
-      <template #itemView="{ item, dataIndex }">
+      <template #itemView="{ propsItem,defineSize,dataIndex }">
         <div
           :style="{
-            width: item.width,
-            height: item.height,
-            backgroundImage: item.backgroundImage,
+            width: defineSize.width,
+            height: defineSize.height,
+            backgroundImage: items[dataIndex].image,
             fontSize: 40,
           }"
         ></div>