@shijiu/jsview-vue-samples 2.2.35 → 2.2.128

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -6,7 +6,12 @@
  * @Description: file content
 -->
 <script setup>
-import { VERTICAL, MetroWidget, METRO_WIDGET_CONST, SeamlessSlide } from "jsview";
+import {
+  VERTICAL,
+  MetroWidget,
+  METRO_WIDGET_CONST,
+  SeamlessSlide,
+} from "jsview";
 import WidgetItem from "./WidgetItem.vue";
 import { shallowRef, watch, onBeforeUnmount } from "vue";
 
@@ -26,11 +31,17 @@ const props = defineProps({
 
 const widgetRef = shallowRef(null);
 
-const slideSetting = props.data.tabIndex == 0 ? new SeamlessSlide({
-  startPercent: 0.5,
-  endPercent: 0.5,
-  fixFirstPage: true,
-}) : new SeamlessSlide();
+const slideSetting =
+  props.data.tabIndex == 0
+    ? new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+        fixFirstPage: true,
+      })
+    : new SeamlessSlide({
+        startPercent: 0.5,
+        endPercent: 0.5,
+      });
 
 const provideData = () => {
   return props.data.data;
@@ -52,8 +63,7 @@ const watcher = watch(
 
 onBeforeUnmount(() => {
   watcher();
-})
-
+});
 </script>
 
 <template>
@@ -77,4 +87,4 @@ onBeforeUnmount(() => {
       ></widget-item>
     </template>
   </metro-widget>
-</template>
+</template>

package/MetroWidgetDemos/routeList.js

@@ -92,4 +92,10 @@ export default [
     component: () =>
       import("jsview-vue-samples/MetroWidgetDemos/SeamlessSlide/App.vue"),
   },
+  {
+    name: "多item分段显示",
+    path: "/metroWidget/MassiveItems",
+    component: () =>
+      import("jsview-vue-samples/MetroWidgetDemos/MassiveItems/App.vue"),
+  },
 ]

package/ScrollBoxTest/App.vue

@@ -0,0 +1,160 @@
+<template>
+  <jsv-focus-block autoFocus :onKeyDown="procKeyDown">
+    <div class="bgSty">
+      <!-- 提示 -->
+      <div class="text" :style="{ left: 210, top: 20 }">
+        {{
+          "操作提示：\n触控进行左右拖拽\n点击进度条空白处游标直接跳过去\n按 返回 键退出"
+        }}
+      </div>
+      <div
+        class="logo-bg"
+        :style="{
+          left: 210,
+          top: 200,
+        }"
+      >
+        <!-- 三个背景色块 -->
+        <div class="bg1" />
+        <div class="bg2" />
+        <div class="bg3" />
+        <!-- 进度条 -->
+        <div :style="{ top: 80, left: 0 }">
+          <JsvScrollBox
+            ref="rJsvScrollBox"
+            :style="{
+              width: 800,
+              height: 84,
+            }"
+            :direction="HORIZONTAL"
+            :sliderSize="{
+              width: 84,
+            }"
+          >
+            <template #FixedBox="{ boxWidth, boxHeight }">
+              <div
+                :style="{
+                  width: boxWidth,
+                  height: boxHeight,
+                  lineHeight: boxHeight,
+                  backgroundColor: 'rgba(255,255,255,0.3)',
+                  borderRadius: Math.floor(boxHeight / 2),
+                  fontSize: Math.floor(boxHeight * 0.5),
+                  textAlign: 'center',
+                  color: 'rgba(0,0,0,1)',
+                }"
+              >
+                {{ `进度:${rPercentDisp}` }}
+              </div>
+            </template>
+            <template #SliderBox="{ boxWidth, boxHeight }">
+              <div
+                :style="{
+                  top: -15,
+                  left: -15,
+                  width: boxWidth + 30,
+                  height: boxHeight + 30,
+                  backgroundColor: 'rgba(255, 0,0,0.8)',
+                  borderRadius: Math.floor((boxHeight + 30) / 2),
+                }"
+                @click="fncOnClick"
+              />
+            </template>
+          </JsvScrollBox>
+        </div>
+        <!-- 图1说明 -->
+        <div :style="{ left: 0, top: 26 }" class="text">
+          {{ "pin模式下拖拽(拖动点尺寸略大于进度条)" }}
+        </div>
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { JsvScrollBox, HORIZONTAL } from "jsview";
+
+//进度百分比
+let myProgress = shallowRef(20);
+//按键事件 控制进度条的width
+const procKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      myProgress.value -= 5;
+      if (myProgress.value <= 0) {
+        myProgress.value = 0;
+      }
+      break;
+    case 39:
+      myProgress.value += 5;
+      if (myProgress.value >= 100) {
+        myProgress.value = 100;
+      }
+      break;
+    case 13:
+      myProgress.value = 0;
+      break;
+    default:
+      break;
+  }
+};
+
+let fncOnClick = () => {};
+
+let rJsvScrollBox = shallowRef(null);
+let rPercentDisp = shallowRef(0);
+
+onMounted(() => {
+  rJsvScrollBox.value.setSensor((percent, x, y) => {
+    rPercentDisp.value = Math.floor(percent * 100) / 100;
+    console.log(
+      `onProgress dragged percent=${percent} \
+x=${Math.floor(x)} \
+y=${Math.floor(y)}`
+    );
+  }, 15);
+});
+</script>
+
+<style scoped>
+.bgSty {
+  background-color: #5490d1;
+  width: 1280;
+  height: 720;
+}
+.logo-bg {
+  width: 800;
+  height: 400;
+}
+.text {
+  width: 800;
+  height: 200;
+  font-size: 24;
+  font-weight: bold;
+  line-height: 32;
+  color: #ffffff;
+  text-align: center;
+}
+.bg1 {
+  left: 0;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #007f00;
+}
+.bg2 {
+  left: 267;
+  top: 0;
+  height: 400;
+  width: 267;
+  background-color: #3049b8;
+}
+.bg3 {
+  left: 534;
+  top: 0;
+  height: 400;
+  width: 266;
+  background-color: #d12b8c;
+}
+</style>

