@shijiu/jsview-vue-samples 2.3.0 → 2.3.151-test.0

package/DemoForOperator/Sound/Rain/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((cmds) => [
+    cmds
+      .condition()
+      .onNextTick(randomInteger)
+      .then([
+        cmds.action().setSpeed(undefined, 9),
+        cmds.action(3).setAccel(undefined, 0.13),
+      ]),
+    cmds
+      .condition(undefined, true)
+      .reachPosition(undefined, 620)
+      .then([
+        cmds.action().teleportTo(undefined, -580 - myHeight),
+        cmds.action().setSpeed(undefined, 9),
+        cmds.action(3).setAccel(undefined, 0.13),
+      ]),
+  ]);
+});
+onBeforeUnmount(() => {
+  JsvTextureStoreApi.deleteTexture(sourceId.value);
+});
+</script>
+
+<style lang="scss" scoped></style>

package/DemoForOperator/Sound/Rain/Raining/RainScene.vue

@@ -0,0 +1,118 @@
+<template>
+  <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>
+  <Sound :bgInfos="bgInfos" />
+</template>
+
+<script setup>
+import Rain from "./Rain.vue";
+import { JsvRipple, JsvRippleShape } from "jsview";
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useSound, Sound } from "../../Sound";
+
+const bg =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_bg.jpg";
+const title =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/qingming_title.png";
+const musicBg =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_background.mp3";
+const mySound =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/TombSweepingDayTest/Raining/RainScene/rain_tiktok.mp3";
+
+const { playSfx, playBg, pauseBg, bgInfos } = useSound(
+  {
+    bg: {
+      url: musicBg,
+      onLoad: () => {
+        console.log("bg onLoad");
+        playBg("bg");
+      },
+    },
+  },
+  { rain: mySound }
+);
+
+let timer = { id: -1, id2: -1 };
+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),
+    ];
+  }
+};
+
+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(() => {
+          playSfx("rain");
+        }, 1000);
+      }
+    }, 3000);
+  }
+});
+onBeforeUnmount(() => {
+  if (timer.id !== -1) {
+    clearInterval(timer.id);
+    timer.id = -1;
+  }
+  if (timer.id2 !== -1) {
+    clearTimeout(timer.id2);
+    timer.id2 = -1;
+  }
+});
+</script>
+
+<style scoped></style>

package/DemoForOperator/Sound/Sound/Sound.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { JsvAudio } from "jsview";
+
+const props = defineProps({
+  bgInfos: {
+    type: Object,
+    default: () => {},
+  },
+});
+console.log("bgInfos", props.bgInfos);
+</script>
+
+<template>
+  <div>
+    <jsv-audio
+      v-for="(bgInfo, index) in bgInfos"
+      :key="index"
+      :onRef="bgInfo.onRef"
+      :onLoad="bgInfo.onLoad"
+      :src="bgInfo.url"
+      :loop="true"
+    />
+  </div>
+</template>

package/DemoForOperator/Sound/Sound/index.js

@@ -0,0 +1,4 @@
+import { useSound } from "./useSound";
+import Sound from "./Sound.vue";
+
+export { useSound, Sound };

package/DemoForOperator/Sound/Sound/useSound.js

@@ -0,0 +1,112 @@
+import { onMounted, onBeforeUnmount } from "vue";
+import { JsvSoundPool, globalLoadJsvAudioPlugin } from "jsview";
+
+let jsvAudioLoaded = false;
+const safeLoadJsvAudio = () => {
+  if (!jsvAudioLoaded) {
+    globalLoadJsvAudioPlugin((status) => {
+      console.log("load JsvAudio plugin status", status);
+      if (status == 4) {
+        jsvAudioLoaded = true;
+      }
+    });
+  }
+};
+
+export function useSound(bgSourceMap, sfxSourceMap, needRepeat = false) {
+  let sfxController = {};
+  let bgController = {};
+
+  let soundPool = null;
+  const loadSfx = (sfxMap) => {
+    soundPool = new JsvSoundPool(10);
+    for (const [key, value] of Object.entries(sfxMap)) {
+      if (needRepeat) {
+        soundPool.requestInRepeatMode(
+          `url(${value})`,
+          100,
+          null,
+          1,
+          (state, audioController) => {
+            if (state === 0) {
+              sfxController[key] = audioController;
+            }
+          }
+        );
+      } else {
+        soundPool.request(
+          `url(${value})`,
+          null,
+          1,
+          (state, audioController) => {
+            if (state === 0) {
+              sfxController[key] = audioController;
+            }
+          }
+        );
+      }
+    }
+  };
+  if (sfxSourceMap && Object.keys(sfxSourceMap).length > 0) {
+    loadSfx(sfxSourceMap);
+  }
+
+  const initBg = (bgMap) => {
+    if (!bgMap) return [];
+    const bgInfos = [];
+    for (const [key, value] of Object.entries(bgMap)) {
+      const onRef = (ele) => {
+        bgController[key] = ele;
+      };
+      bgInfos.push({
+        url: value.url,
+        onRef,
+        onLoad: () => {
+          console.log("bg onLoad 2", value.onLoad);
+          value.onLoad?.();
+        },
+      });
+    }
+    return bgInfos;
+  };
+  const bgInfos = initBg(bgSourceMap);
+
+  onMounted(() => {
+    safeLoadJsvAudio();
+  });
+
+  onBeforeUnmount(() => {
+    sfxController = {};
+    soundPool?.destroy();
+
+    for (const [key, value] of Object.entries(bgController)) {
+      value?.pause();
+      value?.unload();
+    }
+  });
+
+  const playSfx = (sfxKey) => {
+    if (sfxController[sfxKey]) {
+      sfxController[sfxKey].play();
+    }
+  };
+
+  const playBg = (bgKey) => {
+    if (bgController[bgKey]) {
+      bgController[bgKey]?.play();
+    }
+  };
+
+  const pauseBg = (bgKey) => {
+    if (bgController[bgKey]) {
+      bgController[bgKey]?.pause();
+    }
+  };
+
+  return {
+    playSfx,
+    playBg,
+    pauseBg,
+    bgInfos,
+  };
+}

