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

package/ScreenToBlob/App.vue

@@ -0,0 +1,250 @@
+<script setup>
+import { shallowRef, ref, onBeforeUnmount } from "vue";
+import { JsvTextureStoreApi, JsvPreload, buildPreloadInfo, BlobApi } from "jsview";
+
+// 与 DominantColor 示例保持一致的两张图片
+const Image1 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const Image2 =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+// 需要截屏的区域
+const vToCapture = shallowRef(null);
+
+// 左侧资源统一收拢到一个非响应式对象中，便于集中管理回收逻辑
+const cLeftResource = {
+  // Blob 显示用的 URL
+  blobUrl: ref(null),
+  // 当前 object URL，用于释放
+  currentObjectUrl: null,
+  // 全局 BitPalette 句柄，用于在 unmount 时统一回收
+  activeBitPalette: null,
+};
+
+// 截屏 cancel 句柄
+let captureTextureHandle = null;
+
+function handleLoadDone() {
+  console.log("图片预加载完成");
+  doCaptureAndToBlob();
+}
+
+async function doCaptureAndToBlob() {
+  try {
+    console.log("ScreenToBlob: doCaptureAndToBlob");
+
+    if (!vToCapture.value) {
+      console.warn("ScreenToBlob: vToCapture 为空");
+      return;
+    }
+
+    // 截屏生成 texture
+    captureTextureHandle = JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      async (textureName, autoRecycle, w, h) => {
+        console.log("ScreenToBlob capture2Texture", textureName, autoRecycle, w, h);
+        if (!textureName || textureName.length === 0) {
+          console.warn("ScreenToBlob: capture2Texture 返回空 textureName");
+          return;
+        }
+
+        const src = `jsvtexturestore://${textureName}`;
+        let bitPalette = null;
+        try {
+          // 若已有未完成的 BitPalette，先回收
+          cLeftResource.activeBitPalette?.recycle();
+
+          // 使用 getBitPalette 获取 BitPalette，并保存为全局句柄
+          bitPalette = JsvTextureStoreApi.getBitPalette(src);
+          cLeftResource.activeBitPalette = bitPalette;
+
+          await bitPalette.Ready;
+
+          // 通过 BitPaletteCtrl.toBlob 获得 Blob
+          const blob = await bitPalette.Ctrl?.toBlob();
+          if (!blob) {
+            console.warn("ScreenToBlob: toBlob 返回空 Blob");
+            return;
+          }
+
+          // 释放旧的 object URL
+          if (cLeftResource.currentObjectUrl) {
+            BlobApi.revokeObjectURL(cLeftResource.currentObjectUrl);
+            cLeftResource.currentObjectUrl = null;
+          }
+
+          // 创建新的 object URL，并用于展示
+          cLeftResource.currentObjectUrl = await BlobApi.createObjectURL(blob);
+          cLeftResource.blobUrl.value = cLeftResource.currentObjectUrl;
+        } catch (error) {
+          console.error("ScreenToBlob: BitPalette 处理失败", error);
+        } finally {
+          // 释放 BitPalette 资源，并清理全局句柄
+          if (cLeftResource.activeBitPalette === bitPalette) {
+            bitPalette?.recycle();
+            cLeftResource.activeBitPalette = null;
+          }
+          // 手动删除截图纹理，防止泄漏
+          JsvTextureStoreApi.deleteTexture(textureName);
+        }
+      },
+      false // 手动deleteTexture进行回收而非自动回收, JsvTextureStoreApi.getBitPalette 的需求
+    );
+  } catch (error) {
+    console.error("ScreenToBlob: capture2Texture 调用失败", error);
+  }
+}
+
+// 处理右边区域的Blob展示, 右边区域使用图片src直接展示
+const cRightResource = {
+  // Blob 显示用的 URL
+  blobUrl: ref(null),
+  // 当前 object URL，用于释放
+  currentObjectUrl: null,
+  // 全局 BitPalette 句柄，用于在 unmount 时统一回收
+  activeBitPalette: null,
+};
+async function handleRightBlob(src) {
+  // 使用 getBitPalette 获取 BitPalette，并保存为全局句柄
+  const bitPalette = JsvTextureStoreApi.getBitPalette(src);
+  cRightResource.activeBitPalette = bitPalette;
+
+  await bitPalette.Ready;
+
+  // 通过 BitPaletteCtrl.toBlob 获得 Blob
+  const blob = await bitPalette.Ctrl?.toBlob();
+  if (!blob) {
+    console.warn("ScreenToBlob: toBlob 返回空 Blob");
+    return;
+  }
+
+  // 释放旧的 object URL
+  if (cRightResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cRightResource.currentObjectUrl);
+    cRightResource.currentObjectUrl = null;
+  }
+
+  // 创建新的 object URL，并用于展示
+  cRightResource.currentObjectUrl = await BlobApi.createObjectURL(blob);
+  cRightResource.blobUrl.value = cRightResource.currentObjectUrl;
+}
+handleRightBlob(Image2);
+
+onBeforeUnmount(() => {
+
+  // ------- 先处理左边资源的回收 -------
+
+  // 取消截屏, 回收resource
+  captureTextureHandle?.recycle();
+
+  // 回收仍在进行中的 BitPalette - 左侧
+  cLeftResource.activeBitPalette?.recycle();
+  cLeftResource.activeBitPalette = null;
+
+  // 释放 object URL - 左侧
+  if (cLeftResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cLeftResource.currentObjectUrl);
+    cLeftResource.currentObjectUrl = null;
+    console.log("ScreenToBlob: 已释放 object URL (左侧)");
+  }
+
+  // ------- 再处理右边资源的回收 -------
+  // 回收仍在进行中的 BitPalette - 右侧
+  cRightResource.activeBitPalette?.recycle();
+  cRightResource.activeBitPalette = null;
+
+  // 释放 object URL - 右侧
+  if (cRightResource.currentObjectUrl) {
+    BlobApi.revokeObjectURL(cRightResource.currentObjectUrl);
+    cRightResource.currentObjectUrl = null;
+    console.log("ScreenToBlob: 已释放 object URL (右侧)");
+  }
+});
+</script>
+
+<template>
+  <!-- 背景，与 DominantColor 保持一致 -->
+  <div
+    :style="{
+      left: 0,
+      top: 0,
+      width: 1280,
+      height: 720,
+      backgroundColor: '#FFFFFF',
+    }"
+  ></div>
+
+  <div
+    :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 140,
+      top: 20,
+      width: 1000,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }"
+  >
+    下方为blob显示,1为截图blob, 2为给定url的blob
+  </div>
+
+  <!-- 截屏区域, 等图片加载完成后进行截屏动作 -->
+  <div
+    ref="vToCapture"
+    :style="{
+      left: 0,
+      top: 80,
+      width: 640,
+      height: 360,
+    }"
+  >
+    <img
+      :style="{
+        width: 640,
+        height: 360,
+      }"
+      :onLoad="handleLoadDone" 
+      :src="Image1"
+    />
+    <div
+      :style="{
+        width: 300,
+        height: 300,
+        backgroundColor: '#007788',
+      }"
+    ></div>
+  </div>
+
+
+  <!-- Blob 结果展示区域，仿照 BlobLoadTest，在绘制内容下方展示 -->
+  <div
+    v-if="cLeftResource.blobUrl.value"
+    :style="{
+      top: 450,
+      left: 0,
+    }"
+  >
+    <img
+      :src="cLeftResource.blobUrl.value"
+      :style="{
+        width: 640,
+        height: 250,
+        objectFit: 'contain',
+      }"
+    />
+  </div>
+
+  <!-- 右侧图片展示 -->
+  <div
+    :style="{
+      left: 640,
+      top: 450,
+      width: 320,
+      height: 180,
+      backgroundImage: `url(${cRightResource.blobUrl.value})`,
+    }"
+  />
+</template>
+

