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

package/DemoForOperator/Blur/BlurInOut/BlurInOut.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import Blur, { captureBlurTexture } from "../Blur.vue";
+import StaticBgSlide from "./StaticBgSlide.vue";
+
+const vToCapture = shallowRef(null);
+const vTextureInfo = shallowRef(null);
+
+let isBlur = false;
+function enableBlur() {
+  if (isBlur) {
+    return;
+  }
+  isBlur = true;
+  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
+    vTextureInfo.value = textureInfo;
+    setTimeout(() => {
+      curPosition.left = 0;
+      bgAnim.value?.slide(curPosition);
+    }, 0);
+  });
+}
+
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+
+let curPosition = {
+  left: 0,
+  top: 0,
+};
+let width1 = 300;
+let height1 = 720;
+const bgAnim = shallowRef(null);
+const onKeyDown = (ev) => {
+  console.log("ccht", ev.keyCode);
+  switch (ev.keyCode) {
+    case 37:
+      if (isBlur) {
+        curPosition.left = -width1;
+        bgAnim.value?.slide(curPosition);
+      }
+
+      break;
+    case 39:
+      if (isBlur) {
+        curPosition.left = 0;
+        bgAnim.value?.slide(curPosition);
+      } else {
+        enableBlur();
+      }
+      break;
+    // case 38:
+    //   curPosition.top = curPosition.top - 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 40:
+    //   curPosition.top = curPosition.top + 100;
+    //   bgAnim.value?.slide(curPosition);
+    //   break;
+    // case 13:
+    //   enableBlur();
+    //   break;
+    default:
+      break;
+  }
+};
+
+onMounted(() => {
+  // enableBlur();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      ref="vToCapture"
+      :style="{
+        width: 1280, // 截屏区域的宽
+        height: 720, // 截屏区域的高
+      }"
+    >
+      <div
+        :style="{
+          width: 1280,
+          height: 720,
+          backgroundImage: `url(${ImagePanda})`,
+        }"
+      />
+      <div
+        :style="{
+          top: 300,
+          width: 1280,
+          // height: 81,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: '#ffffff',
+          // fontSize: 68,
+          textAlign: 'center',
+          // lineHeight: 81,
+
+          height: 38,
+          lineHeight: 38,
+          fontSize: 36,
+          fontWeight: 'bold',
+        }"
+      >
+        左右键展开/隐藏面板
+      </div>
+    </div>
+
+    <div v-if="vTextureInfo">
+      <StaticBgSlide
+        key="bg"
+        ref="bgAnim"
+        :imgUrl="`jsvtexturestore://${vTextureInfo.textureId}`"
+        :width="width1"
+        :height="height1"
+        :bgWidth="1280"
+        :bgHeight="720"
+        :borderRadius="'0 30 30 0'"
+        :initPosition="{
+          left: -width1,
+          top: 0,
+        }"
+      >
+        <div
+          :style="{
+            width: width1,
+            height: height1,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderRadius: '0 30 30 0',
+            lineHeight: height1,
+            textAlign: 'center',
+            color: '#ffffff',
+            fontSize: 40,
+          }"
+        >
+          弹窗内容
+        </div>
+      </StaticBgSlide>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/DemoForOperator/Blur/BlurInOut/StaticBgSlide.vue

