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

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>

package/DemoForOperator/BookFlip/BookFlip/FlippingBook.vue

@@ -0,0 +1,310 @@
+<script>
+import { JsvTextureStoreApi } from "jsview";
+
+const FLIP_STATUS_IDLE = 0;
+const FLIP_STATUS_WAIT_DIV_READY = 1;
+const FLIP_STATUS_TAKING = 2;
+const FLIP_STATUS_READY = 3;
+
+function takeTexture(pageDivRef, pageIndex) {
+  // 抓取界面
+  let holder = {
+    promiseRef: null,
+    textureRef: null,
+  };
+
+  holder.promiseRef = new Promise((resolve, reject) => {
+    holder.textureRef = JsvTextureStoreApi.capture2Texture(
+      pageDivRef,
+      (textureAccessName) => {
+        if (textureAccessName != "") {
+          resolve(textureAccessName);
+        } else {
+          reject();
+        }
+      }
+    );
+  });
+  return holder;
+}
+</script>
+
+<script setup>
+import { computed, shallowRef, onUnmounted, onMounted, reactive } from "vue";
+import pageFlipShader from "./flip.glsl?raw";
+import { JsvFragShaderView } from "jsview";
+
+// 定义组件的 props
+const props = defineProps({
+  // 页面总数
+  pageCount: {
+    type: Number,
+    default: 2,
+  },
+
+  // 初始化时显示的页面索引
+  initPageIndex: {
+    type: Number,
+    default: 0,
+  },
+
+  // 组件的坐标 x,y
+  position: {
+    type: Object,
+    default: () => ({
+      x: 0,
+      y: 0,
+    }),
+    validator: (value) => {
+      return !isNaN(value.x) && !isNaN(value.y);
+    },
+  },
+
+  // page的width,height
+  pageSize: {
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return !isNaN(value.width) && !isNaN(value.height);
+    },
+  },
+
+  // 动画持续时间
+  duration: {
+    type: Number,
+    default: 600,
+  },
+});
+
+const cFlipArea = {
+  width: Math.ceil(props.pageSize.width / 1.0),
+  height: Math.ceil(props.pageSize.height / 0.8),
+  x: 0,
+  y: 0,
+};
+// cFlipArea.x = Math.ceil((props.pageSize.width - cFlipArea.width) / 2); // 翻页区域对齐原div区域
+// cFlipArea.y = Math.ceil((props.pageSize.height - cFlipArea.height) / 2); // 翻页区域对齐原div区域
+
+// 创建rPageList数据，内容为shallowRef(null)
+const rPageList = Array(props.pageCount)
+  .fill()
+  .map((_, idx) => ({
+    index: idx,
+    divRef: null,
+    pageReady: false,
+  }));
+
+const rPageLives = reactive([props.initPageIndex, -1]);
+
+const rCurrentPageIndex = shallowRef(props.initPageIndex);
+
+const rPrevPageIndex = shallowRef(-1);
+
+// fragShaderView的Texture管理
+const rTextureStatus = shallowRef(FLIP_STATUS_IDLE);
+const rTextureNames = [shallowRef(null), shallowRef(null)];
+let vTextureHolder = {
+  holder0: null,
+  holder1: null,
+  token: 0,
+};
+let vTexturePromiseAll = null;
+
+const rPageFlipSettings = computed(() => {
+  return {
+    name: "pageFlip",
+    shader: pageFlipShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: "jsvtexturestore://" + rTextureNames[1].value,
+      },
+      {
+        name: "iChannel1",
+        resource: "jsvtexturestore://" + rTextureNames[0].value,
+      },
+    ],
+    duration: props.duration,
+    onEnd: (end_or_cancel) => {
+      // 结束动画, 以触发prev页面的销毁
+      if (rTextureStatus.value == FLIP_STATUS_READY) {
+        // 非开新界面时，结束动画后，恢复到空闲状态
+        rTextureStatus.value = FLIP_STATUS_IDLE;
+      }
+    },
+  };
+});
+
+// 新进界面触发flush处理，第一个flush传来后才启动动画
+const fncTriggerFlush = (pageIndex) => {
+  rPageList[pageIndex].pageReady = true;
+
+  // prev和current的page都ready了就启动翻页动画
+  if (
+    rTextureStatus.value == FLIP_STATUS_WAIT_DIV_READY &&
+    rPageList[rPrevPageIndex.value].pageReady &&
+    rPageList[rCurrentPageIndex.value].pageReady
+  ) {
+    // 抓取界面
+
+    // 取消上一次的抓取
+    vTextureHolder.holder0?.textureRef.cancel();
+    vTextureHolder.holder1?.textureRef.cancel();
+
+    // 抓取当前界面
+    rTextureStatus.value = FLIP_STATUS_TAKING;
+
+    vTextureHolder = {
+      holder0: takeTexture(
+        rPageList[rPageLives[0]].divRef,
+        rPageList[rPageLives[0]].index
+      ),
+      holder1: takeTexture(
+        rPageList[rPageLives[1]].divRef,
+        rPageList[rPageLives[1]].index
+      ),
+    };
+
+    let holders = vTextureHolder;
+
+    // TODO: promise.all的引用和unmount时释放, 可能可以规避组件退出时内存泄露问题
+    vTexturePromiseAll = Promise.all([
+      holders.holder0.promiseRef,
+      holders.holder1.promiseRef,
+    ])
+      .then(([page_0_texture, page_1_texture]) => {
+        if (rCurrentPageIndex.value > rPrevPageIndex.value) {
+          rTextureNames[0].value = page_0_texture;
+          rTextureNames[1].value = page_1_texture;
+        } else {
+          rTextureNames[0].value = page_1_texture;
+          rTextureNames[1].value = page_0_texture;
+        }
+        rTextureStatus.value = FLIP_STATUS_READY;
+      })
+      .finally(() => {
+        // resolve或者reject时，释放holder引用
+        holders.holder0 = null;
+        holders.holder1 = null;
+      });
+  }
+};
+
+// 暴露组件方法给父组件
+defineExpose({
+  /**
+   * 设置当前页码
+   * @param {number} pageIndex - 要设置的页码索引
+   */
+  setCurrentPage: (pageIndex) => {
+    if (pageIndex < 0 || pageIndex >= props.pageCount) {
+      console.error(`页码超出范围: ${pageIndex}, 总页数: ${props.pageCount}`);
+      return;
+    }
+
+    if (pageIndex == rCurrentPageIndex.value) {
+      // 如果当前页码和要设置的页码相同，则不进行操作
+      return;
+    }
+
+    // 更新页码索引
+    // 保存旧的当前页码
+    const oldCurrentIndex = rCurrentPageIndex.value;
+
+    if (
+      rTextureStatus.value != FLIP_STATUS_IDLE &&
+      pageIndex == rPrevPageIndex.value &&
+      rPageList[pageIndex].pageReady
+    ) {
+      // 在动画过程中，翻页反向，此时由于页面不重新mount，不会触发fncTriggerFlush
+      // 需要手动触发fncTriggerFlush
+      Promise.resolve().then(() => {
+        fncTriggerFlush(pageIndex);
+      });
+    }
+
+    // 设置当前页码
+    rCurrentPageIndex.value = pageIndex;
+    rPrevPageIndex.value = oldCurrentIndex;
+
+    // 界面进入动画状态
+    rTextureStatus.value = FLIP_STATUS_WAIT_DIV_READY;
+
+    // 设置新页面为未准备就绪
+    rPageList[pageIndex].pageReady = false;
+
+    rPageLives[0] = pageIndex;
+    rPageLives[1] = oldCurrentIndex; // 老页面遮挡在上面
+  },
+});
+
+onMounted(() => {});
+
+onUnmounted(() => {
+  // 取消截屏处理，并释放promise引用
+  vTextureHolder.holder0?.textureRef.cancel();
+  vTextureHolder.holder1?.textureRef.cancel();
+  vTextureHolder.holder0 = null;
+  vTextureHolder.holder1 = null;
+
+  // 释放PromiseAll引用
+  vTexturePromiseAll = null;
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      left: props.position.x,
+      top: props.position.y,
+    }"
+  >
+    <!-- 通过key锁定, 当 currentPageIndex 变化时，已存在页面不会重新创建 -->
+    <div
+      v-show="rTextureStatus != FLIP_STATUS_READY"
+      v-for="pageIndex in rPageLives"
+      :key="pageIndex"
+    >
+      <div
+        v-if="
+          pageIndex == rCurrentPageIndex || rTextureStatus != FLIP_STATUS_IDLE
+        "
+        :ref="(el) => (rPageList[pageIndex].divRef = el)"
+        :style="{
+          width: props.pageSize.width,
+          height: props.pageSize.height,
+        }"
+      >
+        <slot :pageIndex="pageIndex" :triggerFlush="fncTriggerFlush"></slot>
+      </div>
+      <!-- <div
+        :style="{
+          width: 300,
+          height: 100,
+          fontSize: 20,
+          color: 'rgba(255,255,255,1)',
+          lineHeight: 100,
+        }"
+      >
+        当前界面: {{ "" + pageIndex + "  " + rCurrentPageIndex }}
+      </div> -->
+    </div>
+
+    <jsv-frag-shader-view
+      v-if="rTextureStatus == FLIP_STATUS_READY"
+      :style="{
+        left: cFlipArea.x,
+        top: cFlipArea.y,
+        width: cFlipArea.width,
+        height: cFlipArea.height,
+      }"
+      :duration="rPageFlipSettings.duration"
+      :shaderStr="rPageFlipSettings.shader"
+      :autoplay="true"
+      :reverseAnimate="rCurrentPageIndex < rPrevPageIndex"
+      :textures="rPageFlipSettings.textures"
+      :onEnd="rPageFlipSettings.onEnd"
+    ></jsv-frag-shader-view>
+  </div>
+</template>