package/SecTorTest/App.vue

@@ -4,13 +4,14 @@
       <JsvPieChart
         :centerPosition="center"
         :radius="360"
+        :subRadius="300"
         :data="data"
-        :animationTime="0.5"
+        :animationTime="0.8"
       ></JsvPieChart>
       <!-- 文字说明 -->
       <div class="text">
         {{
-          "图为圆心在(400,400)位置，半径为360的饼图。此样例限制最多六个扇形。"
+          "图为圆心在(400,400)位置，半径为360-300的环形图(300为0时则为扇形饼图)。此样例限制最多六个扇形。"
         }}
       </div>
       <!-- 操作说明 -->
@@ -34,22 +35,27 @@ const center = {
 let data = shallowRef([
   {
     percent: 23.33,
+    // color: "#0000FF7F",
     color: "#0000FF",
   },
   {
     percent: 24.67,
+    // color: "#FFFF007F",
     color: "#FFFF00",
   },
   {
     percent: 15,
+    // color: "#FF12FF7F",
     color: "#FF12FF",
   },
   {
     percent: 13,
+    // color: "#FF12137F",
     color: "#FF1213",
   },
   {
     percent: 24,
+    // color: "#6EFFE17F",
     color: "#6EFFE1",
   },
 ]);
@@ -209,7 +215,7 @@ let actionDefines = {
 }
 .text {
   width: 500;
-  height: 60;
+  height: 90;
   left: 700;
   top: 300;
   background-color: rgba(255, 255, 255, 0.5);

package/SpringFestival/SpringFestivalScene/FreeMoveBuilder.js

@@ -59,8 +59,8 @@ const sWallConditionName = "wallCond";
 export function buildBounce(
     cmds,// FreeMove的cmds句柄
     condGroupId,
-    startX, // 起始位置和目标位置的偏差, 单位px
-    startY, // 起始位置和目标位置的偏差, 单位px
+    startX, // 起始位置和目标位置的偏差, 单位px, 目标位置固定为0
+    startY, // 起始位置和目标位置的偏差, 单位px, 目标位置固定为0
     times, // 整数，落点数(弹起次数-1)
     gravity, // y轴的加速度, 建议设置成0.8
     onEnd,
@@ -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/SyncDecode/App.vue

@@ -0,0 +1,137 @@
+<template>
+  <jsv-focus-block
+    :onAction="{ onKeyDown }"
+    autoFocus
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  >
+    <JsvPreload :downloadList="downloadInfo" :onDownloadDone="onDownloadDone" />
+    <div
+      :style="{
+        left: rootLeft,
+        transition: 'left 0.5s ease-in-out',
+      }"
+      @transitionend="onTransitionEnd"
+    >
+      <JsvPosterImage
+        v-if="showImg == 0"
+        :style="{
+          left: 0,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageLongmao"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 1"
+        :style="{
+          left: 1280,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImageOwl"
+      >
+      </JsvPosterImage>
+      <JsvPosterImage
+        v-if="showImg == 2"
+        :style="{
+          left: 2560,
+          width: 1280,
+          height: 720,
+        }"
+        :syncDraw="true"
+        :src="ImagePanda"
+      >
+      </JsvPosterImage>
+    </div>
+
+    <div
+      :style="{
+        width: 1280,
+        height: 40,
+        backgroundColor: '#00000088',
+        top: 100,
+        color: '#ffffff',
+        fontSize: 30,
+        textAlign: 'center',
+      }"
+    >
+      按左右键, 看图片解码时间的延迟
+    </div>
+
+    <div
+      :style="{
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        backgroundColor: '#ff0000',
+        animation: 'rotate 5s linear infinite',
+      }"
+    ></div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { JsvPosterImage, JsvPreload, buildDownloadInfo } from "jsview";
+
+const rootLeft = ref(0);
+const showImg = ref(0);
+const ImageLongmao =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
+const ImagePanda =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/panda.jpeg";
+const ImageOwl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CustomShader/App/owl.jpeg";
+
+const downloadInfo = [
+  buildDownloadInfo(ImageLongmao),
+  buildDownloadInfo(ImagePanda),
+  buildDownloadInfo(ImageOwl),
+];
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      if (showImg.value > 0) {
+        showImg.value = showImg.value - 1;
+        rootLeft.value = rootLeft.value + 1280;
+      }
+      break;
+    case 39:
+      if (showImg.value < 2) {
+        showImg.value = showImg.value + 1;
+        rootLeft.value = rootLeft.value - 1280;
+      }
+      break;
+  }
+};
+
+const onDownloadDone = (info) => {
+  console.log("onDownloadDone", info);
+};
+
+const onTransitionEnd = () => {
+  console.log("onAnimationEnd clear resource");
+  window.JsvCoreApi?.triggerTextureRecycle?.();
+};
+
+</script>
+
+<style>
+@keyframes rotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/TextSizeLimit/App.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { JsvTextBox, JsvFlexDiv } from "jsview";
+</script>
+
+<template>
+  <div :style="{
+    width: 1280,
+    height: 720,
+    backgroundColor: '#007788',
+  }"></div>
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 20,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }"
+  >
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        height: 26,
+        lineHeight: 26,
+      }"
+      :minWidth="400"
+    >
+      {{ "\\textcolor{#FF0000}{最小宽度400},顶住后方的flex div" }}
+    </jsv-text-box>
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 90,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }">
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        lineHeight: 26,
+      }"
+      :maxWidth="500"
+    >
+      {{ "\\textcolor{#FF0000}{最大宽度500},文字不足500时,以实际为主" }}
+    </jsv-text-box>
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 160,
+      width: 700,
+      height: 60,
+      backgroundColor: '#030303',
+    }">
+    <jsv-text-box
+      syncDraw="sync"
+      :enableLatex="true"
+      :style="{
+        backgroundColor: '#999999',
+        fontSize: 20,
+        color: '#00ff00',
+        textOverflow: 'clip',
+        lineHeight: 26,
+      }"
+      :maxWidth="500"
+    >
+      {{ "\\textcolor{#FF0000}{最大宽度500},文字超过500时,自动换行显示,补充文字1,补充文字2,补充文字3" }}
+    </jsv-text-box>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 20,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'clip',
+          lineHeight: 26,
+        }"
+        :minHeight="200"
+      >
+        {{ "宽度固定200,\\textcolor{#FF0000}{最小高度200},文字不足以撑起高度时,自动补足高度,顶住下面的flex div" }}
+      </jsv-text-box>
+      <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 300,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'clip',
+          lineHeight: 26,
+        }"
+        :maxHeight="200"
+      >
+      {{ "宽度固定200,\\textcolor{#FF0000}{最大高度200},文字不足以撑起高度时,按照实际高度绘制,顶住下面的flex div" }}
+      </jsv-text-box>
+      <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+  <jsv-flex-div
+    :style="{
+      left: 520,
+      top: 230,
+      width: 200,
+      height: 300,
+      backgroundColor: '#030303',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    }">
+      <jsv-text-box
+        syncDraw="sync"
+        :enableLatex="true"
+        :style="{
+          backgroundColor: '#999999',
+          width: 200,
+          fontSize: 20,
+          color: '#00ff00',
+          textOverflow: 'ellipsis',
+          lineHeight: 26,
+        }"
+        :maxHeight="200"
+      >
+        {{ "宽度固定200,\\textcolor{#FF0000}{最大高度200},文字超过最大高度,进行超出处理,\\textcolor{#FF0000}{高度为整行的倍数(以不超过200的7*26=182)},补充文字1,补充文字2,补充文字3,补充文字4,补充文字5,补充文字6,补充文字7,补充文字8,补充文字9,补充文字10" }}
+    </jsv-text-box>  
+    <div
+      :style="{
+        width: 100,
+        height: 26,
+        fontSize: 20,
+        color: '#000000',
+        backgroundColor: '#009999',
+      }"
+    >{{ "后续文字" }}</div>
+  </jsv-flex-div>
+
+</template>

package/TransitPage/App.vue

@@ -4,6 +4,8 @@ import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
 import { jJsvRuntimeBridge } from "jsview";
 import { ref, onMounted } from "vue";
 
+// 本用例测试deepLink启动场景
+
 const getShowMode = () => {
   let showMode = 0;
   // showMode信息可被URL中的?后缀信息替换

package/ViewOpacity/App.vue

@@ -81,6 +81,25 @@ onUnmounted(() => {
           />
         </div>
       </div>
+      <div class="block">
+        <div :style="{ left: 120, top: 320 }">
+          <img
+            :style="{
+              ...style1,
+            }"
+            :src="test1"
+          />
+        </div>
+
+        <div :style="{ left: 500, top: 320 }">
+          <img
+            :style="{
+              ...style1,
+            }"
+            :src="test2"
+          />
+        </div>
+      </div>
     </div>
   </jsv-focus-block>
 </template>