package/DemoForOperator/Sprite/Sprite.vue

@@ -1,6 +1,5 @@
 <template>
   <JsvSpriteLoader
-    v-if="show"
     :imageUrl="spriteSrc"
     :configUrl="jsonUrl"
     :onConfigReady="preloadCallback"
@@ -15,35 +14,76 @@
       :spriteFrameSize="spriteOriginSize"
       :viewSize="{ w: layout.width, h: layout.height }"
       :onAnimEnd="onAnimEnd"
-      :autostart="true"
+      :autostart="props.autoStart"
     />
   </JsvSpriteLoader>
 </template>
 
 <script setup>
-import { computed, shallowRef, onMounted } from "vue";
+import { computed, shallowRef, onMounted, watch } from "vue";
 import { JsvSpriteAnim, JsvSpriteLoader, JsvSpriteTools } from "jsview";
 
 const props = defineProps({
+  /**
+   * 雪碧图资源URL
+   * @type {String}
+   */
   spriteSrc: {
     type: String,
   },
+  /**
+   * 动画循环次数
+   * -1表示无限循环
+   * @type {Number}
+   * @default 0
+   */
   repeat: {
     type: Number,
   },
+  /**
+   * 容器尺寸配置
+   * @type {Object}
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   */
   layout: {
     type: Object,
   },
+  /**
+   * 动画结束回调函数
+   * @type {Function|undefined}
+   */
   onEnd: {
     type: Function,
   },
+  /**
+   * 动画持续时间（单位：ms）
+   * 当设置duration时会覆盖雪碧图原始帧间隔时间
+   * @type {Number}
+   */
   duration: {
     type: Number,
   },
+  /**
+   * 是否自动开始动画
+   * @type {Boolean}
+   * @default true
+   */
+  autoStart: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 动画结束帧
+   * @type {"start" | "end"}
+   */
+  endFrame: {
+    type: String,
+    default: "end",
+  },
 });
 
 const spriteController = shallowRef();
