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

package/DemoForOperator/Banger/Banger/Banger.vue

@@ -0,0 +1,316 @@
+<!--
+ * 【模块 export 内容】
+ * Banger：鞭炮组件
+ *      props说明:
+ *          left          {Number}   组件顶端中心Left位置
+ *          top           {Number}   组件顶端中心Top位置
+ *          num           {Number}   鞭炮个数(个数决定长度)
+ *          leadWireTime  {Number}   引线燃烧时间
+ *          width         {Number}   整个组件的宽度
+-->
+<template>
+  <!-- 预加载 -->
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <div
+    v-show="myShow"
+    :style="{
+      left: props.left - widgetWidth / 2,
+      top: props.top,
+      width: widgetWidth,
+      height: leadWireHeight,
+      transform: `scale3d(${props.width / widgetWidth},${
+        props.width / widgetWidth
+      },1)`,
+      transformOrigin: 'center top',
+    }"
+  >
+    <div
+      :style="{
+        top: -leadWireHeight,
+        left: 0,
+        width: 80,
+        height: leadWireHeight,
+        overflow: 'hidden',
+        animation: aniName1,
+      }"
+    >
+      <div
+        :style="{
+          top: leadWireHeight,
+          left: 0,
+          width: 80,
+          height: leadWireHeight,
+          backgroundImage: leadWire,
+          animation: aniName2,
+        }"
+      ></div>
+    </div>
+    <!-- 燃烧特效 -->
+    <div
+      v-if="isSpark"
+      :style="{
+        top: -10,
+        left: 31,
+        animation: aniName1,
+      }"
+      @animationend="closeSpark"
+    >
+      <JsvSpriteLoader
+        :imageUrl="sparkPng"
+        :configUrl="sparkJson"
+        :onConfigReady="preloadCallback"
+        :noNeedResource="false"
+      >
+        <div
+          :style="{
+            transform: `scale3d(${20 / view_size.w},${20 / view_size.h},1)`,
+          }"
+        >
+          <JsvSpriteAnim
+            :spriteInfo="sprite_info.info"
+            :loop="'infinite'"
+            :duration="0.1"
+            :imageUrl="sparkPng"
+            ref="controllerAnim"
+            autoStart="true"
+          >
+          </JsvSpriteAnim>
+        </div>
+      </JsvSpriteLoader>
+    </div>
+
+    <MaroonLoader :starSrcs="starSrcs" :bangerSpriteSrc="bangerSpriteSrc">
+      <Maroon
+        v-for="(item, index) in spriteArray"
+        :top="leadWireHeight - 40 - index * 16"
+        :left="10"
+        :deg="index % 2 == 0 ? 30 : -30"
+        :ref="(el) => (RefArray[index] = el)"
+        :myRef="spriteArray[index]"
+      ></Maroon>
+    </MaroonLoader>
+  </div>
+</template>
+
+<script setup>
+import Maroon from "./Maroon.vue";
+import MaroonLoader from "./MaroonLoader.vue";
+import { shallowRef, onBeforeUnmount, watch, provide } from "vue";
+import {
+  JsvSpriteAnim,
+  getKeyFramesGroup,
+  JsvSpriteLoader,
+  JsvPreload,
+  buildPreloadInfo,
+} from "jsview";
+import { _formatInfo } from "./SpriteDeal";
+
+const props = defineProps({
+  /**
+   * 组件顶端中心Left位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  left: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 组件顶端中心Top位置（单位：px）
+   * @type {Number}
+   * @default 0
+   */
+  top: { 
+    type: Number, 
+    default: 0 
+  },
+  /**
+   * 鞭炮个数（决定组件长度）
+   * @type {Number}
+   * @default 12
+   */
+  num: { 
+    type: Number, 
+    default: 12 
+  },
+  /**
+   * 组件整体宽度（单位：px）
+   * @type {Number}
+   * @requires true
+   */
+  width: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 引线燃烧时间（单位：秒）
+   * @type {Number}
+   * @requires true
+   */
+  leadWireTime: { 
+    type: Number, 
+    require: true 
+  },
+  /**
+   * 星星特效资源路径数组
+   * @type {Array}
+   */
+  starSrcs: { 
+    type: Array 
+  },
+  /**
+   * 鞭炮资源路径
+   * @type {String}
+   */
+  bangerSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 火花特效动画资源路径
+   * @type {String}
+   */
+  sparkSpriteSrc: { 
+    type: String 
+  },
+  /**
+   * 引线图片资源路径
+   * @type {String}
+   */
+  leadWireSrc: { 
+    type: String 
+  }
+});
+
+const leadWire = props.leadWireSrc;
+const sparkPng = props.sparkSpriteSrc;
+const sparkJson = props.sparkSpriteSrc + ".json";
+
+//预加载
+const preload_info = [buildPreloadInfo(leadWire), buildPreloadInfo(sparkPng)];
+//定义ref
+let controllerAnim = shallowRef(null);
+//设定变量控制动画的播放
+let readyNum = shallowRef(0);
+const loadDone = (a) => {
+  readyNum.value++;
+  myShow.value = true;
+};
+let myShow = shallowRef(false);
+
+// 组件宽度
+const widgetWidth = 80;
+let sprite_info = shallowRef(null);
+let view_size = shallowRef(null);
+//计算引线长度
+let leadWireHeight = (props.num - 1) * 16 + 20;
+//插入动画
+const idRandom = Math.floor(Math.random() * 1000000);
+let styleShell = getKeyFramesGroup();
+let name1 = "animLw1-" + idRandom;
+let name2 = "animLw2-" + idRandom;
+let animLw1 = `@keyframes ${name1} {
+        from {
+          transform: translate3d(0,${leadWireHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(animLw1);
+let animLw2 = `@keyframes ${name2} {
+        from {
+          transform: translate3d(0,${-leadWireHeight}, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+styleShell.insertRule(animLw2);
+
+//预加载
+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++;
+};
+//子组件加载完毕的flag
+let sonFlag = shallowRef(false);
+provide("sonFlag", sonFlag);
+//动画名字
+let aniName1 = shallowRef(null);
+let aniName2 = shallowRef(null);
+//控制燃烧特效
+let isSpark = shallowRef(true);
+const closeSpark = () => {
+  isSpark.value = false;
+};
+//ref数组
+const spriteArray = new Array(props.num);
+let RefArray = shallowRef([]);
+for (let i = 0; i < spriteArray.length; i++) {
+  spriteArray[i] = shallowRef(null);
+}
+
+const callFireMethod = (index) => {
+  // 检查索引是否超出范围，如果超出则停止递归
+  if (index >= spriteArray.length) {
+    return;
+  }
+
+  // 获取当前索引对应的Maroon组件的ref
+  const currentMaroonRef = RefArray.value[index];
+  // 调用当前Maroon组件的fire方法
+  if (currentMaroonRef) {
+    currentMaroonRef.fire();
+  }
+  // 延迟1秒后递归调用下一个Maroon组件的fire方法
+  timer.id2 = setTimeout(() => {
+    callFireMethod(index + 1);
+  }, (props.leadWireTime * 1000) / (props.num - 1));
+};
+
+//延时器
+let timer = { id: -1, id2: -1 };
+watch(readyNum, (n, o) => {
+  if (o != 3 && n == 3) {
+    timer.id = setTimeout(() => {
+      controllerAnim.value.start();
+      callFireMethod(0);
+      aniName1.value = `${name1} ${props.leadWireTime}s linear`;
+      aniName2.value = `${name2} ${props.leadWireTime}s linear`;
+    }, 0);
+  }
+});
+
+watch(sonFlag, (n) => {
+  if (n == true) {
+    readyNum.value++;
+  }
+});
+
+onBeforeUnmount(() => {
+  styleShell.removeRule(name1);
+  styleShell.removeRule(name2);
+  clearTimeout(timer.id);
+  clearTimeout(timer.id2);
+  timer.id = -1;
+  timer.id2 = -1;
+});
+</script>
+
+<style scoped>
+.text {
+  font-size: 24;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  line-height: 32;
+}
+</style>

package/DemoForOperator/Banger/Banger/Maroon.vue

@@ -0,0 +1,123 @@
+<template>
+  <jsv-free-move-actor
+    :top="props.top"
+    :left="props.left"
+    :width="30"
+    :height="60"
+    ref="actorRef"
+  >
+    <div
+      :style="{
+        width: 30,
+        height: 60,
+      }"
+    >
+      <div
+        :style="{
+          width: 30,
+          height: 40,
+          transform: `rotate3d(0,0,1,${deg}deg) scale3d(${40 / view_size.w},${
+            40 / view_size.w
+          },1)`,
+          transformOrigin: 'center center',
+        }"
+      >
+        <!-- 炮仗图 -->
+        <JsvSpriteAnim
+          :spriteInfo="maroonResource.firecrackerSet.info.value"
+          :loop="1"
+          :duration="0.8"
+          :imageUrl="maroonResource.firecrackerPng"
+          :onAnimEnd="onAnimEnd"
+          :ref="props.myRef"
+        >
+        </JsvSpriteAnim>
+        <!-- 喷射粒子 -->
+        <div
+          v-if="isSpray"
+          :style="{
+            top: view_size.h / 2,
+            left: view_size.w / 2,
+            width: view_size.w,
+            height: view_size.h,
+          }"
+        >
+          <jsv-spray
+            v-for="item in ImgData"
+            :pointRes="`url(${item})`"
+            :sprayStyle="sprayOk"
+            :ignoreClip="true"
+          />
+        </div>
+      </div>
+    </div>
+  </jsv-free-move-actor>
+</template>
+
+<script setup>
+import { shallowRef, watch, inject, onMounted } from "vue";
+import { JsvSpriteAnim, JsvSpray, JsvFreeMoveActor } from "jsview";
+import { _formatInfo } from "./SpriteDeal";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+});
+
+let maroonResource = inject("maroonResource");
+
+let view_size = maroonResource.firecrackerSet.viewSize;
+
+//FreeMove
+let actorRef = shallowRef(null);
+let actorControl;
+
+let isShow = shallowRef(true);
+let isSpray = shallowRef(false);
+let deg = shallowRef(props.deg);
+
+//动画处理
+const fire = () => {
+  props.myRef.value.start();
+  actorControl.run((cmds) => [
+    cmds.action().setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
+    cmds
+      .condition()
+      .reachPosition(undefined, 280)
+      .then([cmds.action().stopMoving()]),
+  ]);
+};
+
+//粒子效果
+const ImgData = maroonResource.stars;
+const sprayOk = {
+  type: 0,
+  particleNum: 100,
+  deltaAngle: 360,
+  deltaWidth: 20,
+  deltaHeight: 20,
+  pointSizeMin: 20,
+  pointSizeMax: 30,
+  speedMin: 1,
+  speedMax: 7,
+  lifeMin: 1000,
+  lifeMax: 2000,
+  accelerateX: 0,
+  accelerateY: 0,
+  enableFade: true,
+  enableShrink: true,
+};
+//动画结束播放粒子效果
+const onAnimEnd = () => {
+  isShow.value = false;
+  isSpray.value = true;
+};
+onMounted(() => {
+  actorControl = actorRef.value.control;
+});
+defineExpose({ fire });
+</script>
+
+<style scoped></style>

