@shijiu/jsview-vue-samples 2.3.0 → 3.0.0-next-vue.0

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>

package/DemoForOperator/BookFlip/BookFlip/flip.glsl

@@ -0,0 +1,135 @@
+#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);
+  }
+}

package/DemoForOperator/BookFlip/BookPage.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :style="pageStyle">
+    <div class="page-number">{{ index }}</div>
+    <div
+      class="page-detail"
+      :style="{
+        left: 30,
+        top: 30,
+        width: pageStyle.width - 60,
+        height: pageStyle.height - 60,
+        textOverflow: 'ellipsis',
+        backgroundColor: 'rgba(0,0,128,0.5)',
+      }"
+    >
+      {{ TextList[index % 3] }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onUnmounted, onMounted } from "vue";
+
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+  flushTrigger: {
+    type: Function,
+    required: true,
+  },
+});
+
+const TextList = [
+  "以下是长句子:\n" +
+    "1.石室诗士施氏，嗜狮，誓食十狮。2.施氏时时适市视狮。3.十时，适十狮适市。4.是时，适施氏适市。5.施氏视是十狮，恃矢势，使是十狮逝世。6.氏拾是十狮尸，适石室。7.石室湿，氏使侍拭石室。8.石室拭，施氏始试食是十狮尸。9.食时，始识是十狮尸，实十石狮尸。10.试释是事。\n",
+  "以下是长句子:\n" + "君不见，黄河之水天上来，奔流到海不复回。\n",
+  "以下是长句子:\n" +
+    'ABC انجليزي "abc" سعر الملابس 180  ABC انجليزي "abc" سعر الملابس 180 \n',
+];
+
+console.log("页面构建(测试BookFlip用key来保持prevPage)" + props.index);
+
+const pageStyle = computed(() => {
+  const randomColor = `#${Math.floor(Math.random() * 16777215)
+    .toString(16)
+    .padStart(6, "0")}`;
+  return {
+    width: `${props.width}`,
+    height: `${props.height}`,
+    backgroundColor: randomColor,
+  };
+});
+
+onMounted(() => {
+  console.log("页面挂载(测试BookFlip用key来保持prevPage)" + props.index);
+  props.flushTrigger(props.index); // 若有图片，要用jsvPreload进行图片预加载，并在预加载完成后调用flushTrigger
+});
+
+onUnmounted(() => {
+  console.log("页面销毁(测试BookFlip用key来保持prevPage)" + props.index);
+});
+</script>
+
+<style scoped>
+.page-number {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 1);
+}
+.page-detail {
+  font-size: 30px;
+  color: rgb(207, 52, 168);
+}
+</style>

package/DemoForOperator/Bounce/Bounce.vue

@@ -22,10 +22,32 @@ import { shallowRef } from "vue";
 import { buildBounce } from "./FreeMoveBuilder";
 
 const props = defineProps({
+  /**
+   * 图片资源路径
+   * @type {String}
+   * @required
+   * @example
+   * // 正确用法
+   * src: "/images/ball.png"
+   */
   src: {
     type: String,
     required: true,
   },
+
+  /**
+   * 布局配置对象
+   * @type {Object}
+   * @required
+   * @typedef {Object} LayoutConfig
+   * @property {number} top - 组件顶部位置（单位：px）
+   * @property {number} left - 组件左侧位置（单位：px）
+   * @property {number} width - 组件宽度（单位：px）
+   * @property {number} height - 组件高度（单位：px）
+   * @example
+   * // 正确配置示例
+   * { top: 100, left: 200, width: 50, height: 50 }
+   */
   layout: {
     type: Object,
     required: true,
@@ -35,14 +57,24 @@ const props = defineProps({
 let actorRef = shallowRef(null);
 let vLeftSnakeControl = null;
 
+/**
+ * 启动弹跳动画
+ * @param {number} left - 目标位置X坐标（单位：px）
+ * @param {number} top - 目标位置Y坐标（单位：px）
+ * @param {number} bounceTimes - 弹跳次数（建议1-5次）
+ * @description 调用此方法后组件会从当前位置向目标位置执行弹跳动画
+ * @example
+ * // 在(200,300)位置弹跳3次
+ * start(200, 300, 3)
+ */
 function startSnakeAnim(left, top, bounceTimes) {
-  // showSnake.value = true;
   vLeftSnakeControl = actorRef.value.control;
   vLeftSnakeControl.run((cmds) => [
     ...buildBounce(cmds, 1, left, top, bounceTimes, 2.0, (state) => {}),
   ]);
 }
 
+// 暴露给父组件的方法
 defineExpose({
   start: startSnakeAnim,
 });

package/DemoForOperator/Bounce/FreeMoveBuilder.js

@@ -119,7 +119,7 @@ export function buildBounce(
         cmds.state().removeConditionByGroup(condGroupId),
 
         // wallPosition用于规避运动路程计算超出(times越大超出越多)时，解决动画结尾的回弹问题
-        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0, undefined).then([
+        cmds.condition(condGroupId, true, sWallConditionName).wallPosition(wallname, 0).then([
             cmds.action().teleportTo(0, undefined),
             cmds.action().setSpdAndAccel(0, undefined, undefined, undefined),
         ]),

package/DemoForOperator/ChunLian/Couplets.vue

@@ -103,7 +103,17 @@ import {
   buildPreloadInfo,
 } from "jsview";
 import { shallowRef, onBeforeUnmount, watch } from "vue";
+
 const props = defineProps({
+  /**
+   * 春联图片资源配置对象
+   * @type {Object}
+   * @property {string} leftContent - 左侧春联图片URL
+   * @property {string} rightContent - 右侧春联图片URL
+   * @property {string} scrollSprite - 滚轴精灵图URL
+   * @property {string} scrollStatic - 静态滚轴图片URL
+   * @required
+   */
   sourceMap: {
     type: Object,
     require: true,
@@ -116,6 +126,14 @@ const props = defineProps({
       );
     },
   },
+
+  /**
+   * 春联尺寸配置
+   * @type {Object}
+   * @property {number} width - 春联宽度
+   * @property {number} height - 春联高度
+   * @required
+   */
   size: {
     type: Object,
     required: true,
@@ -123,6 +141,14 @@ const props = defineProps({
       return "width" in value && "height" in value;
     },
   },
+
+  /**
+   * 左侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 左侧春联的水平位置
+   * @property {number} top - 左侧春联的垂直位置
+   * @required
+   */
   leftPosition: {
     type: Object,
     require: true,
@@ -130,6 +156,14 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
+
+  /**
+   * 右侧春联位置配置
+   * @type {Object}
+   * @property {number} left - 右侧春联的水平位置
+   * @property {number} top - 右侧春联的垂直位置
+   * @required
+   */
   rightPosition: {
     type: Object,
     require: true,
@@ -137,7 +171,16 @@ const props = defineProps({
       return "left" in value && "top" in value;
     },
   },
-  duration: { type: Number, require: true },
+
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @required
+   */
+  duration: { 
+    type: Number, 
+    require: true 
+  }
 });
 const layouts = [{ ...props.leftPosition, isLeft: true }, props.rightPosition];
 let myShow = shallowRef(false);