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

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, String],
+    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,249 @@
+<script setup>
+import { shallowRef, onBeforeUnmount } from "vue";
+import Blur, { captureBlurTexture } from "../Blur.vue";
+
+const rToCapture = shallowRef(null);
+const rTextureInfo = shallowRef(null);
+const rTriggerLoadKey = shallowRef(0);
+const rBlurTextureKeeps = shallowRef(null);
+
+var vEnableBlur = false;
+
+// 要确认图片完成显示时在进行捕获并处理成模糊纹理
+function handleLoadDone() {
+  if (vEnableBlur) {
+    console.log("start captureBlurTexture");
+
+    // 捕获模糊纹理, 此纹理可以多个blur组件共享, 共享时最好用1x1的div把持, 避免自动释放
+    captureBlurTexture(rToCapture.value, 12/* blurRadius */).then((textureInfo) => {
+      rTextureInfo.value = textureInfo;
+
+      // 用1x1的div把持模糊纹理, 避免自动释放, 适合多区域模糊内容共享的场景
+      rBlurTextureKeeps.value = `jsvtexturestore://${textureInfo.textureId}`;
+
+      console.log("done captureBlurTexture");
+    });
+  }
+}
+
+function enableBlur() {
+  // 触发图片加载，然后捕获模糊纹理
+  rTriggerLoadKey.value++;
+  vEnableBlur = true;
+}
+
+const MOVE_STEP = 30;
+
+function movePopups(dx, dy) {
+  rPopupLeft.value += dx;
+  rPopupTop.value += dy;
+  rPopup2Left.value += dx;
+  rPopup2Top.value += dy;
+  return true;
+}
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 13) {
+    enableBlur();
+    return true;
+  }
+  switch (ev.keyCode) {
+    case 37: // 左
+      return movePopups(-MOVE_STEP, 0);
+    case 38: // 上
+      return movePopups(0, -MOVE_STEP);
+    case 39: // 右
+      return movePopups(MOVE_STEP, 0);
+    case 40: // 下
+      return movePopups(0, MOVE_STEP);
+    default:
+      break;
+  }
+};
+
+const cVisibleCallback = (info) => {
+  console.log("onVisibilityChange", info);
+  if (info.status == "show") {
+    rTriggerLoadKey.value++; // 刷新img标签, 触发onload后的重新捕获模糊纹理
+  }
+};
+
+// 为了应对 window.JsvCoreApi.delayRemoveGLView/ window.JsvCoreApi.restoreGLView 对应的GL重建处理后, 
+// 需要重新捕获模糊纹理的场景
+window.JsvCoreApi.onVisibilityChange(cVisibleCallback);
+
+const POPUP_WIDTH = 400;
+const POPUP_HEIGHT = 400;
+const POPUP_MARGIN = 200;
+const POPUP_TOP = (720 - POPUP_HEIGHT) / 2;
+
+const popupViewLayout = {
+  width: POPUP_WIDTH,
+  height: POPUP_HEIGHT,
+};
+
+const popupViewLayout2 = {
+  width: POPUP_WIDTH,
+  height: POPUP_HEIGHT,
+};
+
+const rPopupLeft = shallowRef(POPUP_MARGIN);
+const rPopupTop = shallowRef(POPUP_TOP);
+const rPopup2Left = shallowRef(1280 - POPUP_WIDTH - POPUP_MARGIN);
+const rPopup2Top = shallowRef(POPUP_TOP);
+
+onBeforeUnmount(() => {
+  // 取消注册一定不要漏
+  window.JsvCoreApi.removeEventCallback(cVisibleCallback);
+});
+
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+
+    <!-- 设置屏幕内1x1的div, 用来让captureBlurTexture有div把持, 避免自动释放, 适合多区域模糊内容共享的场景 -->
+    <div :style="{
+      width: 1,
+      height: 1,
+      backgroundImage: `url(${rBlurTextureKeeps})`,
+    }"/>
+
+    <div
+      ref="rToCapture"
+      :style="{
+        width: 1280, // 截屏区域的宽
+        height: 720, // 截屏区域的高
+      }"
+    >
+      <img
+        :key="rTriggerLoadKey"
+        src="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg"
+        :style="{
+          width: 1280,
+          height: 720,
+        }"
+        :onLoad="handleLoadDone"
+      />
+      <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="rTextureInfo"
+      :style="{
+        left: rPopupLeft,
+        top: rPopupTop,
+      }"
+    >
+      <blur
+        :textureInfo="rTextureInfo"
+        :layout="{
+          left: 0,
+          top: 0,
+          width: popupViewLayout.width,
+          height: popupViewLayout.height,
+        }"
+        :showRectPos="{
+          left: rPopupLeft,
+          top: rPopupTop,
+        }"
+        :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>
+
+    <div
+      v-if="rTextureInfo"
+      :style="{
+        left: rPopup2Left,
+        top: rPopup2Top,
+      }"
+    >
+      <blur
+        :textureInfo="rTextureInfo"
+        :layout="{
+          left: 0,
+          top: 0,
+          width: popupViewLayout2.width,
+          height: popupViewLayout2.height,
+        }"
+        :showRectPos="{
+          left: rPopup2Left,
+          top: rPopup2Top,
+        }"
+        :borderRadius="30"
+      />
+      <div
+        :style="{
+          width: popupViewLayout2.width,
+          height: popupViewLayout2.height,
+          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+          borderRadius: 30,
+          lineHeight: popupViewLayout2.height,
+          textAlign: 'center',
+          color: '#ffffff',
+          fontSize: 40,
+        }"
+      >
+        弹窗内容 2
+      </div>
+    </div>
+
+    <div
+      v-if="rTextureInfo"
+      :style="{
+        top: 620,
+        width: 1280,
+        height: 100,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        color: '#ffffff',
+        fontSize: 40,
+        textAlign: 'center',
+        lineHeight: 100,
+      }"
+    >
+      按上下左右可以调整弹窗位置
+    </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 "@shijiu/jsview-vue-plus";
+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/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),
         ]),