package/TestNativeSharedView/App.vue

@@ -1,6 +1,12 @@
 <script setup>
-import { JsvNativeSharedDiv, JsvFocusBlock, jJsvRuntimeBridge, enableNativeViewListener, disableNativeViewListener } from "jsview"
-import { onBeforeUnmount, onMounted, reactive, watch, shallowRef } from 'vue';
+import {
+  JsvNativeSharedDiv,
+  JsvFocusBlock,
+  jJsvRuntimeBridge,
+  enableNativeViewListener,
+  disableNativeViewListener,
+} from "jsview";
+import { onBeforeUnmount, onMounted, reactive, watch, shallowRef } from "vue";
 
 let state = reactive({
   outX: 20,
@@ -18,29 +24,35 @@ let _TestData = [
 let _Index = 0;
 
 //给两个div给定不同的响应式变量
-let view1 = shallowRef('null')
-let view2 = shallowRef('null')
-let isShow=shallowRef(false)
-let isStop=shallowRef(false)
+let view1 = shallowRef("null");
+let view2 = shallowRef("null");
+let isShow = shallowRef(false);
+let isStop = shallowRef(false);
 //创造出需要的四个属性的对象
 const obj = (newValue) => {
-  const resultObj = {}
-  const newObj = JSON.parse(newValue.replace(/(\w+)\=/g, "\"$1\":").replace(/'/g, "\"").replace(/^Bundle\[/, "").replace(/\]$/, ""));
+  const resultObj = {};
+  const newObj = JSON.parse(
+    newValue
+      .replace(/(\w+)\=/g, '"$1":')
+      .replace(/'/g, '"')
+      .replace(/^Bundle\[/, "")
+      .replace(/\]$/, "")
+  );
   for (const key in newObj) {
-    if (key == 'height' || key == 'width' || key == 'x' || key == 'y') {
+    if (key == "height" || key == "width" || key == "x" || key == "y") {
       resultObj[key] = newObj[key];
     }
   }
-  return resultObj
-}
+  return resultObj;
+};
 //监听
 watch(view1, (n, o) => {
-  view1 = obj(n)
-})
+  view1 = obj(n);
+});
 watch(view2, (n, o) => {
-  view2 = obj(n)
-  isShow.value=true
-})
+  view2 = obj(n);
+  isShow.value = true;
+});
 // 每2秒进行位置变化以测试位置信息更新
 let loopTimer = setInterval(() => {
   _Index = (_Index + 1) % 3;
@@ -59,7 +71,7 @@ let _ResiterCallbackId2 = -1;
 
 let getId = (id) => {
   if (_ReisterId !== id) {
-    _ResiterCallbackId1 = enableNativeViewListener(id, view1)
+    _ResiterCallbackId1 = enableNativeViewListener(id, view1);
     _ReisterId = id;
   }
 };
@@ -79,7 +91,7 @@ let getId2 = (id) => {
       timeout2 = setTimeout(() => {
         timeout2 = -1;
         disableNativeViewListener(_ResiterCallbackId2);
-        isStop.value=true
+        isStop.value = true;
         _ResiterCallbackId2 = -1;
       }, 10000);
     }, 1000);
@@ -110,116 +122,197 @@ onBeforeUnmount(() => {
     disableNativeViewListener(_ResiterCallbackId2);
     _ResiterCallbackId2 = -1;
   }
-})
+});
 
 onMounted(() => {
   console.log("TestNativeSharedView mounted");
   jJsvRuntimeBridge.notifyPageLoaded();
-})
-
+});
 </script>
 
 <template>
   <jsv-focus-block autoFocus>
     <!-- 一个无限动画元素，来测试卡顿 -->