@@ -0,0 +1,162 @@
+<template>
+  <jsv-preload
+    v-if="needPreload"
+    key="preload"
+    :preloadList="[preloadInfo]"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <div
+    :style="{
+      width: props.width,
+      height: props.height,
+      left: curPosition.left,
+      top: curPosition.top,
+      transition: `left ${props.duration}ms, top ${props.duration}ms`,
+    }"
+  >
+    <jsv-texture-anim
+      v-if="isPreloadDone"
+      ref="pandaAnim"
+      :src="props.imgUrl"
+      :width="props.width"
+      :height="props.height"
+      :animation="appliedAnim"
+      :duration="props.duration"
+      :transform="appliedTrans"
+      :borderRadius="props.borderRadius"
+      :autoStart="false"
+      :onAnimationEnd="onAnimEnd"
+    ></jsv-texture-anim>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, shallowRef, computed, reactive } from "vue";
+import { JsvPreload, buildPreloadInfo } from "jsview";
+import { JsvTextureAnim } from "jsview";
+
+const props = defineProps({
+  imgUrl: {
+    type: String,
+    required: true,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  bgWidth: {
+    type: Number,
+    required: true,
+  },
+  bgHeight: {
+    type: Number,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 200,
+  },
+  easing: {
+    type: String,
+    default: "linear",
+  },
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  initPosition: {
+    type: Object,
+    default: () => ({
+      left: 0,
+      top: 0,
+    }),
+  },
+});
+
+const needPreload = ref(false);
+const isPreloadDone = ref(false);
+let preloadInfo = [];
+if (props.imgUrl.includes("jsvtexturestore://")) {
+  needPreload.value = false;
+  isPreloadDone.value = true;
+} else {
+  needPreload.value = true;
+  isPreloadDone.value = false;
+  preloadInfo = buildPreloadInfo(props.imgUrl);
+}
+
+const pandaAnim = shallowRef(null);
+//view相对于bg的偏移量
+const curPosition = reactive(props.initPosition);
+
+const baseScale = computed(
+  () =>
+    `scale3d(${props.bgWidth / props.width}, ${
+      props.bgHeight / props.height
+    }, 1)`
+);
+
+const scaleOffset = {
+  left: (props.width - props.bgWidth) / 2,
+  top: (props.height - props.bgHeight) / 2,
+};
+
+const getTargetTransform = (target) => {
+  return `translate3d(${
+    ((-target.left - scaleOffset.left) / props.width) * 100
+  }%, ${((-target.top - scaleOffset.top) / props.height) * 100}%, 0) ${
+    baseScale.value
+  }`;
+};
+
+const appliedTrans = ref(getTargetTransform(curPosition));
+const appliedAnim = ref(null);
+
+//TODO JsvPreload 的回调会执行多次，所以需要一个标志来判断是否已经执行过
+let loadDone = false;
+
+const handlePreloadDone = (resultMap) => {
+  if (loadDone) return;
+  loadDone = true;
+  appliedTrans.value = getTargetTransform(curPosition);
+  isPreloadDone.value = true;
+};
+
+let onAnimEnd = (normalEnd) => {
+  if (normalEnd) {
+    appliedTrans.value = getTargetTransform(curPosition);
+  }
+  appliedAnim.value = null;
+};
+
+function slide(to) {
+  const prePosition = {
+    left: curPosition.left,
+    top: curPosition.top,
+  };
+  curPosition.left = to.left ?? prePosition.left;
+  curPosition.top = to.top ?? prePosition.top;
+
+  if (
+    prePosition.left === curPosition.left &&
+    prePosition.top === curPosition.top
+  ) {
+    return;
+  }
+
+  appliedTrans.value = null;
+  appliedAnim.value = `{from {transform: ${getTargetTransform(
+    prePosition
+  )};} to {transform: ${getTargetTransform(curPosition)};}}`;
+  pandaAnim.value.start(appliedAnim.value);
+}
+
+defineExpose({
+  slide,
+});
+</script>

package/DemoForOperator/Blur/BlurPopup/BlurPopup.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { shallowRef } from "vue";
+import Blur, { captureBlurTexture } from "../Blur.vue";
+
+const vToCapture = shallowRef(null);
+const vTextureInfo = shallowRef(null);
+
+function enableBlur() {
+  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
+    vTextureInfo.value = textureInfo;
+  });
+}
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 13) {
+    enableBlur();
+    return true;
+  }
+};
+
+const popupViewLayout = {
+  left: (1280 - 400) / 2,
+  top: 100,
+  width: 400,
+  height: 400,
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <div
+      ref="vToCapture"
+      :style="{
+        width: 1280, // 截屏区域的宽
+        height: 720, // 截屏区域的高
+      }"
+    >
+      <div
+        :style="{
+          width: 1280,
+          height: 720,
+          backgroundImage: `url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg)`,
+        }"
+      />
+      <div
+        :style="{
+          top: 300,
+          width: 1280,
+          height: 100,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: '#ffffff',
+          fontSize: 40,
+          textAlign: 'center',
+        }"
+      >
+        按OK键弹出带模糊背景的框
+      </div>
+    </div>
+
+    <div
+      v-if="vTextureInfo"
+      :style="{
+        left: popupViewLayout.left,
+        top: popupViewLayout.top,
+      }"
+    >
+      <blur
+        :textureInfo="vTextureInfo"
+        :layout="{
+          left: 0,
+          top: 0,
+          width: popupViewLayout.width,
+          height: popupViewLayout.height,
+        }"
+        :showRectPos="{
+          left: popupViewLayout.left,
+          top: popupViewLayout.top,
+        }"
+        :borderRadius="30"
+      />
+      <div
+        :style="{
+          width: popupViewLayout.width,
+          height: popupViewLayout.height,
+          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+          borderRadius: 30,
+          lineHeight: popupViewLayout.height,
+          textAlign: 'center',
+          color: '#ffffff',
+          fontSize: 40,
+        }"
+      >
+        弹窗内容
+      </div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style>
+@keyframes rotate {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/DemoForOperator/BookFlip/App.vue

@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <FlippingBook
+      :page-count="totalPages"
+      :position="position"
+      :page-size="pageSize"
+      ref="bookFlipRef"
+    >
+      <template #default="{ pageIndex, triggerFlush }">
+        <BookPage
+          :width="pageSize.width"
+          :height="pageSize.height"
+          :index="pageIndex"
+          :flushTrigger="triggerFlush"
+        />
+      </template>
+    </FlippingBook>
+
+    <div :style="{ top: 650 }">
+      <JsvFocusBlock :autoFocus="true" :onKeyDown="handleKeyDown">
+        <div
+          class="page-info"
+          :style="{
+            top: -40,
+            left: 400,
+            height: 50,
+            width: 480,
+            lineHeight: 50,
+            textAlign: 'center',
+            color: '#FFFFFF',
+          }"
+        >
+          左右键进行翻页
+        </div>
+        <div
+          class="page-info"
+          :style="{
+            left: 400,
+            height: 50,
+            width: 480,
+            lineHeight: 50,
+            textAlign: 'center',
+            color: '#FF0000',
+          }"
+        >
+          当前页: {{ currentPage + 1 }} / {{ totalPages }}
+        </div>
+      </JsvFocusBlock>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import FlippingBook from "./BookFlip/FlippingBook.vue";
+import BookPage from "./BookPage.vue";
+import { JsvFocusBlock } from "jsview";
+
+// 配置参数
+const totalPages = 8;
+const pageSize = {
+  width: 980,
+  height: 500,
+};
+const position = {
+  x: 150,
+  y: 100,
+};
+
+// 组件引用和状态
+const bookFlipRef = ref(null);
+const currentPage = ref(0);
+
+// 翻页方法
+const nextPage = () => {
+  if (currentPage.value < totalPages - 1) {
+    currentPage.value++;
+    bookFlipRef.value.setCurrentPage(currentPage.value);
+  }
+};
+
+const prevPage = () => {
+  if (currentPage.value > 0) {
+    currentPage.value--;
+    bookFlipRef.value.setCurrentPage(currentPage.value);
+  }
+};
+
+// 按键处理
+const handleKeyDown = (event) => {
+  switch (event.keyCode) {
+    case 37: // 左键的keyCode
+      prevPage();
+      return true;
+    case 39: // 右键的keyCode
+      nextPage();
+      return true;
+    default:
+      return false;
+  }
+};
+</script>
+
+<style scoped>
+.control-btn {
+  font-size: 30;
+  background-color: rgba(76, 175, 80, 1);
+  color: rgba(128, 255, 255, 1);
+  border-radius: 4;
+}
+
+.page-info {
+  font-size: 30;
+}
+</style>

