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

package/DemoForOperator/EpisodeList/ListItem.vue

@@ -0,0 +1,48 @@
+<!--
+ * @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,
+  query: 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,
+      backgroundColor: data.backgroundColor,
+      lineHeight: data.height,
+      textAlign: 'center',
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      transition: 'transform 0.2s',
+      transform: focused ? 'scale3d(1.05, 1.05, 1)' : null,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/Firework1/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#00000055' }"></div>
+  <Fireworks :top="500" :left="600" :srcConfig="config" />
+</template>
+
+<script setup>
+import Fireworks from "./Fireworks.vue";
+
+const config = {
+  group1_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group1_1.png",
+  group1_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group1_2.png",
+  group2_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group2_1.png",
+  group2_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group2_2.png",
+  group3_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group3_1.png",
+  group3_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group3_2.png",
+  group4_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group4_1.png",
+  group4_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group4_2.png",
+  group5_1: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group5_1.png",
+  group5_2: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/group5_2.png",
+  //弹药图片素材(请按需修改)
+  ammo: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/star2.png",
+  //精灵图素材
+  fireworkSpriteSrc: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/fireworks.png",
+};
+</script>

package/DemoForOperator/Firework1/Fireworks.vue

@@ -0,0 +1,397 @@
+
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+
+  <JsvSpriteLoader
+    :imageUrl="fireworksPng"
+    :configUrl="fireworksJson"
+    :onConfigReady="preloadCallback"
+    :noNeedResource="false"
+  >
+    <div
+      v-show="myShow"
+      :style="{
+        top: props.top,
+        left: props.left,
+        transform: `scale3d(${80 / view_size.w},${160 / view_size.h},1)`,
+      }"
+    >
+      <div
+        :style="{
+          top: -170,
+          left: -45,
+        }"
+      >
+        <JsvSpriteAnim
+          :spriteInfo="sprite_info.info"
+          :loop="1"
+          :duration="1"
+          :imageUrl="fireworksPng"
+          ref="myRef"
+        >
+        </JsvSpriteAnim>
+      </div>
+    </div>
+  </JsvSpriteLoader>
+  <!-- FreeMove -->
+  <jsv-free-move-actor
+    v-if="isShow"
+    :top="props.top + 40"
+    :left="props.left + 15"
+    ref="actorRef"
+    :width="8"
+    :height="8"
+  >
+    <div
+      :style="{
+        width: 8,
+        height: 8,
+        backgroundImage: ammo,
+      }"
+    ></div>
+  </jsv-free-move-actor>
+  <!-- 粒子效果 -->
+  <div
+    v-if="isSpray"
+    :style="{
+      top: props.top - moveDistance + 20,
+      left: props.left,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData1"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray1"
+    :style="{
+      top: props.top - moveDistance + 80,
+      left: props.left - 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData2"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray2"
+    :style="{
+      top: props.top - moveDistance + 80,
+      left: props.left + 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData3"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray3"
+    :style="{
+      top: props.top - moveDistance - 80,
+      left: props.left - 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData4"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+  <div
+    v-if="isSpray4"
+    :style="{
+      top: props.top - moveDistance - 80,
+      left: props.left + 100,
+      width: 50,
+      height: 50,
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData5"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk1"
+      :ignoreClip="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import {
+  JsvFreeMoveActor,
+  JsvSpriteAnim,
+  JsvSpray,
+  JsvPreload,
+  buildPreloadInfo,
+  JsvSpriteLoader,
+} from "jsview";
+import { _formatInfo } from "./SpriteDeal";
+import { shallowRef, onMounted, onBeforeUnmount, watch } from "vue";
+
+/**
+ * 组件属性定义
+ */
+const props = defineProps({
+  /**
+   * 烟花中心顶部位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  top: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 烟花中心左侧位置
+   * @type {Number}
+   * @required
+   * @default undefined
+   * @unit px
+   */
+  left: { 
+    type: Number, 
+    require: true 
+  },
+  
+  /**
+   * 资源路径配置对象
+   * @type {Object}
+   * @required
+   * @property {String} group1_1 粒子效果组1-1图片路径
+   * @property {String} group1_2 粒子效果组1-2图片路径
+   * @property {String} group2_1 粒子效果组2-1图片路径
+   * @property {String} group2_2 粒子效果组2-2图片路径
+   * @property {String} group3_1 粒子效果组3-1图片路径
+   * @property {String} group3_2 粒子效果组3-2图片路径
+   * @property {String} group4_1 粒子效果组4-1图片路径
+   * @property {String} group4_2 粒子效果组4-2图片路径
+   * @property {String} group5_1 粒子效果组5-1图片路径
+   * @property {String} group5_2 粒子效果组5-2图片路径
+   * @property {String} ammo 弹药轨迹图片路径
+   * @property {String} fireworkSpriteSrc 烟花精灵图路径
+   */
+  srcConfig: { 
+    type: Object, 
+    require: true 
+  }
+});
+
+//火花图片素材
+const group1_1 = props.srcConfig.group1_1;
+const group1_2 = props.srcConfig.group1_2;
+const group2_1 = props.srcConfig.group2_1;
+const group2_2 = props.srcConfig.group2_2;
+const group3_1 = props.srcConfig.group3_1;
+const group3_2 = props.srcConfig.group3_2;
+const group4_1 = props.srcConfig.group4_1;
+const group4_2 = props.srcConfig.group4_2;
+const group5_1 = props.srcConfig.group5_1;
+const group5_2 = props.srcConfig.group5_2;
+//弹药图片素材(请按需修改)
+const ammo = props.srcConfig.ammo;
+//精灵图素材
+const fireworksPng = props.srcConfig.fireworkSpriteSrc;
+const fireworksJson = props.srcConfig.fireworkSpriteSrc + ".json";
+
+//运动距离
+let moveDistance = 260;
+let sprite_info = shallowRef(null);
+let view_size = shallowRef(null);
+let isSpray = shallowRef(false);
+let isSpray1 = shallowRef(false);
+let isSpray2 = shallowRef(false);
+let isSpray3 = shallowRef(false);
+let isSpray4 = shallowRef(false);
+//集中管理
+const sprayArray = [isSpray1, isSpray2, isSpray3, isSpray4];
+let isShow = shallowRef(true);
+let actorRef = shallowRef(null);
+let myShow = shallowRef(false);
+let actorControl;
+//随机顺序绽放函数
+const spray = () => {
+  timer.id2 = setTimeout(() => {
+    let randomIndex = Math.floor(Math.random() * sprayArray.length);
+    sprayArray[randomIndex].value = true;
+    timer.id = setInterval(() => {
+      let remainingItems = sprayArray.filter((item) => !item.value);
+      if (remainingItems.length === 0) {
+        clearInterval(timer.id);
+        timer.id = -1;
+      } else {
+        randomIndex = Math.floor(Math.random() * remainingItems.length);
+        remainingItems[randomIndex].value = true;
+      }
+    }, 100);
+  }, 500);
+};
+
+//预加载
+const preload_info = [
+  buildPreloadInfo(group1_1),
+  buildPreloadInfo(group1_2),
+  buildPreloadInfo(group2_1),
+  buildPreloadInfo(group2_2),
+  buildPreloadInfo(group3_1),
+  buildPreloadInfo(group3_2),
+  buildPreloadInfo(group4_1),
+  buildPreloadInfo(group4_2),
+  buildPreloadInfo(group5_1),
+  buildPreloadInfo(group5_2),
+  buildPreloadInfo(fireworksPng),
+  buildPreloadInfo(ammo),
+];
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+};
+const preloadCallback = (config_json, resolve_set) => {
+  sprite_info.value = _formatInfo(config_json);
+  view_size.value = {
+    w: sprite_info.value.maxW,
+    h: sprite_info.value.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+//定时器
+let timer = { id: -1, id2: -1 };
+//ref
+let myRef = shallowRef(null);
+
+// 建议：做粒子效果的图的像素尽量不超过 40 * 40
+const sprayOk = {
+  type: 0,
+  particleNum: 60,
+  deltaAngle: 180,
+  deltaWidth: 20,
+  deltaHeight: 40,
+  pointSizeMin: 30,
+  pointSizeMax: 50,
+  speedMin: 1,
+  speedMax: 7,
+  lifeMin: 500,
+  lifeMax: 800,
+  accelerateX: 0,
+  accelerateY: 0,
+  enableFade: false,
+  enableShrink: true,
+};
+const sprayOk1 = {
+  type: 0,
+  particleNum: 30,
+  deltaAngle: 180,
+  deltaWidth: 20,
+  deltaHeight: 40,
+  pointSizeMin: 30,
+  pointSizeMax: 50,
+  speedMin: 1,
+  speedMax: 7,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: -40,
+  enableFade: false,
+  enableShrink: false,
+};
+//颜色搭配
+const group1 = [group1_1, group1_2];
+const group2 = [group2_1, group2_2];
+const group3 = [group3_1, group3_2];
+const group4 = [group4_1, group4_2];
+const group5 = [group5_1, group5_2];
+let ImgData1;
+let ImgData2;
+let ImgData3;
+let ImgData4;
+let ImgData5;
+const allGroup = [group1, group2, group3, group4, group5];
+//随机烟花颜色设定
+const remainingGroups = [...allGroup];
+for (let i = 1; i <= 5; i++) {
+  const randomIndex = Math.floor(Math.random() * remainingGroups.length);
+  const selectedGroup = remainingGroups[randomIndex];
+  switch (i) {
+    case 1:
+      ImgData1 = selectedGroup;
+      break;
+    case 2:
+      ImgData2 = selectedGroup;
+      break;
+    case 3:
+      ImgData3 = selectedGroup;
+      break;
+    case 4:
+      ImgData4 = selectedGroup;
+      break;
+    case 5:
+      ImgData5 = selectedGroup;
+      break;
+  }
+
+  remainingGroups.splice(randomIndex, 1);
+}
+
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    myShow.value = true;
+    timer.id2 = setTimeout(() => {
+      myRef.value.start();
+
+      actorControl.run((cmds) => [
+        cmds
+          .condition()
+          .onNextTick(2)
+          .then([
+            cmds.action().setSpeed(undefined, -9),
+            cmds.action(3).setAccel(undefined, 0.13),
+          ]),
+        cmds
+          .condition()
+          .reachPosition(undefined, -moveDistance)
+          .then([
+            cmds.action().stopMoving(),
+            () => {
+              isSpray.value = true;
+              isShow.value = false;
+              spray();
+            },
+          ]),
+      ]);
+    }, 0);
+  }
+});
+
+onMounted(() => {
+  actorControl = actorRef.value.control;
+});
+onBeforeUnmount(() => {
+  clearTimeout(timer.id2);
+  timer.id2 = -1;
+});
+</script>
+
+<style scoped></style>

