@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/DemoForOperator/Sound/FocusMove/App.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub, SeamlessSlide } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, shallowRef } from "vue";
+import { useSound, Sound } from "../Sound";
+import moveSound from "./move.mp3";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const provideData = () => {
+  const data = [];
+
+  for (let i = 0; i < 200; i++) {
+    data.push({
+      width: 180,
+      height: 270,
+      marginRight: 10,
+      marginBottom: 10,
+      color: randomColor(),
+      content: i,
+    });
+  }
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+// callbacks
+const onEdge = (edgeInfo) => {
+  console.log(TAG, "onEdge", edgeInfo);
+};
+
+const onFocus = () => {
+  console.log(TAG, "onFocus");
+};
+
+const onBlur = () => {
+  console.log(TAG, "onBlur");
+};
+
+const onScroll = (start, range, totalSize) => {
+  console.log(TAG, "onScroll", start, range, totalSize);
+};
+
+const widgetLayout = {
+  left: 50,
+  top: 50,
+  width: 1000,
+  height: 600,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+
+const { playSfx } = useSound(
+  null,
+  {
+    move: moveSound,
+  },
+  true
+);
+
+const onDispatchKeyDown = (ev) => {
+  if (
+    ev.keyCode == 37 ||
+    ev.keyCode == 39 ||
+    ev.keyCode == 38 ||
+    ev.keyCode == 40
+  ) {
+    playSfx("move");
+  }
+  return false;
+};
+
+const slideSetting = new SeamlessSlide({
+  // easing: "cubic-bezier(.42,.11,.43,.91)",
+  easing: "jsv-ease(0.2, 0.6, 1.5)",
+  speed: 0.85,
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <jsv-focus-block :onAction="{ onDispatchKeyDown }">
+    <metro-widget
+      name="mainMw"
+      :left="widgetLayout.left"
+      :top="widgetLayout.top"
+      :width="widgetLayout.width"
+      :height="widgetLayout.height"
+      :provideData="provideData"
+      :direction="VERTICAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+      :onScroll="onScroll"
+      :slideSetting="slideSetting"
+    >
+      <template #renderItem="{ data, onAction }">
+        <item :data="data" :onAction="onAction" />
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/DemoForOperator/Sound/FocusMove/Item.vue

@@ -0,0 +1,43 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/Sound/Rain/App.vue

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

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>