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

package/DemoForOperator/Genie/App.vue

@@ -6,7 +6,7 @@
       onKeyDown,
     }"
   >
-    <Genie
+    <GenieSlot
       ref="cGenieRef"
       :width="width"
       :height="height"
@@ -16,7 +16,7 @@
       :position="position"
       :time="1"
       :onAnimEnd="onAnimEnd"
-      :initShow="true"
+      :initShow="false"
     >
       <img
         :src="`url(${imageUrl})`"
@@ -44,12 +44,12 @@
       >
         按OK键进场/出场
       </div>
-    </Genie>
+    </GenieSlot>
   </jsv-focus-block>
 </template>
 <script setup>
-import Genie from "./geniePakcer/Genie.vue";
-import { shallowRef } from "vue";
+import GenieSlot from "./geniePakcer/GenieSlot.vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 
 const cGenieRef = shallowRef();
 const position = { x: -80, y: 600 };
@@ -59,13 +59,27 @@ const imageUrl =
   "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
 
 let imgLoaded = false;
+let unmounted = false;
+
+onBeforeUnmount(()=>{
+  unmounted = true;
+})
+
 function onImgLoaded() {
-  imgLoaded = true;
+  // 进行setTimeout(1), 为了规避已加载的图片onLoad太早破坏了先绘制再截图的时序
+  setTimeout(()=>{
+    imgLoaded = true;
+    if (!unmounted) {
+      cGenieRef.value.switcher();
+    }
+  }, 1)
 }
+
 const onAnimEnd = () => {
   console.log("anim end");
 };
 
