@shijiu/jsview-vue-samples 2.1.367-test.0 → 2.1.435

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/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>

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/TouchWidget/App.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 500,
+      height: 190,
+      name: "widget_" + i,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("mwWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
+  <div
+    :style="{
+      left: 100,
+      top: 20,
+      width: 800,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `MetroWidget的item是包含MetroWidget的组件` }}
+  </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+  <metro-widget
+    name="mwWidget"
+    :top="10"
+    :left="50"
+    :width="660"
+    :height="600"
+    :provideData="provideData"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :touchFlag="1"
+  >
+    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+    <template #renderItem="{ data, onAction, onItemEdge }">
+      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      width: 50,
+      height: 50,
+      backgroundColor: '#ff000055',
+      animation: 'testRotate 2s infinite',
+    }"
+  ></div>
+</template>
+
+<style scoped>
+@keyframes testRotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>