-    <div :style="{
-      top: 100,
-      left: 1000,
-      height: 150,
-      width: 150,
-      backgroundColor: '#334455',
-      animation: 'test-anim-rotate 1s infinite linear',
-    }" />
+    <div
+      :style="{
+        top: 100,
+        left: 1000,
+        height: 150,
+        width: 150,
+        backgroundColor: '#334455',
+        animation: 'test-anim-rotate 1s infinite linear',
+      }"
+    />
     <!-- 显示参数 -->
-    <div :style="{ top: 400, left: 1000, width: 256, height: 240, backgroundColor: 'rgba(27,38,151,0.8)' }">
-      <div :style="{ top: 0, left: 0, width: 120, height: 30, color: '#FFFFFF', fontSize: 20, textAlign: 'center' }">{{
-        'view1的参数'
-      }}</div>
-      <div v-for="(value, key, index) in view1" :style="{
-            top: 30 + index * 40,
-            left: 10,
-            width: 100,
-            height: 40,
-            fontSize: 20,
-            color: '#FFFFFF',
-            textAlign: 'center'
-          }">{{ key }}:{{ value }}</div>
-      <div :style="{ top: 0, left: 130, width: 120, height: 30, color: '#FFFFFF', fontSize: 20, textAlign: 'center' }">{{
-        'view2的参数'
-      }}</div>
+    <div
+      :style="{
+        top: 400,
+        left: 1000,
+        width: 256,
+        height: 240,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      <div
+        :style="{
+          top: 0,
+          left: 0,
+          width: 120,
+          height: 30,
+          color: '#FFFFFF',
+          fontSize: 20,
+          textAlign: 'center',
+        }"
+      >
+        {{ "view1的参数" }}
+      </div>
+      <div
+        v-for="(value, key, index) in view1"
+        :style="{
+          top: 30 + index * 40,
+          left: 10,
+          width: 100,
+          height: 40,
+          fontSize: 20,
+          color: '#FFFFFF',
+          textAlign: 'center',
+        }"
+      >
+        {{ key }}:{{ value }}
+      </div>
+      <div
+        :style="{
+          top: 0,
+          left: 130,
+          width: 120,
+          height: 30,
+          color: '#FFFFFF',
+          fontSize: 20,
+          textAlign: 'center',
+        }"
+      >
+        {{ "view2的参数" }}
+      </div>
       <div v-if="isShow">