+
 function onKeyDown(ev) {
   if (ev.keyCode == 13) {
     if (imgLoaded) {

package/DemoForOperator/Genie/App2.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+    <jsv-focus-block
+      autoFocus
+      :onAction="{
+        onKeyDown,
+      }"
+    >
+      <GenieImage
+        ref="cGenieRef"
+        :width="width"
+        :height="height"
+        :left="128"
+        :top="72"
+        direction="horizontal"
+        :position="position"
+        :time="1"
+        :onAnimEnd="onAnimEnd"
+        :initShow="false"
+        :imageUrl="imageUrl"
+      >
+       
+      </GenieImage>
+    </jsv-focus-block>
+  </template>
+  <script setup>
+  import GenieImage from "./geniePakcer/GenieImage.vue";
+  import { shallowRef, onBeforeUnmount, onMounted } from "vue";
+  
+  const cGenieRef = shallowRef();
+  const position = { x: -80, y: 600 };
+  const width = 1024;
+  const height = 576;
+  const imageUrl =
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+  
+  let imgLoaded = false;
+  let unmounted = false;
+  
+  onBeforeUnmount(()=>{
+    unmounted = true;
+  })
+  
+  const onAnimEnd = () => {
+    console.log("anim end");
+  };
+  
+  function onKeyDown(ev) {
+    if (ev.keyCode == 13) {
+      cGenieRef.value.switcher();
+      return true;
+    }
+    return false;
+  }
+
+  onMounted(()=>{
+    cGenieRef.value.switcher();
+  })
+
+  </script>
+  

package/DemoForOperator/Genie/geniePakcer/GenieImage.vue

@@ -0,0 +1,298 @@
+<script setup>
+import buildGenieAnimation from "./GenieTools.ts";
+import {
+  shallowRef,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+} from "jsview";
+const props = defineProps({
+  /** 
+   * 组件宽度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  width: { type: Number, require: true },
+  
+  /** 
+   * 组件高度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  height: { type: Number, require: true },
+  
+  /** 
+   * 左侧定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  left: { type: Number, default: 0 },
+  
+  /** 
+   * 顶部定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  top: { type: Number, default: 0 },
+  
+  /** 
+   * 动画持续时间（秒），且不支持响应式
+   * @type {Number}
+   * @default 2
+   */
+  time: { type: Number, default: 2 },
+  
+  /** 
+   * 动画中心点坐标（必填），且不支持响应式
+   * @type {Object} 
+   * @property {Number} x - X轴坐标
+   * @property {Number} y - Y轴坐标
+   */
+  position: { type: Object, require: true },
+  
+  /** 
+   * 缩放比例，且不支持响应式
+   * @type {Number}
+   * @default 1
+   */
+  size: { type: Number, default: 1 },
+  
+  /** 
+   * 动画方向（必填），且不支持响应式
+   * @type {'horizontal'|'vertical'}
+   */
+  direction: { type: String, require: true },
+  
+  /** 
+   * 动画结束回调函数
+   * @type {Function}
+   * @default () => {}
+   */
+  onAnimEnd: { type: Function, default: () => {} },
+  
+  /** 
+   * 初始显示状态（必填），且不支持响应式
+   * @type {Boolean}
+   */
+  initShow: { type: Boolean, require: true },
+
+  /** 
+   * 截屏后的纹理名称
+   * @type {String}
+   */
+  textureName: { type: String, default: null },
+
+  /** 
+   * 图片url, 与截屏二选一
+   * @type {String}
+   */
+  imageUrl: { type: String, default: null },
+});
+
+
+let rSlotShowOnDone = shallowRef(false);
+
+let vUnmounted = false; // 当前组件是否已经卸载, 用于控制Timer回调后的有效性
+
+// 初始状态slot显示状态
+const STAGE_DONE = 1;
+// 截屏回调执行了doAnim后, 此动作会v-if加载JsvFragShaderView, 并隐藏slot
+const STAGE_STARTING_ANIMATION = 3;
+// JsvFragShaderView加载完成(onRef回调), 设置动画属性来开始动画
+const STAGE_ANIMATING = 4;
+// 动画结束的onAllAnimEnd回调后, 至此, setTimeout(1)后, 设置为STAGE_DONE, 并进行props.onAnimEnd回调
+const STAGE_CLOSING_ANIMATION = 5;
+
+let rStageMachine = shallowRef(STAGE_DONE);
+
+//动画
+const cStyleShell = getKeyFramesGroup();
+//动画字符串
+let vAniStr = shallowRef(null);
+
+const { 
+  vRelease, 
+  vContract, 
+  vShader,
+  vTransformDirection, //位移动画中心点方向
+  KeyFrameReleaseName,
+  KeyFrameContractName,
+} = buildGenieAnimation(props.position, props.width, props.height, props.direction);
+
+// Shader配置, 因为组件在动画时都是重新创建的, 所以不用做成响应式 
+const cShaderInfo = {
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: null,
+    },
+  ],
+  duration: props.time * 1000,
+};
+
+// 制作基础版shader
+const cLocalizationShader = vShader;
+
+//根据初始状态展示
+if (props.initShow) {
+  rSlotShowOnDone.value = true;
+} else {
+  rSlotShowOnDone.value = false;
+}
+
+const onAllAnimEnd = () => {
+  rStageMachine.value = STAGE_CLOSING_ANIMATION;
+
+  setTimeout(() => {
+    rStageMachine.value = STAGE_DONE;
+    if (!vUnmounted) {
+      if (props.onAnimEnd) {
+        props.onAnimEnd();
+      }
+    }
+  }, 1);
+}
+
+const onShaderViewNewRef = (widgetRef) => {
+  if (widgetRef != null) {
+    rStageMachine.value = STAGE_ANIMATING;
+
+    widgetRef.startAnim();
+  } else {
+    // 动画结束后的组件消失回调, 不需要做任何事情
+  }
+}
+
+cStyleShell.insertRule(vContract);
+cStyleShell.insertRule(vRelease);
+
+function doAnim() {
+  rStageMachine.value = STAGE_STARTING_ANIMATION;
+
+  if (rSlotShowOnDone.value) {
+    vAniStr = KeyFrameReleaseName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "(iDuration - iTime) / iDuration");
+  } else {
+    vAniStr = KeyFrameContractName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "iTime / iDuration");
+  }
+}
+
+let vWaitingImageLoadResolveFunc = null;
+let vImageLoaded = false;
+
+const onImageLoad = () => {
+  if (vUnmounted) {
+    return;
+  }
+
+  vImageLoaded = true;
+
+  if (vWaitingImageLoadResolveFunc) {
+    vWaitingImageLoadResolveFunc();
+  }
+}
+
+const switcher = async () => {
+  if (rStageMachine.value != STAGE_DONE) {
+    // 动画还没结束, 不能切换
+    // 结束后因为slot显示资源可能要重新加载, 所以也不适宜做switcher指令堆积处理
+    return;
+  }
+
+  if (props.imageUrl && !vImageLoaded) {
+    // 等待图片加载完成
+    await new Promise((resolve) => {
+      vWaitingImageLoadResolveFunc = resolve;
+    });
+  }
+
+  if (props.textureName) {
+    cShaderInfo.textures[0].resource = `jsvtexturestore://${props.textureName}`;
+  } else {
+    cShaderInfo.textures[0].resource = props.imageUrl;
+  }
+
+  // 反转显示目标
+  rSlotShowOnDone.value = !rSlotShowOnDone.value;
+
+  doAnim();
+};
+
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  vUnmounted = true;
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+
+onBeforeUnmount(() => {
+  cStyleShell.removeRule(KeyFrameContractName);
+  cStyleShell.removeRule(KeyFrameReleaseName);
+});
+
+defineExpose({
+  /**
+   * 触发精灵动画切换
+   * 执行截屏并启动收缩/展开动画
+   */
+  switcher,
+});
+
+</script>
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+    }"
+  >
+    <div
+      v-if="rStageMachine == STAGE_ANIMATING || rStageMachine == STAGE_STARTING_ANIMATION"
+      :style="{
+        width: props.width,
+        height: props.height,
+        animation: `${vAniStr} ${props.time}s`,
+        transformOrigin: vTransformDirection,
+      }"
+      @animationend="onAllAnimEnd"
+    >
+      <jsv-frag-shader-view
+        :ref="onShaderViewNewRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+        :duration="cShaderInfo.duration"
+        :shaderStr="cShaderInfo.shader"
+        :autoplay="false"
+        :textures="cShaderInfo.textures"
+        :loadComfirmed="true"
+      >
+      </jsv-frag-shader-view>
+    </div>
+    <div
+      v-show="rStageMachine == STAGE_DONE || rStageMachine == STAGE_CLOSING_ANIMATION"
+    >
+      <div
+        v-if="props.textureName"
+        :style="{
+            width: rSlotShowOnDone ? props.width : 1,
+            height: rSlotShowOnDone ? props.height : 1,
+            backgroundImage: `url(jsvtexturestore://${props.textureName})`,
+        }"/>
+        <img v-else :src="props.imageUrl" :style="{
+            width: rSlotShowOnDone ? props.width : 1,
+            height: rSlotShowOnDone ? props.height : 1,
+          }" 
+          @load="onImageLoad"
+        />
+    </div>
+  </div>
+</template>