package/DemoForOperator/Banger/Banger/MaroonLoader.vue

@@ -0,0 +1,78 @@
+<template>
+  <JsvPreload
+    :preloadList="preload_info"
+    :onPreloadDone="loadDone"
+  ></JsvPreload>
+  <JsvSpriteLoader
+    :imageUrl="maroonResource.firecrackerPng"
+    :configUrl="maroonResource.firecrackerJson"
+    :onConfigReady="preloadCallback"
+    :noNeedResource="false"
+  >
+    <slot v-if="sonFlag" />
+  </JsvSpriteLoader>
+</template>
+
+<script setup>
+import { shallowRef, watch, inject, provide } from "vue";
+import { JsvPreload, buildPreloadInfo, JsvSpriteLoader } from "jsview";
+import { _formatInfo } from "./SpriteDeal";
+const props = defineProps({
+  top: Number,
+  left: Number,
+  deg: Number,
+  controller: Object,
+  myRef: Object,
+  starSrcs: {
+    type: Array,
+  },
+  bangerSpriteSrc: {
+    type: String,
+  },
+});
+
+const maroonResource = {
+  stars: props.starSrcs,
+  firecrackerPng: props.bangerSpriteSrc,
+  firecrackerJson: props.bangerSpriteSrc + ".json",
+  firecrackerSet: {
+    info: shallowRef(null),
+    viewSize: shallowRef(null),
+  },
+};
+
+//预加载
+const preload_info = [
+  ...props.starSrcs.map((i) => buildPreloadInfo(i)),
+  buildPreloadInfo(props.bangerSpriteSrc),
+];
+let sonFlag = inject("sonFlag");
+
+provide("maroonResource", maroonResource);
+
+let readyNum = shallowRef(0);
+
+const loadDone = (a) => {
+  readyNum.value++;
+};
+
+const preloadCallback = (config_json, resolve_set) => {
+  let sprite_info = _formatInfo(config_json);
+  maroonResource.firecrackerSet.info.value = sprite_info.info;
+  maroonResource.firecrackerSet.viewSize.value = {
+    w: sprite_info.maxW,
+    h: sprite_info.maxH,
+  };
+  resolve_set(); // 通知loader数组设置完成
+  readyNum.value++;
+};
+
+//ref
+watch(readyNum, (n, o) => {
+  if (o != 2 && n == 2) {
+    sonFlag.value = true;
+  }
+});
+</script>
+
+<style scoped></style>

