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

package/CanvasDrawChart/Graph2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundColor: '#007788',
+    }"
+  ></div>
+  <div
+    :style="{
+      width: 400,
+      height: 400,
+      backgroundImage: `url(jsvtexturestore://${sourceId})`,
+    }"
+  ></div>
+  <div
+    v-for="pos in position"
+    :key="pos.x + pos.y"
+    :style="{
+      left: pos.x - 5,
+      top: pos.y - 5,
+      width: 10,
+      height: 10,
+      backgroundColor: '#00ff0055',
+    }"
+  ></div>
+</template>
+
+<script setup>
+import { JsvTextureStoreApi } from "jsview";
+import { JsvDashPath } from "jsview";
+import { onBeforeUnmount } from "vue";
+
+const chartHelper = JsvTextureStoreApi.getChartHelper(
+  400,
+  400,
+  [-50, 450],
+  [-50, 450]
+);
+const canvas = chartHelper.getCanvas();
+
+//绘制x轴
+const { path: xAxis } = chartHelper.linePath(
+  [
+    { x: -30, y: 0 },
+    { x: 430, y: 0 },
+  ],
+  0,
+  0
+);
+xAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+//绘制y轴
+const { path: yAxis } = chartHelper.linePath(
+  [
+    { x: 0, y: -30 },
+    { x: 0, y: 430 },
+  ],
+  0,
+  0
+);
+yAxis.strokeWithSetting({
+  lineWidth: 1,
+  color: "#000000",
+});
+
+const data = [
+  { x: 0, y: 200 },
+  { x: 50, y: 130 },
+  { x: 100, y: 200 },
+  { x: 150, y: 150 },
+  { x: 200, y: 300 },
+  { x: 250, y: 100 },
+  { x: 300, y: 20 },
+  { x: 350, y: 150 },
+  { x: 400, y: 10 },
+];
+
+//绘制折线图(不闭合)
+/**
+ * linePath参数说明
+ * @param data {Data[]} 数据点数组，每个点包含 x 和 y 坐标
+ * @param isBroken {boolean} 是否为折线
+ * @param close {number} 
+ *          0: 不闭合,绘制线段用, 
+ *          1: 闭合到x轴(自动绘制左右两端垂直于x轴的线段), 需要填充颜色时用
+ *          2: 闭合到y轴(自动绘制上下两端垂直于y轴的线段), 需要填充颜色时用
+ * @returns {CustomPath, Data[]} 路径对象和数据点数组，每个点包含 x 和 y 坐标
+ */
+const { path, position } = chartHelper.linePath(data, true, 0);
+path.strokeWithSetting({
+  lineWidth: 2,
+  color: "#0088FF",
+  dash: [10, 5],
+  phase: 0,
+});
+
+//绘制柱状图
+const originPos = chartHelper.getOriginPosition();
+//data2Pos获取数据点对应的坐标
+const pos2 = chartHelper.data2Pos(data);
+for (const pos of pos2) {
+  const rect = canvas.rectPath(pos.x - 10, pos.y, pos.x + 10, originPos.y);
+  rect.fill("#0000FF88");
+}
+
+const sourceId = canvas.commit();
+onBeforeUnmount(() => {
+  //注意释放资源
+  JsvTextureStoreApi.deleteTexture(sourceId);
+});
+</script>

package/DemoForOperator/Blur/Blur.vue