package/DemoForOperator/Genie/geniePakcer/GenieSlot.vue

@@ -0,0 +1,292 @@
+<script setup>
+import buildGenieAnimation from "./GenieTools.ts";
+import {
+  shallowRef,
+  onMounted,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+  JsvTextureStoreApi,
+} from "jsview";
+const props = defineProps({
+  /** 
+   * 组件宽度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  width: { type: Number, require: true },
+  
+  /** 
+   * 组件高度（必填），且不支持响应式
+   * @type {Number} 
+   */
+  height: { type: Number, require: true },
+  
+  /** 
+   * 左侧定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  left: { type: Number, default: 0 },
+  
+  /** 
+   * 顶部定位位置，且不支持响应式
+   * @type {Number}
+   * @default 0
+   */
+  top: { type: Number, default: 0 },
+  
+  /** 
+   * 动画持续时间（秒），且不支持响应式
+   * @type {Number}
+   * @default 2
+   */
+  time: { type: Number, default: 2 },
+  
+  /** 
+   * 动画中心点坐标（必填），且不支持响应式
+   * @type {Object} 
+   * @property {Number} x - X轴坐标
+   * @property {Number} y - Y轴坐标
+   */
+  position: { type: Object, require: true },
+  
+  /** 
+   * 缩放比例，且不支持响应式
+   * @type {Number}
+   * @default 1
+   */
+  size: { type: Number, default: 1 },
+  
+  /** 
+   * 动画方向（必填），且不支持响应式
+   * @type {'horizontal'|'vertical'}
+   */
+  direction: { type: String, require: true },
+  
+  /** 
+   * 动画结束回调函数
+   * @type {Function}
+   * @default () => {}
+   */
+  onAnimEnd: { type: Function, default: () => {} },
+  
+  /** 
+   * 初始显示状态（必填），且不支持响应式
+   * @type {Boolean}
+   */
+  initShow: { type: Boolean, require: true },
+});
+
+
+let rSlotShowOnDone = shallowRef(false);
+
+let vUnmounted = false; // 当前组件是否已经卸载, 用于控制Timer回调后的有效性
+
+// 初始状态slot显示状态
+const STAGE_DONE = 1;
+// 对slot进行截屏
+const STAGE_CAPTURE = 2;
+// 截屏回调执行了doAnim后, 此动作会v-if加载JsvFragShaderView, 并隐藏slot
+const STAGE_STARTING_ANIMATION = 3;
+// JsvFragShaderView加载完成(onRef回调), 设置动画属性来开始动画
+const STAGE_ANIMATING = 4;
+// 动画结束的onAllAnimEnd回调后, 至此, setTimeout(1)后, 设置为STAGE_DONE, 并进行props.onAnimEnd回调
+const STAGE_CLOSING_ANIMATION = 5;
+
+let rStageMachine = shallowRef(STAGE_DONE);
+
+//动画
+const cStyleShell = getKeyFramesGroup();
+//动画字符串
+let vAniStr = shallowRef(null);
+
+const { 
+  vRelease, 
+  vContract, 
+  vShader,
+  vTransformDirection, //位移动画中心点方向
+  KeyFrameReleaseName,
+  KeyFrameContractName,
+} = buildGenieAnimation(props.position, props.width, props.height, props.direction);
+
+// Shader配置, 因为组件在动画时都是重新创建的, 所以不用做成响应式 
+const cShaderInfo = {
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: null,
+    },
+  ],
+  duration: props.time * 1000,
+};
+
+// 制作基础版shader
+const cLocalizationShader = vShader;
+
+//根据初始状态展示
+if (props.initShow) {
+  rSlotShowOnDone.value = true;
+} else {
+  rSlotShowOnDone.value = false;
+}
+
+const onAllAnimEnd = () => {
+  rStageMachine.value = STAGE_CLOSING_ANIMATION;
+
+  setTimeout(() => {
+    rStageMachine.value = STAGE_DONE;
+    if (!vUnmounted) {
+      if (props.onAnimEnd) {
+        props.onAnimEnd();
+      }
+    }
+  }, 1);
+}
+
+const onShaderViewNewRef = (widgetRef) => {
+  if (widgetRef != null) {
+    rStageMachine.value = STAGE_ANIMATING;
+
+    widgetRef.startAnim();
+  } else {
+    // 动画结束后的组件消失回调, 不需要做任何事情
+  }
+}
+
+cStyleShell.insertRule(vContract);
+cStyleShell.insertRule(vRelease);
+
+function doAnim() {
+  rStageMachine.value = STAGE_STARTING_ANIMATION;
+
+  if (rSlotShowOnDone.value) {
+    vAniStr = KeyFrameReleaseName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "(iDuration - iTime) / iDuration");
+  } else {
+    vAniStr = KeyFrameContractName;
+    cShaderInfo.shader = cLocalizationShader.replace(/\$\{myTime\}/g, "iTime / iDuration");
+  }
+}
+
+let rSlotRootRef = shallowRef(null);
+
+let rDebugCaptureResult = shallowRef(null);
+
+const switcher = () => {
+  if (rStageMachine.value != STAGE_DONE) {
+    // 动画还没结束, 不能切换
+    // 结束后因为slot显示资源可能要重新加载, 所以也不适宜做switcher指令堆积处理
+    return;
+  }
+
+
+  rStageMachine.value = STAGE_CAPTURE;
+  JsvTextureStoreApi.capture2Texture(
+    rSlotRootRef.value,
+    (textureName, autoRecycle, w, h) => {
+      if (vUnmounted) {
+        return;
+      }
+
+      cShaderInfo.textures[0].resource = `jsvtexturestore://${textureName}`;
+      rDebugCaptureResult.value = `jsvtexturestore://${textureName}`;
+
+      if (autoRecycle) {
+        // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+      }
+
+      // 截图后反转状态
+      rSlotShowOnDone.value = !rSlotShowOnDone.value;
+
+      doAnim();
+    },
+    true // 自动回收, 不填也行，默认为true
+  );
+};
+
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  vUnmounted = true;
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+
+onBeforeUnmount(() => {
+  cStyleShell.removeRule(KeyFrameContractName);
+  cStyleShell.removeRule(KeyFrameReleaseName);
+});
+
+defineExpose({
+  /**
+   * 触发精灵动画切换
+   * 执行截屏并启动收缩/展开动画
+   */
+  switcher,
+});
+
+</script>
+<template>
+  <div
+    :style="{
+      left: props.left,
+      top: props.top,
+    }"
+  >
+    <div
+      v-if="rStageMachine == STAGE_ANIMATING || rStageMachine == STAGE_STARTING_ANIMATION"
+      :style="{
+        width: props.width,
+        height: props.height,
+        animation: `${vAniStr} ${props.time}s`,
+        transformOrigin: vTransformDirection,
+      }"
+      @animationend="onAllAnimEnd"
+    >
+      <jsv-frag-shader-view
+        :ref="onShaderViewNewRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+        :duration="cShaderInfo.duration"
+        :shaderStr="cShaderInfo.shader"
+        :autoplay="false"
+        :textures="cShaderInfo.textures"
+      >
+      </jsv-frag-shader-view>
+    </div>
+    <div
+      v-show="rStageMachine == STAGE_CAPTURE || rStageMachine == STAGE_DONE || rStageMachine == STAGE_CLOSING_ANIMATION"
+      :style="{
+        width: rSlotShowOnDone ? props.width : 1,
+        height: rSlotShowOnDone ? props.height : 1,
+        overflow: rSlotShowOnDone ? null : 'hidden',
+        // width: props.width,
+        // height: props.height,
+      }"
+    >
+      <div
+        ref="rSlotRootRef"
+        :style="{
+          width: props.width,
+          height: props.height,
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <!-- <div :style="{
+      width: 320,
+      height: 160,
+      backgroundImage: rDebugCaptureResult ? `url(${rDebugCaptureResult})` : '',
+    }"/> -->
+
+  </div>
+</template>