package/DemoForOperator/Banger/Banger/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/Blur/Blur.vue

@@ -0,0 +1,146 @@
+<!--
+ * @file Blur.vue
+ * 
+ * 【模块 export 内容】
+ * Blur：Vue组件，用于显示模糊效果的纹理
+ *      layout {Object}: (必填)组件布局信息对象，包含组件的位置和尺寸
+ *                     格式为 {left: number, top: number, width: number, height: number}
+ *      showRectPos {Object}: (必填)显示内容相对于原图左上角的位置
+ *                     格式为 {left: number, top: number}
+ *      borderRadius {Number}: 边框圆角半径，默认值 0
+ *      textureInfo {Object}: (必填)纹理信息对象，一般是captureBlurTexture的返回值
+ *                     格式为 {textureId: string, width: number, height: number}
+ * 
+ * captureBlurTexture(divRef, blurRadius): 捕获模糊纹理的方法
+ *      divRef {HTMLElement}: 要捕获的DOM元素引用
+ *      blurRadius {Number}: 模糊半径
+ *      返回值 {Promise<Object>}: 包含纹理信息的Promise，格式为 {textureId: string, width: number, height: number}
+ * 
+ * 注意事项:
+ *      组件会根据传入的textureInfo自动计算变换和缩放
+ *      使用前需要先调用captureBlurTexture方法获取纹理信息
+ -->
+
+<template>
+  <jsv-texture-anim
+    :key="randomKey"
+    :src="sourceSrc"
+    :left="layout.left"
+    :top="layout.top"
+    :width="layout.width"
+    :height="layout.height"
+    :transform="translateTransform"
+    :borderRadius="borderRadius"
+  ></jsv-texture-anim>
+</template>
+<script setup>
+import { JsvTextureAnim } from "jsview";
+import { shallowRef, computed } from "vue";
+
+const randomKey = Math.random().toString(36).substring(2, 15);
+
+const props = defineProps({
+  /**
+   * @description 布局信息对象，包含组件的位置和尺寸
+   * @property {number} left - 组件左侧位置
+   * @property {number} top - 组件顶部位置
+   * @property {number} width - 组件宽度
+   * @property {number} height - 组件高度
+   */
+  layout: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 显示内容相对于原图左上角的位置
+   * @property {number} left - 显示区域左侧位置
+   * @property {number} top - 显示区域顶部位置
+   */
+  showRectPos: {
+    type: Object,
+    required: true,
+  },
+  /**
+   * @description 边框圆角半径
+   * @default 0
+   */
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * @description 纹理信息对象, 一般是captureBlurTexture的返回值
+   * @property {string} textureId - 纹理ID
+   * @property {number} width - 纹理宽度
+   * @property {number} height - 纹理高度
+   */
+  textureInfo: {
+    type: Object,
+    required: true,
+  },
+});
+const sourceSrc = computed(() => {
+  console.log("sourceSrc", props.textureInfo?.textureId);
+  return props.textureInfo?.textureId
+    ? `jsvtexturestore://${props.textureInfo.textureId}`
+    : "";
+});
+const translateTransform = computed(() => {
+  const leftPercent =
+    ((-props.showRectPos.left -
+      (props.layout.width - props.textureInfo.width) / 2) /
+      props.layout.width) *
+    100;
+  const topPercent =
+    ((-props.showRectPos.top -
+      (props.layout.height - props.textureInfo.height) / 2) /
+      props.layout.height) *
+    100;
+  const xScale = props.textureInfo.width / props.layout.width;
+  const yScale = props.textureInfo.height / props.layout.height;
+  const r = `translate3d(${leftPercent.toFixed(2)}%, ${topPercent.toFixed(2)}%, 0) scale3d(${xScale.toFixed(2)}, ${yScale.toFixed(2)}, 1)`;
+  console.log("ccht translateTransform", r);
+  return r;
+});
+</script>
+
+<script>
+import { JsvTextureStoreApi, CaptureProcessType } from "jsview";
+/**
+ * @description 捕获模糊纹理
+ * @param {HTMLElement} divRef - 要捕获的DOM元素引用
+ * @param {number} blurRadius - 模糊半径
+ * @returns {Promise<Object>} 返回包含纹理信息的Promise
+ * @property {string} textureId - 捕获的纹理ID
+ * @property {number} width - 纹理宽度
+ * @property {number} height - 纹理高度
+ */
+export function captureBlurTexture(divRef, blurRadius) {
+  return new Promise((resolve, reject) => {
+    try {
+      JsvTextureStoreApi.capture2Texture(
+        divRef,
+        (textureName, autoRecycle, w, h) => {
+          console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+          if (textureName) {
+            resolve({
+              textureId: textureName,
+              width: w,
+              height: h,
+            });
+          } else {
+            reject(new Error("Failed to capture texture"));
+          }
+        },
+        true,
+        {
+          type: CaptureProcessType.Blur,
+          radius: blurRadius,
+        }
+      );
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+</script>