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

package/DemoForOperator/BookFlip/BookFlip/FlipPage.vue

@@ -1,179 +0,0 @@
-<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

@@ -1,310 +0,0 @@
-<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>

package/DemoForOperator/BookFlip/BookFlip/flip.glsl

@@ -1,135 +0,0 @@
-#define PI 3.14159265359
-#define RADIUS .05
-#define LIGHT_DIR vec3(5,3,1)
-#define SPECULAR_SHININESS 24.0
-#define SPECULAR_COLOR vec3(1.0,1.0,1.0)
-#define SPECULAR_POWER 10.0
-//书籍范围的百分比
-#define BOOK_BOUND vec4(0.00, 0.20, 1.00, 1.00)
-
-// 优化的快速反正弦函数
-float fastAsin(float x) {
-  // 使用更少的项来近似计算
-  // return x + (1.0 / 6.0) * x3 + (3.0 / 40.0) * x5 + (5.0 / 112.0) * x7;
-  return x + x*x*x*(1.0/6.0) + x*x*x*x*x*(3.0/40.0);
-}
-
-// 优化的矩形检测函数
-bool inRect(vec2 uv, vec4 rect) {
-    return all(greaterThanEqual(uv, rect.xy)) && all(lessThanEqual(uv, rect.zw));
-}
-
-vec3 fakeSpine(vec3 col, float t, float darken)
-{
-    return mix(col * darken, col, min(1.0, sqrt(abs(t) * 30.0)));
-}
-
-vec3 fakeNormal(float t, float center)
-{
-    t -= center;
-    float interp = (1.0 - abs(t * 2.0)) * PI + PI * 0.75;
-        
-    vec3 normal = vec3(abs(sin(interp)) ,0. , abs(cos(interp)));
-
-    return mix(normal, vec3(0.0, 0.0, 1.0), min(1.0, sqrt(abs(t) * 5.0)));
-}
-
-vec3 specular(vec3 viewDir, vec3 normal)
-{
-    vec3 lightDir = normalize(LIGHT_DIR);
-    float dist = length(lightDir);
-    vec3 halfV = normalize(lightDir + normalize(viewDir));
-
-    float NdotH = dot(normal, halfV);
-    float intensity = pow(max(NdotH, 0.0), SPECULAR_SHININESS);
-
-    return intensity * SPECULAR_COLOR * SPECULAR_POWER / dist; 
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 aspect = iResolution.xy / iResolution.y;
-  vec2 uv = fragCoord / iResolution.y;
-  // vec2 mouse = iMouse.xy / iResolution.y;
-  
-  vec4 bgColor = vec4(0.0, 0.0, 0.0, 0.0);
-  
-  vec4 viewBounds = vec4(0., 0., aspect);
-  vec4 bookBounds = vec4(BOOK_BOUND.xy * aspect, BOOK_BOUND.zw * aspect);
-  vec2 bookSize = bookBounds.zw - bookBounds.xy;
-  vec2 bookAspect = bookSize.xy / bookSize.y;
-  vec4 bookUvBounds = vec4(0.0, 0.0, bookAspect);
-  vec2 bookUv = (uv - bookBounds.xy) / bookSize.y;
-  // mouse = (mouse - bookBounds.xy) / bookSize.y;
-  
-  // 优化鼠标轨迹计算
-  float timeFact = 1. - iTime / iDuration;
-  vec2 mouse = vec2(timeFact, 1.2 * timeFact * (timeFact - 1.0) + 1.0) * bookAspect;
-  // 防止鼠标超出书本范围
-  mouse = clamp(mouse, vec2(0.0), bookAspect - vec2(1e-2));
-  
-  //bookAspect为bookUv的右上角
-  vec2 mouseDir = normalize(bookAspect - mouse);
-  vec2 origin = mouse - mouseDir * mouse.x / abs(mouseDir.x);
-  vec2 axisPos = (mouse + bookAspect) * 0.5; // 使用乘法代替除法
-  
-  float axisDist = length(axisPos - origin);
-
-  float proj = dot(bookUv - origin, mouseDir);
-  float dist = proj - axisDist;
-  vec2 linePoint = bookUv - dist * mouseDir;
-
-  float radius = clamp(2.0 * mouse.x * RADIUS, 0.0, RADIUS);
-  
-  // 提前计算常用值
-  bool inBookBounds = inRect(uv, bookBounds);
-  
-  if(dist > radius) {
-    if (inRect(uv, bookBounds)) {
-      fragColor = jsvTexture2D(iChannel1, bookUv / bookAspect);
-    } else {
-      fragColor = bgColor;
-    }
-  } else if(dist >= 0.0) {
-    //圆柱体部分
-    if (radius > 1e-5) {
-        float theta = fastAsin(dist / radius);
-        vec2 p1 = linePoint + mouseDir * theta * radius;
-        vec2 p2 = linePoint + mouseDir * (PI - theta) * radius;
-        
-        vec2 uv2 = p2 / bookAspect;
-        uv2.x = 1.0 - uv2.x;
-        
-        vec2 uv1 = p1 / bookAspect;
-        
-        bool inP2 = inRect(p2, bookUvBounds);
-        bool inP1 = inRect(p1, bookUvBounds);
-        
-        if(inP2) {
-            fragColor = jsvTexture2D(iChannel1, uv2);
-            fragColor.xyz += specular(vec3(0.0, 0.0, 1.0), fakeNormal(dist - radius * 0.5, 0.0)) * 0.2;
-        } else if(inP1) {
-            fragColor = jsvTexture2D(iChannel0, uv1);
-        } else {
-            fragColor = bgColor;
-        }
-    }    
-  } else {
-    vec2 p = linePoint + mouseDir * (abs(dist) + PI * radius);
-    bool inP = inRect(p, bookUvBounds);
-    
-    if (inP) {
-        vec2 uv = p / bookAspect;
-        uv.x = 1.0 - uv.x;
-        fragColor = jsvTexture2D(iChannel1, uv);
-    } else if (inRect(bookUv, bookUvBounds) ) {
-        vec2 uv2 = bookUv / bookAspect;
-        fragColor = jsvTexture2D(iChannel0, uv2);
-    } else {
-        fragColor = bgColor;
-    }
-  }
-  
-  if (inBookBounds) {
-    fragColor.xyz = fakeSpine(fragColor.xyz, dist - radius, 0.0);
-  }
-}