-const show = shallowRef(true);
 
 const jsonUrl = computed(() => {
   return props.spriteSrc + ".json";
@@ -70,8 +110,11 @@ const _formatInfo = (config_json) => {
   return { info };
 };
 
+/**
+ * 动画结束处理函数
+ * 隐藏组件并触发外部回调
+ */
 function onAnimEnd() {
-  show.value = false;
   props.onEnd?.();
 }
 
@@ -86,5 +129,19 @@ const preloadCallback = (config_json, resolve_set) => {
   resolve_set(); // 通知loader数组设置完成
 };
 
+watch(spriteController, (value) => {
+  if (value) {
+    if (props.autoStart) {
+      value.start("all", props.endFrame, props.duration, props.repeat);
+    }
+  }
+});
+
+defineExpose({
+  play: () => {
+    spriteController.value.start("all", "end", props.duration, props.repeat);
+  },
+});
+
 onMounted(() => {});
 </script>

package/DemoForOperator/Stretch/Stretch/Stretch.vue

@@ -15,40 +15,90 @@ import Item from "./Item.vue";
 import { ref, provide, onMounted } from "vue";
 
 const props = defineProps({
+  /**
+   * 组件名称标识
+   * @type {string}
+   */
   name: {
     type: String,
     required: true,
   },
-  // { smallWidth: 0, largeWidth: 0, height: 0, marginRight: 10}
+  /**
+   * 元素尺寸配置对象
+   * @type {Object}
+   * @property {number} smallWidth - 小元素宽度
+   * @property {number} largeWidth - 大元素宽度
+   * @property {number} height - 元素高度
+   * @property {number} [marginRight=10] - 元素右侧间距
+   */
   itemSizeInfo: {
     type: Object,
     required: true,
   },
+  /**
+   * 数据源数组
+   * @type {Array<Object>}
+   */
   datas: {
     type: Array,
     required: true,
   },
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @property {number} width - 容器宽度
+   * @property {number} height - 容器高度
+   * @property {number} left - 左侧位置
+   * @property {number} top - 顶部位置
+   */
   layout: {
     type: Object,
     required: true,
   },
+  /**
+   * 初始大元素索引
+   * @type {number}
+   * @default 0
+   */
   initLargeIndex: {
     type: Number,
     default: 0,
   },
+  /**
+   * 获取焦点时的回调函数
+   * @type {Function}
+   */
   onFocus: {
     type: Function,
   },
+  /**
+   * 失去焦点时的回调函数
+   * @type {Function}
+   */
   onBlur: {
     type: Function,
   },
+  /**
+   * 到达边缘时的回调函数
+   * @type {Function}
+   * @param {Object} edgeInfo - 边缘信息对象
+   */
   onEdge: {
     type: Function,
   },
+  /**
+   * 元素点击事件回调
+   * @type {Function}
+   * @param {Object} itemData - 被点击元素的数据
+   */
   onItemClick: {
     type: Function,
   },
-  //动画时长, 单位秒
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {number}
+   * @default 0.2
+   */
   duration: {
     type: Number,
     default: 0.2,

package/DemoForOperator/Swiper/App.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-10 14:45:39
+ * @Description: file content
+-->
+
+<script setup>
+import { JsvSwiper2, useFocusHub, EdgeDirection } from "jsview";
+import { onMounted, ref } from "vue";
+import Item from "./Item.vue";
+
+const focusHub = useFocusHub();
+const imgSrcList = [
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
+];
+let itemSize = {
+  width: 400,
+  height: 600,
+};
+let data = [];
+for (let i = 0; i < 10; i++) {
+  data.push({
+    width: itemSize.width,
+    height: itemSize.height,
+    index: i,
+    src: imgSrcList[i % imgSrcList.length],
+  });
+}
+
+const currentIndex = ref(0);
+const swiper1 = {
+  onChange: (currentId) => {
+    currentIndex.value = currentId;
+    console.log("swiper1: onChange", currentId);
+  },
+  onClick: (currentId) => {
+    console.log("swiper1: onClick", currentId);
+  },
+  onEdge: (info) => {},
+};
+
+onMounted(() => {
+  focusHub.setFocus("mySwiper1");
+});
+const duration = 600;
+</script>
+
+<template>
+  <div
+    :style="{ width: 1280, height: 720, backgroundColor: '#000000cc' }"
+  ></div>
+  <div
+    :style="{
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      textAlign: 'center',
+      lineHeight: 100,
+      color: '#ffffff',
+    }"
+  >
+    左右键切换轮播图显示海报
+  </div>
+  <div :style="{ left: (1280 - 700) / 2, top: 100 }">
+    <jsv-swiper2
+      name="mySwiper1"
+      ref="mySwiper1"
+      :totalFrame="data.length"
+      :layoutInfo="{
+        width: 700,
+        height: 600,
+      }"
+      :itemSize="itemSize"
+      :animation="{
+        duration: duration,
+        easing: 'jsv-ease(0.4, 0.8, 1.2)',
+      }"
+      :autoplayInterval="1000"
+      :onChange="swiper1.onChange"
+      :onClick="swiper1.onClick"
+      :onEdge="swiper1.onEdge"
+      :itemGap="10"
+    >
+      <template #itemView="{ dataIndex, focused, distanceToCenter }">
+        <item
+          :data="data[dataIndex]"
+          :index="dataIndex"
+          :currentIndex="currentIndex"
+          :focused="focused"
+          :borderRadius="40"
+          :collapseWidth="140"
+          :duration="duration"
+          :distanceToCenter="distanceToCenter"
+        />
+      </template>
+    </jsv-swiper2>
+  </div>
+</template>

package/DemoForOperator/Swiper/Item.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      backgroundColor: '#00ff00',
+      borderRadius: borderRadius,
+    }"
+  ></div>
+  <ParallaxSlide
+    ref="pandaAnim"
+    :imgUrl="data.src"
+    :width="data.width"
+    :height="data.height"
+    :collapseWidth="collapseWidth"
+    :duration="duration"
+    :borderRadius="borderRadius"
+    :initPosition="initPosition"
+    easing="jsv-ease(0.4, 0.8, 1.2)"
+  ></ParallaxSlide>
+</template>
+<script setup>
+import ParallaxSlide from "./ParallaxSlide.vue";
+import { shallowRef, watch } from "vue";
+const props = defineProps({
+  data: Object,
+  focused: Boolean,
+  duration: Number,
+  borderRadius: Number,
+  collapseWidth: Number,
+  currentIndex: Number,
+  index: Number,
+  distanceToCenter: Number,
+});
+const initPosition =
+  props.distanceToCenter === 0
+    ? "center"
+    : props.distanceToCenter > 0
+    ? "right"
+    : "left";
+
+const pandaAnim = shallowRef(null);
+
+watch(
+  () => props.distanceToCenter,
+  (newVal) => {
+    if (newVal === 0) {
+      pandaAnim.value.slide("center");
+    } else if (newVal == 1) {
+      pandaAnim.value.slide("right");
+    } else if (newVal == -1) {
+      pandaAnim.value.slide("left");
+    }
+  }
+);
+</script>