@@ -121,7 +121,7 @@ export function captureBlurTexture(divRef, blurRadius) {
       JsvTextureStoreApi.capture2Texture(
         divRef,
         (textureName, autoRecycle, w, h) => {
-          console.log("ccht captureBlurTexture", textureName, autoRecycle, w, h);
+          console.log("captureBlurTexture", textureName, autoRecycle, w, h);
           if (textureName) {
             resolve({
               textureId: textureName,

package/DemoForOperator/Blur/BlurInOut/BlurInOut.vue

@@ -1,24 +1,36 @@
 <script setup>
-import { shallowRef, onMounted } from "vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 import Blur, { captureBlurTexture } from "../Blur.vue";
 import StaticBgSlide from "./StaticBgSlide.vue";
 
-const vToCapture = shallowRef(null);
-const vTextureInfo = shallowRef(null);
+const rToCapture = shallowRef(null);
+const rTextureInfo = shallowRef(null);
+const rTriggerLoadKey = shallowRef(0);
 
 let isBlur = false;
+
+// 要确认图片完成显示时再进行捕获并处理成模糊纹理
+function handleLoadDone() {
+  if (isBlur) {
+    console.log("start captureBlurTexture");
+    captureBlurTexture(rToCapture.value, 12).then((textureInfo) => {
+      rTextureInfo.value = textureInfo;
+      console.log("done captureBlurTexture");
+      setTimeout(() => {
+        curPosition.left = 0;
+        rBgAnim.value?.slide(curPosition);
+      }, 0);
+    });
+  }
+}
+
 function enableBlur() {
   if (isBlur) {
     return;
   }
   isBlur = true;
-  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
-    vTextureInfo.value = textureInfo;
-    setTimeout(() => {
-      curPosition.left = 0;
-      bgAnim.value?.slide(curPosition);
-    }, 0);
-  });
+  // 触发图片加载，然后捕获模糊纹理
+  rTriggerLoadKey.value++;
 }
 
 const ImagePanda =
@@ -30,32 +42,32 @@ let curPosition = {
 };
 let width1 = 300;
 let height1 = 720;
-const bgAnim = shallowRef(null);
+const rBgAnim = shallowRef(null);
 const onKeyDown = (ev) => {
   console.log("ccht", ev.keyCode);
   switch (ev.keyCode) {
     case 37:
       if (isBlur) {
         curPosition.left = -width1;
-        bgAnim.value?.slide(curPosition);
+        rBgAnim.value?.slide(curPosition);
       }
 
       break;
     case 39:
       if (isBlur) {
         curPosition.left = 0;
-        bgAnim.value?.slide(curPosition);
+        rBgAnim.value?.slide(curPosition);
       } else {
         enableBlur();
       }
       break;
     // case 38:
     //   curPosition.top = curPosition.top - 100;
-    //   bgAnim.value?.slide(curPosition);
+    //   rBgAnim.value?.slide(curPosition);
     //   break;
     // case 40:
     //   curPosition.top = curPosition.top + 100;
-    //   bgAnim.value?.slide(curPosition);
+    //   rBgAnim.value?.slide(curPosition);
     //   break;
     // case 13:
     //   enableBlur();
@@ -65,8 +77,20 @@ const onKeyDown = (ev) => {
   }
 };
 
-onMounted(() => {
-  // enableBlur();
+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);
+
+onBeforeUnmount(() => {
+  // 取消注册一定不要漏
+  window.JsvCoreApi.removeEventCallback(cVisibleCallback);
 });
 </script>
 
@@ -78,18 +102,20 @@ onMounted(() => {
     }"
   >
     <div
-      ref="vToCapture"
+      ref="rToCapture"
       :style="{
         width: 1280, // 截屏区域的宽
         height: 720, // 截屏区域的高
       }"
     >
-      <div
+      <img
+        :key="rTriggerLoadKey"
+        :src="ImagePanda"
         :style="{
           width: 1280,
           height: 720,
-          backgroundImage: `url(${ImagePanda})`,
         }"
+        :onLoad="handleLoadDone"
       />
       <div
         :style="{
@@ -112,11 +138,11 @@ onMounted(() => {
       </div>
     </div>
 
-    <div v-if="vTextureInfo">
+    <div v-if="rTextureInfo">
       <StaticBgSlide
         key="bg"
-        ref="bgAnim"
-        :imgUrl="`jsvtexturestore://${vTextureInfo.textureId}`"
+        ref="rBgAnim"
+        :imgUrl="`jsvtexturestore://${rTextureInfo.textureId}`"
         :width="width1"
         :height="height1"
         :bgWidth="1280"

package/DemoForOperator/Blur/BlurInOut/StaticBgSlide.vue

@@ -66,7 +66,7 @@ const props = defineProps({
     default: "linear",
   },
   borderRadius: {
-    type: Number,
+    type: [Number, String],
     default: 0,
   },
   initPosition: {

package/DemoForOperator/Blur/BlurPopup/BlurPopup.vue

@@ -1,14 +1,45 @@
 <script setup>
-import { shallowRef } from "vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 import Blur, { captureBlurTexture } from "../Blur.vue";
 
-const vToCapture = shallowRef(null);
-const vTextureInfo = shallowRef(null);
+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() {
-  captureBlurTexture(vToCapture.value, 12).then((textureInfo) => {
-    vTextureInfo.value = textureInfo;
-  });
+  // 触发图片加载，然后捕获模糊纹理
+  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) => {
@@ -16,14 +47,56 @@ const _onKeyDown = (ev) => {
     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 = {
-  left: (1280 - 400) / 2,
-  top: 100,
-  width: 400,
-  height: 400,
+  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>
@@ -33,19 +106,29 @@ const popupViewLayout = {
       onKeyDown: _onKeyDown,
     }"
   >
+
+    <!-- 设置屏幕内1x1的div, 用来让captureBlurTexture有div把持, 避免自动释放, 适合多区域模糊内容共享的场景 -->
+    <div :style="{
+      width: 1,
+      height: 1,
+      backgroundImage: `url(${rBlurTextureKeeps})`,
+    }"/>
+
     <div
-      ref="vToCapture"
+      ref="rToCapture"
       :style="{
         width: 1280, // 截屏区域的宽
         height: 720, // 截屏区域的高
       }"
     >
-      <div
+      <img
+        :key="rTriggerLoadKey"
+        src="https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg"
         :style="{
           width: 1280,
           height: 720,
-          backgroundImage: `url(https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg)`,
         }"
+        :onLoad="handleLoadDone"
       />
       <div
         :style="{
@@ -63,14 +146,14 @@ const popupViewLayout = {
     </div>
 
     <div
-      v-if="vTextureInfo"
+      v-if="rTextureInfo"
       :style="{
-        left: popupViewLayout.left,
-        top: popupViewLayout.top,
+        left: rPopupLeft,
+        top: rPopupTop,
       }"
     >
       <blur
-        :textureInfo="vTextureInfo"
+        :textureInfo="rTextureInfo"
         :layout="{
           left: 0,
           top: 0,
@@ -78,8 +161,8 @@ const popupViewLayout = {
           height: popupViewLayout.height,
         }"
         :showRectPos="{
-          left: popupViewLayout.left,
-          top: popupViewLayout.top,
+          left: rPopupLeft,
+          top: rPopupTop,
         }"
         :borderRadius="30"
       />
@@ -95,9 +178,62 @@ const popupViewLayout = {
           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>
 

package/DemoForOperator/BookFlip/App.vue

@@ -52,7 +52,7 @@
 
 <script setup>
 import { ref } from "vue";
-import FlippingBook from "./BookFlip/FlippingBook.vue";
+import { FlippingBook } from "@shijiu/jsview-vue-plus";
 import BookPage from "./BookPage.vue";
 import { JsvFocusBlock } from "jsview";
 

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/Firework1/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#00000055' }"></div>
-  <Fireworks :top="500" :left="600" :srcConfig="config" />
+  <Fireworks :top="500" :left="600" :srcConfig="config" :onShoot="onShoot" :onExplode="onExplode" />
 </template>
 
 <script setup>
@@ -22,4 +22,15 @@ const config = {
   //精灵图素材
   fireworkSpriteSrc: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/firework1/fireworks.png",
 };
+
+const onShoot = () => {
+  //可以加音效
+  console.log("onShoot");
+}
+
+const onExplode = () => {
+  //可以加音效
+  console.log("onExplode");
+}
+
 </script>

package/DemoForOperator/Firework1/Fireworks.vue

@@ -196,6 +196,12 @@ const props = defineProps({
   srcConfig: { 
     type: Object, 
     require: true 
+  },
+  onShoot: {
+    type: Function,
+  },
+  onExplode: {
+    type: Function,
   }
 });
 
@@ -236,6 +242,7 @@ const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
+    onExplode()
     timer.id = setInterval(() => {
       let remainingItems = sprayArray.filter((item) => !item.value);
       if (remainingItems.length === 0) {
@@ -244,6 +251,7 @@ const spray = () => {
       } else {
         randomIndex = Math.floor(Math.random() * remainingItems.length);
         remainingItems[randomIndex].value = true;
+        onExplode();
       }
     }, 100);
   }, 500);
@@ -355,6 +363,14 @@ for (let i = 1; i <= 5; i++) {
   remainingGroups.splice(randomIndex, 1);
 }
 
+const onShoot = () => {
+  props.onShoot?.();
+}
+
+const onExplode = () => {
+  props.onExplode?.();
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
@@ -376,11 +392,13 @@ watch(readyNum, (n, o) => {
             cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
+              onExplode();
               isShow.value = false;
               spray();
             },
           ]),
       ]);
+      onShoot();
     }, 0);
   }
 });

package/DemoForOperator/FlipPage/FlipPage/FlipPage.vue

@@ -17,6 +17,7 @@
       :shaderStr="shaderSetting.shader"
       :autoplay="true"
       :textures="shaderSetting.textures"
+      :loadComfirmed="true"
       :onEnd="onAnimEnd"
     ></jsv-frag-shader-view>
 

package/DemoForOperator/Focus/Alpha/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       明暗

package/DemoForOperator/Focus/Light/Item.vue

@@ -47,6 +47,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       旋转光

package/DemoForOperator/Focus/Normal/Item.vue

@@ -46,6 +46,7 @@ props.onAction.register("onClick", onClick);
         backgroundImage: bgImage,
         lineHeight: data.height,
         textAlign: 'center',
+        borderRadius: '10',
       }"
     >
       普通