package/DemoForOperator/Firework1/SpriteDeal.js

@@ -0,0 +1,30 @@
+//精灵图信息函数
+const _formatInfo = (action_json) => {
+    const info = {
+      frames: [],
+      meta: {
+        size: action_json.meta.size,
+      },
+    };
+    let frames_ref = info.frames;
+    let max_width = 0;
+    let max_height = 0;
+  
+    for (let i = 0; i < action_json.frames.length; i++) {
+      const target = action_json.frames[i].spriteSourceSize;
+      frames_ref.push({
+        target,
+        source: action_json.frames[i].frame,
+      });
+      const sprite_with = target.x + target.w;
+      const sprite_height = target.y + target.h;
+      if (sprite_with > max_width) {
+        max_width = sprite_with;
+      }
+      if (sprite_height > max_height) {
+        max_height = sprite_height;
+      }
+    }
+    return { info, maxW: max_width, maxH: max_height };
+  };
+  export { _formatInfo }

package/DemoForOperator/FlipPage/App.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  >
+    <FlipPage
+      ref="flipRef"
+      :layout="{
+        width: width,
+        height: height,
+      }"
+      :time="1"
+      :onAnimEnd="onAnimEnd"
+      :initShow="true"
+    >
+      <img
+        :src="`url(${imageUrl})`"
+        :style="{
+          width: width,
+          height: height,
+        }"
+        @load="onImgLoaded"
+      />
+      <div
+        :style="{
+          width: 1280,
+          height: 100,
+          backgroundColor: '#ffffff44',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: width,
+          height: height,
+          fontSize: 50,
+          color: '#fff',
+          textAlign: 'center',
+        }"
+      >
+        按OK键出场/入场
+      </div>
+    </FlipPage>
+  </jsv-focus-block>
+</template>
+<script setup>
+import FlipPage from "./FlipPage/FlipPage.vue";
+import { shallowRef } from "vue";
+
+const flipRef = shallowRef();
+const width = 1280;
+const height = 720;
+const imageUrl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+
+let imgLoaded = false;
+function onImgLoaded() {
+  imgLoaded = true;
+}
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    if (imgLoaded) {
+      flipRef.value.switch();
+    }
+    return true;
+  }
+  return false;
+}
+</script>