-      <div v-for="(value, key, index) in view2" :style="{
+        <div
+          v-for="(value, key, index) in view2"
+          :style="{
             top: 30 + index * 40,
             left: 130,
             width: 100,
             height: 40,
             fontSize: 20,
             color: '#FFFFFF',
-            textAlign: 'center'
-          }">{{ key }}:{{ value }}</div>
-          <div :style="{top: 200,
-            left: 130,
-            width: 100,
-            height: 40,
-            fontSize: 20,
-            color: '#FFFFFF',
-            textAlign: 'center'}">{{ isStop ? "监听停止":"" }}</div>
-          </div>
-          <div 
-          v-else
+            textAlign: 'center',
+          }"
+        >
+          {{ key }}:{{ value }}
+        </div>
+        <div
           :style="{
-            top: 30 + 2*30,
+            top: 200,
             left: 130,
             width: 100,
             height: 40,
             fontSize: 20,
             color: '#FFFFFF',
-            textAlign: 'center'}">{{ '未监听' }}</div>
+            textAlign: 'center',
+          }"
+        >
+          {{ isStop ? "监听停止" : "" }}
+        </div>
+      </div>
+      <div
+        v-else
+        :style="{
+          top: 30 + 2 * 30,
+          left: 130,
+          width: 100,
+          height: 40,
+          fontSize: 20,
+          color: '#FFFFFF',
+          textAlign: 'center',
+        }"
+      >
+        {{ "未监听" }}
+      </div>
     </div>
 
-
-    <div :style="{
+    <div
+      :style="{
         left: state.outX,
         top: state.outY,
         backgroundColor: '#00FF00',
         width: 600,
         height: 600,
-      }">
-      <jsv-native-shared-div :getId="getId" :style="{
+      }"
+    >
+      <div
+        :style="{
+          left: state.inX,
+          top: state.inY,
+          width: 500,
+          height: 500,
+          backgroundColor: 'rgba(255, 255, 0, 1.0)',
+        }"
+      />
+      <jsv-native-shared-div
+        :getId="getId"
+        :style="{
           left: state.inX,
           top: state.inY,
           width: 500,
           height: 500,
-        }">
-        <div :style="{
+        }"
+      >
+        <div
+          :style="{
             backgroundColor: '#00FF00',
             left: 50,
             top: 40,
             width: 30,
             height: 30,
-          }" />
+          }"
+        />
       </jsv-native-shared-div>
     </div>
-    <div :style="{
+    <div
+      :style="{
         left: state.outX + 200,
         top: state.outY,
         backgroundColor: '#00FF00',
         width: 600,
         height: 600,
-      }">
-      <jsv-native-shared-div :getId="getId2" :style="{
+      }"
+    >
+      <div
+        :style="{
           left: state.inX,
           top: state.inY,
           width: 500,
           height: 500,
-        }">
-        <div :style="{
+          backgroundColor: 'rgba(255, 255, 0, 1.0)',
+        }"
+      />
+      <jsv-native-shared-div
+        :getId="getId2"
+        :style="{
+          left: state.inX,
+          top: state.inY,
+          width: 500,
+          height: 500,
+        }"
+        :corner="8"
+      >
+        <div
+          :style="{
             backgroundColor: '#00FF00',
             left: 50,
             top: 40,
             width: 30,
             height: 30,
-          }" />
+          }"
+        />
       </jsv-native-shared-div>
     </div>
   </jsv-focus-block>

package/TextureAnimation/App2.vue

@@ -28,14 +28,15 @@ const rotateAnimation =
 // 设置设定模拟绘制.9图
 let canvasRef;
 let sourceId = shallowRef("");
-let sampleImageWidth = 86;
+let sampleImageWidth = 90;
 canvasRef = JsvTextureStoreApi.canvasTexture(
   sampleImageWidth,
   sampleImageWidth
 ); // 创建画布
 