package/DemoForOperator/BookFlip/BookFlip/FlipPage.vue

@@ -0,0 +1,179 @@
+<script setup>
+import { ref, computed } from "vue";
+import { JsvFragShaderView, JsvPreload, buildPreloadInfo } from "jsview";
+import pageFlipShader from "./flip.glsl?raw";
+
+// 定义组件的 props
+const props = defineProps({
+  // 第一张图片资源
+  imageFrom: {
+    type: String,
+    required: true,
+  },
+  // 第二张图片资源
+  imageTo: {
+    type: String,
+    required: true,
+  },
+  // 初始页
+  initPage: {
+    type: String,
+    default: "from",
+  },
+  // 动画持续时间
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  // 宽度
+  width: {
+    type: Number,
+    default: 1280,
+  },
+  // 高度
+  height: {
+    type: Number,
+    default: 720,
+  },
+  // 书本范围, 单位为组件的百分比
+  bookRect: {
+    type: Object,
+    default: () => ({
+      left: 0.15,
+      top: 0.05,
+      right: 0.85,
+      bottom: 0.95,
+    }),
+    validator: (value) => {
+      return (
+        value.left >= 0 &&
+        value.top >= 0 &&
+        value.right <= 1 &&
+        value.bottom <= 1
+      );
+    },
+  },
+});
+
+// 定义事件
+const emit = defineEmits(["animEnd"]);
+
+const curPage = ref(props.initPage == "to" ? 1 : 0); // 0: from, 1: to
+const rShowImg = ref(true);
+let duringAnim = false;
+const rImgUrl = computed(() => {
+  return curPage.value == 0 ? props.imageFrom : props.imageTo;
+});
+
+const rImgLayout = computed(() => {
+  const cBookRect = props.bookRect;
+  return {
+    left: cBookRect.left * props.width,
+    top: cBookRect.top * props.height,
+    width: (cBookRect.right - cBookRect.left) * props.width,
+    height: (cBookRect.bottom - cBookRect.top) * props.height,
+  };
+});
+
+// 修改着色器代码，替换书籍范围常量
+const rModifiedShader = computed(() => {
+  // 替换着色器中的 BOOK_BOUND 定义
+  return pageFlipShader.replace(
+    "#define BOOK_BOUND vec4(0.15, 0.05, 0.85, 0.95)",
+    `#define BOOK_BOUND vec4(${props.bookRect.left.toFixed(6)}, ${
+      1 - props.bookRect.bottom.toFixed(6)
+    }, ${props.bookRect.right.toFixed(6)}, ${
+      1 - props.bookRect.top.toFixed(6)
+    })`
+  );
+});
+
+const rPageFlipSettings = computed(() => {
+  return {
+    name: "pageFlip",
+    shader: rModifiedShader.value,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: props.imageFrom,
+      },
+      {
+        name: "iChannel1",
+        resource: props.imageTo,
+      },
+    ],
+    duration: props.duration,
+    onEnd: (id, cStatus) => {
+      emit("animEnd", cStatus);
+
+      curPage.value = curPage.value == 0 ? 1 : 0;
+      rShowImg.value = true;
+      duringAnim = false;
+    },
+  };
+});
+
+const rWidgetRef = ref();
+const rIsPreloadDone = ref(false);
+let vPendingAnim = false;
+
+const rPreloadList = computed(() => {
+  return [buildPreloadInfo(props.imageFrom), buildPreloadInfo(props.imageTo)];
+});
+
+const handlePreloadDone = () => {
+  console.log("图片预加载完成");
+  rIsPreloadDone.value = true;
+  if (vPendingAnim) {
+    _startAnim();
+    vPendingAnim = false;
+  }
+};
+
+// 内部实际执行动画的方法
+const _startAnim = (reverse = false) => {
+  console.log("开始翻页动画", reverse);
+  duringAnim = true;
+  rShowImg.value = false;
+  rWidgetRef.value?.startAnim(undefined, undefined, reverse);
+};
+
+// 暴露组件方法给父组件
+defineExpose({
+  /**
+   * 翻页
+   */
+  flip: () => {
+    if (duringAnim) {
+      return;
+    }
+    if (rIsPreloadDone.value) {
+      _startAnim(curPage.value == 1);
+    } else {
+      vPendingAnim = true;
+    }
+  },
+  getCurPage: () => {
+    return curPage == 0 ? "from" : "to";
+  },
+});
+</script>
+
+<template>
+  <jsv-preload
+    :preloadList="rPreloadList"
+    :onPreloadDone="handlePreloadDone"
+  ></jsv-preload>
+  <jsv-frag-shader-view
+    ref="rWidgetRef"
+    :style="{ left: 0, top: 0, width: width, height: height }"
+    :duration="rPageFlipSettings.duration"
+    :shaderStr="rPageFlipSettings.shader"
+    :autoplay="false"
+    :textures="rPageFlipSettings.textures"
+    :onEnd="rPageFlipSettings.onEnd"
+    :hideAfterEnd="false"
+  ></jsv-frag-shader-view>
+  <img v-if="rShowImg" :src="rImgUrl" :style="rImgLayout" />
+</template>