@shijiu/jsview-vue-samples 2.1.482-test.0 → 2.2.128

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

@@ -1,16 +1,17 @@
 <script setup>
-import { ref } from "vue";
+import { ref, shallowRef, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   JsvTextureAnim,
   DECORATE_NINEPATCH_ALPHA_MIX,
+  JsvTextureStoreApi,
 } from "jsview";
 import img from "./assets/light.png";
 import img2 from "./assets/light2.png";
 import mask from "./assets/mask.png";
 import { getDataUrl } from "../CommonUtils/ResourceData";
 //无网络环境下使用
-const DemoResourceBase = getDataUrl()
+const DemoResourceBase = getDataUrl();
 
 const getRandom = (start, end) => {
   return Math.round(Math.random() * (end - start) + start);
@@ -24,7 +25,37 @@ const top = ref(80);
 const rotateAnimation =
   "{from {transform: rotate3d(0,0,1,0);} to {transform: rotate3d(0,0,1,360deg);}}";
 
-const ninePatchDecorator = {
+// 设置设定模拟绘制.9图
+let canvasRef;
+let sourceId = shallowRef("");
+let sampleImageWidth = 90;
+canvasRef = JsvTextureStoreApi.canvasTexture(
+  sampleImageWidth,
+  sampleImageWidth
+); // 创建画布
+
+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),
+  circleRadius
+); // 创建圆环绘制路径，圆形在画布的中心点位置
+canvasRef.drawColor("rgba(0,0,0,0)"); // 画布绘制半透明底色
+customPath.stroke(circleLineWidth, "#FF00FF7F"); // 以给定线宽绘制圆环
+sourceId = canvasRef.commit(); // texture和div的textureStore绑定
+
+const ninePatchDecorator1 = {
+  type: DECORATE_NINEPATCH_ALPHA_MIX,
+  url: `jsvtexturestore://${sourceId}`,
+  imageWidth: sampleImageWidth, // 等同于画布宽
+  centerWidth: 2, // 固定为1或2, 但1在PC上绘制可能有异常
+  borderOutset: Math.floor((sampleImageWidth - circleInnerDiameter) / 2), // (画布 - 圆环内直径) / 2
+  animTime: 0.5,
+};
+
+const ninePatchDecorator2 = {
   type: DECORATE_NINEPATCH_ALPHA_MIX,
   url: `url(${mask})`,
   imageWidth: 86,
@@ -37,6 +68,7 @@ const texCoord = {
   width: 600,
   height: 600,
 };
+
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
@@ -49,6 +81,10 @@ const onKeyDown = (ev) => {
   }
   return true;
 };
+
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
 </script>
 <template>
   <jsv-focus-block
@@ -57,7 +93,6 @@ const onKeyDown = (ev) => {
     :style="{
       width: 1280,
       height: 720,
-      backgroundImage: DemoResourceBase ?`${DemoResourceBase}/BackgroundLongmao.jpg` :'https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg',
     }"
   >
     <div