-let circleRadius = 40;
-let circleLineWidth = 5;
+let circleInnerDiameter = 70; // 环形内直径, 为所要包括图形的borderRadius的一倍
+let circleLineWidth = 6; // 线宽
+let circleRadius = Math.floor(circleInnerDiameter / 2 + circleLineWidth / 2); // 绘制线是圆圈的轨迹中线
 let customPath = canvasRef.circlePath(
   Math.floor(sampleImageWidth / 2),
   Math.floor(sampleImageWidth / 2),
@@ -48,9 +49,9 @@ sourceId = canvasRef.commit(); // texture和div的textureStore绑定
 const ninePatchDecorator1 = {
   type: DECORATE_NINEPATCH_ALPHA_MIX,
   url: `jsvtexturestore://${sourceId}`,
-  imageWidth: 86,
-  centerWidth: 2,
-  borderOutset: 0,
+  imageWidth: sampleImageWidth, // 等同于画布宽
+  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
+  borderOutset: Math.floor((sampleImageWidth - circleInnerDiameter) / 2), // (画布 - 圆环内直径) / 2
   animTime: 0.5,
 };
 
@@ -110,6 +111,16 @@ onBeforeUnmount(() => {
       .9型的旋转焦点框,OK键进行随机位置+尺寸变换
     </div>
     <div>
+      <div
+        :style="{
+          left: left,
+          top: top,
+          width: width,
+          height: height,
+          backgroundColor: 'rgba(0, 255, 0, 0.7)',
+          borderRadius: Math.floor(circleInnerDiameter / 2),
+        }"
+      />
       <jsv-texture-anim
         :src="img"
         :left="left"

package/TombSweepingDayTest/Raining/RainScene.vue

@@ -7,16 +7,18 @@
     :onLoad="audioOnLoad"
   />
   <JsvRipple :width="1280" :height="720" ref="rippleViewRef">
-    <jsv-focus-block
-      autoFocus
-      :style="{ width: 1280, height: 720, backgroundImage: bg }"
-    >
+    <jsv-focus-block autoFocus>
+      <img
+        :src="bg"
+        :style="{ width: 1280, height: 720 }"
+        :onLoad="funcBackgroundOnLoaded"
+      />
       <div
         :style="{
-          width: 200,
-          height: 200,
+          width: 100,
+          height: 100,
           backgroundImage: title,
-          left: 630,
+          left: 900,
           top: 40,
         }"
       ></div>
@@ -77,27 +79,37 @@ const audioOnLoad = () => {
   console.log("audio on load");
   _BgAudio.play();
 };
+
+let backgrounLoaded = false;
+const funcBackgroundOnLoaded = () => {
+  backgrounLoaded = true;
+  console.log("bg image loaded");
+};
+
 onMounted(() => {
   if (rippleViewRef.value !== null) {
     timer.id = setInterval(() => {
-      const p = genSource();
-      rippleViewRef.value.addSource(
-        ...p,
-        {
-          type: JsvRippleShape.CIRCLE,
-        },
-        {
-          timeDecay: 0.5,
-          distanceDecay: 8,
-          speed: 60,
-          frequency: 2,
-          waveNum: 2,
-        }
-      );
+      if (backgrounLoaded) {
+        // 图片加载完成后再追加波纹，规避绘出黑色的波圈
+        const p = genSource();
+        rippleViewRef.value.addSource(
+          ...p,
+          {
+            type: JsvRippleShape.CIRCLE,
+          },
+          {
+            timeDecay: 0.5,
+            distanceDecay: 8,
+            speed: 60,
+            frequency: 2,
+            waveNum: 2,
+          }
+        );
 
-      timer.id2 = setTimeout(() => {
-        mySoundControl.play();
-      }, 1000);
+        timer.id2 = setTimeout(() => {
+          mySoundControl.play();
+        }, 1000);
+      }
     }, 3000);
   }
 });

package/package.json

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