@@ -76,6 +111,16 @@ const onKeyDown = (ev) => {
       .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"
@@ -87,7 +132,7 @@ const onKeyDown = (ev) => {
         :duration="2000"
         :repeat="-1"
         :autoStart="true"
-        :decorate="ninePatchDecorator"
+        :decorate="ninePatchDecorator1"
       ></jsv-texture-anim>
     </div>
     <div>
@@ -102,8 +147,8 @@ const onKeyDown = (ev) => {
         :duration="2000"
         :repeat="-1"
         :autoStart="true"
-        :decorate="ninePatchDecorator"
+        :decorate="ninePatchDecorator2"
       ></jsv-texture-anim>
     </div>
   </jsv-focus-block>
-</template>
+</template>

package/TombSweepingDayTest/App.vue

@@ -0,0 +1,11 @@
+<template>
+<RainScene></RainScene>
+</template>
+
+<script setup>
+import  RainScene from "./Raining/RainScene.vue"
+</script>
+
+<style scoped>
+
+</style>

package/TombSweepingDayTest/Raining/Rain.vue

@@ -0,0 +1,69 @@
+<template>
+  <JsvFreeMoveActor
+    :top="-myHeight"
+    :left="myLeft"
+    :width="2"
+    :height="myHeight"
+    ref="myRef"
+  >
+    <div
+      :style="{
+        width: 2,
+        height: myHeight,
+        backgroundImage: `jsvtexturestore://${sourceId}`,
+      }"
+    ></div>
+  </JsvFreeMoveActor>
+</template>
+
+<script setup>
+import { shallowRef, onBeforeUnmount, onMounted } from "vue";
+import { JsvTextureStoreApi, JsvFreeMoveActor } from "jsview";
+let canvasRef;
+let sourceId = shallowRef("");
+const canvasTexture = JsvTextureStoreApi.canvasTexture(10, 200);
+canvasTexture.drawLine(0, 0, 0, 200, 10, "rgba(255, 255, 255, 0.5)");
+canvasRef = canvasTexture.commit();
+sourceId.value = canvasRef;
+//随机长度函数(限制在80-160)
+const randomHeight = () => {
+  return Math.floor(Math.random() * 80) + 80;
+};
+
+//随机left值
+const randomLeft = () => {
+  return Math.floor(Math.random() * 1280);
+};
+const myHeight = randomHeight();
+const myLeft = randomLeft();
+
+let myRef = shallowRef(null);
+let myControl;
+let randomInteger = Math.floor(Math.random() * 200) + 1;
+
+onMounted(() => {
+  myControl = myRef.value.control;
+  myControl.run([
+    myControl
+      .condition()
+      .onNextTick(randomInteger)
+      .then([
+        myControl.action().setSpeed(undefined, 9),
+        myControl.action(3).setAccel(undefined, 0.13),
+      ]),
+    myControl
+      .condition(undefined, true)
+      .reachPosition(undefined, 620)
+      .then([
+        myControl.action().teleportTo(undefined, -580 - myHeight),
+        myControl.action().setSpeed(undefined, 9),
+        myControl.action(3).setAccel(undefined, 0.13),
+      ]),
+  ]);
+});
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/TombSweepingDayTest/Raining/RainScene.vue

@@ -0,0 +1,131 @@
+<template>
+  <JsvAudio
+    key="AudioBg"
+    :src="musicBg"
+    :loop="true"
+    :onRef="onRef"
+    :onLoad="audioOnLoad"
+  />
+  <JsvRipple :width="1280" :height="720" ref="rippleViewRef">
+    <jsv-focus-block autoFocus>
+      <img
+        :src="bg"
+        :style="{ width: 1280, height: 720 }"
+        :onLoad="funcBackgroundOnLoaded"
+      />
+      <div
+        :style="{
+          width: 100,
+          height: 100,
+          backgroundImage: title,
+          left: 900,
+          top: 40,
+        }"
+      ></div>
+      <!-- 随机位置和长度的雨滴 -->
+      <Rain v-for="(item, index) in 60" />
+      <!-- 波纹效果 -->
+    </jsv-focus-block>
+  </JsvRipple>
+</template>
+
+<script setup>
+import Rain from "./Rain.vue";
+import { JsvRipple, JsvRippleShape, JsvAudio, JsvSoundPool } from "jsview";
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+const bg =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/TombSweepingDayTest/qingming_bg.jpg";
+const title =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/TombSweepingDayTest/qingming_title.png";
+const musicBg =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/rain_background.mp3";
+let timer = { id: -1, id2: -1 };
+const soundPool = new JsvSoundPool(10);
+let rippleViewRef = shallowRef(null);
+const genSource = () => {
+  let leftOrRight = Math.random() >= 0.5 ? true : false;
+  if (leftOrRight) {
+    return [
+      Math.floor(Math.random() * (336 - 214 + 1)) + 214,
+      Math.round(Math.random() * 200 + 400),
+      Math.round(Math.random() * 100 + 20),
+    ];
+  } else {
+    return [
+      Math.floor(Math.random() * (1066 - 960 + 1)) + 960,
+      Math.round(Math.random() * 200 + 400),
+      Math.round(Math.random() * 100 + 20),
+    ];
+  }
+};
+//背景音频ref
+let _BgAudio = null;
+//水波音效
+const mySound =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/rain_tiktok.mp3";
+//音效ref
+let mySoundControl = null;
+//音效回调
+soundPool.request(`url(${mySound})`, null, 1, (state, audioController) => {
+  if (state === 0) {
+    mySoundControl = audioController;
+  }
+});
+//音频回调
+const onRef = (ref) => {
+  _BgAudio = ref;
+};
+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(() => {
+      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);
+      }
+    }, 3000);
+  }
+});
+onBeforeUnmount(() => {
+  if (timer.id !== -1) {
+    clearInterval(timer.id);
+    timer.id = -1;
+  }
+  if (timer.id2 !== -1) {
+    clearTimeout(timer.id2);
+    timer.id2 = -1;
+  }
+  soundPool.destroy();
+  _BgAudio?.pause();
+  _BgAudio?.unload();
+});
+</script>
+
+<style scoped></style>

package/package.json

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