@shijiu/jsview-vue-samples 2.2.35 → 2.2.201

package/BakeViewDemo/AnimatePic.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { onMounted, onUnmounted, shallowRef } from "vue";
+import { getDataUrl } from "../CommonUtils/ResourceData";
+//无网络环境下使用
+const DemoResourceBase = getDataUrl();
+const item_url = DemoResourceBase
+  ? `${DemoResourceBase}/27bda620942566673ab449a3ef765321.png`
+  : "http://oss.image.qcast.cn/homepage/20210209/27bda620942566673ab449a3ef765321.png";
+
+const staticLeftPos = shallowRef(0);
+let moveLeftTimer = -1;
+
+onMounted(() => {
+  moveLeftTimer = setInterval(() => {
+    if (staticLeftPos.value > 200) {
+      staticLeftPos.value = 0;
+    } else {
+      staticLeftPos.value = staticLeftPos.value + 10;
+    }
+  }, 800);
+});
+
+onUnmounted(() => {
+  if (moveLeftTimer != -1) {
+    clearInterval(moveLeftTimer);
+    moveLeftTimer = -1;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div
+      :style="{
+        left: staticLeftPos,
+        width: 50,
+        height: 50,
+        backgroundImage: `url(${item_url})`,
+      }"
+    />
+    <div
+      className="blockStyle"
+      :style="{
+        backgroundColor: '#0000FF',
+        animation: 'opacityDemo_CompositeNoOpacity 3s infinite',
+      }"
+    />
+    <img
+      className="blockStyle"
+      :style="{
+        objectFit: 'contain',
+        animation: 'opacityDemo_CompositeOpacity 3s infinite',
+      }"
+      :src="item_url"
+    />
+  </div>
+</template>
+
+<style scoped>
+.blockStyle {
+  top: 50;
+  left: 50;
+  width: 150;
+  height: 150;
+}
+
+.picTitleTextClass {
+  font-size: 25;
+  height: 68;
+  line-height: 34;
+  color: #000000;
+  text-align: "center";
+}
+
+@keyframes opacityDemo_CompositeOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+    opacity: 0.1;
+  }
+  to {
+  }
+}
+
+@keyframes opacityDemo_CompositeNoOpacity {
+  from {
+    transform: translate3d(50%, 30, 0) scale3d(1.5, 1.5, 1)
+      rotate3d(1.5, 1, 0, 90deg) skew(30deg, 45deg);
+  }
+  to {
+  }
+}
+</style>

package/BakeViewDemo/App.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-04-20 21:05:26
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 11:16:52
+ * @Description: file content
+-->
+<script setup>
+import { onMounted, onUnmounted, shallowRef } from "vue";
+import { useRouter } from "vue-router";
+import AnimatePic from "./AnimatePic.vue";
+import { jJsvRuntimeBridge, JsvTextureStoreApi, JsvFilterView } from "jsview";
+
+const router = useRouter();
+
+const vCapturedTexture = shallowRef(null);
+// const vCapturedTexture = shallowRef("123");
+const vToCapture = shallowRef(null);
+
+window.MyCapture = vToCapture;
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+};
+
+let loopCaptureTimer = -1;
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+
+  loopCaptureTimer = setInterval(() => {
+    JsvTextureStoreApi.capture2Texture(
+      vToCapture.value,
+      (textureName, autoRecycle, w, h) => {
+        vCapturedTexture.value = textureName;
+        console.log(`capture done id=${textureName} w=${w} h=${h}`);
+      }
+    );
+  }, 2200);
+});
+
+onUnmounted(() => {
+  if (loopCaptureTimer != -1) {
+    clearInterval(loopCaptureTimer);
+    loopCaptureTimer = -1;
+  }
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown: _onKeyDown,
+    }"
+  >
+    <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)',
+      }"
+    >
+      左边的div会被制成快照(每2秒)显示在右图
+    </div>
+    <div
+      ref="vToCapture"
+      :style="{
+        left: 140,
+        top: 200,
+        width: 300, // 截屏区域的宽
+        height: 300, // 截屏区域的高
+      }"
+    >
+      <jsv-filter-view :width="300" :height="300">
+        <div
+          :style="{
+            width: 300,
+            height: 300,
+            backgroundColor: 'rgb(128, 128, 0)',
+          }"
+        />
+        <animate-pic />
+      </jsv-filter-view>
+    </div>
+
+    <div
+      v-if="vCapturedTexture != null"
+      :style="{
+        top: 200,
+        left: 650,
+        width: 150,
+        height: 150,
+        backgroundImage: `jsvtexturestore://${vCapturedTexture}`,
+      }"
+    />
+  </jsv-focus-block>
+</template>
+
+<style scoped></style>

package/ClickDivDemo/App.vue

@@ -0,0 +1,150 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-08-30 10:58:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-08-30 14:20:46
+ * @Description: file content
+-->
+<script setup>
+import { shallowRef, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+
+// @click处理项目的响应处理
+const clickItemColor = shallowRef("#c3aa20");
+const onClickItemClick = () => {
+  clickItemColor.value = "#ba69af";
+  // 点击后改变背景颜色来提示
+  setTimeout(() => {
+    clickItemColor.value = "#c3aa20";
+  }, 150);
+};
+
+// TapListener处理项目的响应处理
+const tapItemColor = shallowRef("#c3aa20");
+const tapDivRef = shallowRef(null);
+const registerTap = () => {
+  tapDivRef.value.jsvSetTapListener({
+    // 长按响应，以变色来回应
+    onLongPress: () => {
+      tapItemColor.value = "#25ac47";
+      console.log("Long pressed");
+    },
+
+    // 长按响应结束，以颜色还原来回应
+    onLongPressRelease: () => {
+      tapItemColor.value = "#c3aa20";
+      console.log("Long pressed release");
+    },
+
+    // 长按响应取消，通过长按 + 不放手时移动阿里激活，以颜色还原来回应
+    onCancel: () => {
+      tapItemColor.value = "#c3aa20";
+      console.log("canceled");
+    },
+
+    // 同样的click处理，以blink来回应
+    onClick: () => {
+      console.log("onClicked");
+      tapItemColor.value = "#ba69af";
+      // 点击后改变背景颜色来提示
+      setTimeout(() => {
+        tapItemColor.value = "#c3aa20";
+      }, 150);
+    },
+  });
+};
+
+onMounted(() => {
+  registerTap();
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      class="baseTextSet"
+      :style="{
+        lineHeight: 50,
+        left: 140,
+        top: 20,
+        width: 1000,
+        height: 50,
+        backgroundColor: 'rgba(27,38,151,0.8)',
+      }"
+    >
+      展示两种接受点击事件div的写法
+    </div>
+
+    <div
+      class="baseTextSet clickItem"
+      :style="{
+        left: 300,
+        top: 230,
+        backgroundColor: clickItemColor,
+      }"
+      @click="onClickItemClick"
+    >
+      {{ "@click" }}
+    </div>
+    <div
+      class="baseTextSet"
+      :style="{ left: 174, top: 350, width: 400, height: 50, lineHeight: 50 }"
+    >
+      {{ "点击会闪紫色" }}
+    </div>
+
+    <div
+      class="baseTextSet clickItem"
+      ref="tapDivRef"
+      :style="{
+        left: 600,
+        top: 230,
+        backgroundColor: tapItemColor,
+        width: 320,
+        lineHeight: 50,
+      }"
+    >
+      {{ "TapListener\n支持Click/LongPress" }}
+    </div>
+
+    <div
+      class="baseTextSet"
+      :style="{ left: 550, top: 350, width: 400, height: 100, lineHeight: 50 }"
+    >
+      {{ "点击会闪紫色\n长按会出现绿色" }}
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.baseTextSet {
+  text-align: center;
+  font-size: 30;
+  color: #ffffff;
+}
+
+.clickItem {
+  width: 150;
+  height: 100;
+  line-height: 100;
+}
+</style>

package/CoupletsTest/widget/Banger/Maroon.vue

@@ -81,14 +81,12 @@ let deg = shallowRef(props.deg);
 //动画处理
 const fire = () => {
   props.myRef.value.start();
-  actorControl.run([
-    actorControl
-      .action()
-      .setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
-    actorControl
+  actorControl.run((cmds) => [
+    cmds.action().setSpdAndAccel(undefined, 0, undefined, 0.15, null, null),
+    cmds
       .condition()
       .reachPosition(undefined, 280)
-      .then([actorControl.action().stopMoving()]),
+      .then([cmds.action().stopMoving()]),
   ]);
 };
 

package/CoupletsTest/widget/Fireworks/Fireworks.vue

@@ -160,16 +160,26 @@ const props = defineProps({
 });
 
 //火花图片素材
-const group1_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png"
-const group1_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png"
-const group2_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png"
-const group2_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png"
-const group3_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png"
-const group3_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png"
-const group4_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png"
-const group4_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png"
-const group5_1 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png"
-const group5_2 ="https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png"
+const group1_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_1.png";
+const group1_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/1/group1_2.png";
+const group2_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_1.png";
+const group2_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/2/group2_2.png";
+const group3_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_1.png";
+const group3_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/3/group3_2.png";
+const group4_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_1.png";
+const group4_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/4/group4_2.png";
+const group5_1 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_1.png";
+const group5_2 =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Fireworks/images/5/group5_2.png";
 //弹药图片素材(请按需修改)
 const ammo =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/images/star2.png";
@@ -180,7 +190,7 @@ const fireworksJson =
   "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/SpringFestivalTest_2024/Sprite/fireworks.json";
 
 //运动距离
-let moveDistance = 260
+let moveDistance = 260;
 let sprite_info = shallowRef(null);
 let view_size = shallowRef(null);
 let isSpray = shallowRef(false);
@@ -195,7 +205,7 @@ let actorRef = shallowRef(null);
 let myShow = shallowRef(false);
 let actorControl;
 //随机顺序绽放函数
-const spray=()=> {
+const spray = () => {
   timer.id2 = setTimeout(() => {
     let randomIndex = Math.floor(Math.random() * sprayArray.length);
     sprayArray[randomIndex].value = true;
@@ -210,7 +220,7 @@ const spray=()=> {
       }
     }, 100);
   }, 500);
-}
+};
 
 //预加载
 const preload_info = [
@@ -295,50 +305,50 @@ let ImgData4;
 let ImgData5;
 const allGroup = [group1, group2, group3, group4, group5];
 //随机烟花颜色设定
-  const remainingGroups = [...allGroup];
-  for (let i = 1; i <= 5; i++) {
-    const randomIndex = Math.floor(Math.random() * remainingGroups.length);
-    const selectedGroup = remainingGroups[randomIndex];
-    switch(i) {
-      case 1:
-        ImgData1 = selectedGroup;
-        break;
-      case 2:
-        ImgData2 = selectedGroup;
-        break;
-      case 3:
-        ImgData3 = selectedGroup;
-        break;
-      case 4:
-        ImgData4 = selectedGroup;
-        break;
-      case 5:
-        ImgData5 = selectedGroup;
-        break;
-    }
-    
-    remainingGroups.splice(randomIndex, 1);
+const remainingGroups = [...allGroup];
+for (let i = 1; i <= 5; i++) {
+  const randomIndex = Math.floor(Math.random() * remainingGroups.length);
+  const selectedGroup = remainingGroups[randomIndex];
+  switch (i) {
+    case 1:
+      ImgData1 = selectedGroup;
+      break;
+    case 2:
+      ImgData2 = selectedGroup;
+      break;
+    case 3:
+      ImgData3 = selectedGroup;
+      break;
+    case 4:
+      ImgData4 = selectedGroup;
+      break;
+    case 5:
+      ImgData5 = selectedGroup;
+      break;
   }
 
+  remainingGroups.splice(randomIndex, 1);
+}
+
 watch(readyNum, (n, o) => {
   if (o != 2 && n == 2) {
     myShow.value = true;
     timer.id2 = setTimeout(() => {
       myRef.value.start();
 
-      actorControl.run([
-        actorControl
+      actorControl.run((cmds) => [
+        cmds
           .condition()
           .onNextTick(2)
           .then([
-            actorControl.action().setSpeed(undefined, -9),
-            actorControl.action(3).setAccel(undefined, 0.13),
+            cmds.action().setSpeed(undefined, -9),
+            cmds.action(3).setAccel(undefined, 0.13),
           ]),
-        actorControl
+        cmds
           .condition()
           .reachPosition(undefined, -moveDistance)
           .then([
-            actorControl.action().stopMoving(),
+            cmds.action().stopMoving(),
             () => {
               isSpray.value = true;
               isShow.value = false;

package/CustomShader/App.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { onMounted, onUnmounted, ref, computed } from "vue";
+import { JsvFragShaderView } from "jsview";
+import vortexShader from "./vortex.glsl?raw";
+import pageFlipShader from "./pageFlip.glsl?raw";
+import sdfShader from "./sdf.glsl?raw";
+import gaussianBlurShader from "./gaussianBlur.glsl?raw";
+// import testShader from "./test.glsl?raw";
+
+const ImageChinChilla =
+  "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+const ImageLandscape = "https://oss.image.qcast.cn/ai-draw/landscape.jpeg";
+const ImagePanda = "https://oss.image.qcast.cn/ai-draw/panda.jpeg";
+const ImageOwl = "https://oss.image.qcast.cn/ai-draw/owl.jpeg";
+
+const cShaderSettings = [
+  {
+    name: "vortex",
+    shader: vortexShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+  },
+  {
+    name: "pageFlip",
+    shader: pageFlipShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+  },
+  {
+    name: "sdf",
+    shader: sdfShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+  },
+  {
+    name: "gaussianBlur",
+    shader: gaussianBlurShader,
+    uniforms: [],
+    textures: [
+      {
+        name: "iChannel0",
+        resource: ImageOwl,
+      },
+    ],
+  },
+];
+
+const rKeyCount = ref(0);
+const rShaderInfo = computed(() => {
+  return cShaderSettings[rKeyCount.value];
+});
+
+const rAutoplay = computed(() => {
+  return rKeyCount.value != 3;
+});
+
+const rWidgetRef = ref();
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37: {
+      rKeyCount.value =
+        rKeyCount.value > 0 ? rKeyCount.value - 1 : rKeyCount.value;
+      return true;
+    }
+    case 39: {
+      rKeyCount.value =
+        rKeyCount.value < cShaderSettings.length - 1
+          ? rKeyCount.value + 1
+          : rKeyCount.value;
+      return true;
+    }
+    case 13: {
+      if (rKeyCount.value != 3) {
+        rWidgetRef.value?.startAnim();
+      }
+      return true;
+    }
+    default:
+      return false;
+  }
+};
+
+onMounted(() => {
+  window.JsView?.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  window.JsView?.enableFpsDisplay(false);
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundImage: `url(${ImageChinChilla})`,
+    }"
+  ></jsv-focus-block>
+
+  <jsv-frag-shader-view
+    :key="rKeyCount"
+    ref="rWidgetRef"
+    :style="{ left: 0, top: 0, width: 1920, height: 1080 }"
+    :duration="100000"
+    :shaderStr="rShaderInfo.shader"
+    :autoplay="rAutoplay"
+    :textures="rShaderInfo.textures"
+  ></jsv-frag-shader-view>
+  <div
+    :key="rKeyCount"
+    :style="{
+      top: 20,
+      left: 500,
+      width: 500,
+      height: 50,
+      fontSize: 30,
+      textAlign: 'center',
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    {{ rShaderInfo.name }}
+  </div>
+  <div
+    :style="{
+      top: 20,
+      left: 1400,
+      width: 500,
+      height: 50,
+      fontSize: 30,
+      backgroundColor: '#00000055',
+      color: '#ffffff',
+    }"
+  >
+    左右键切换效果, OK键重新播放
+  </div>
+</template>

package/CustomShader/gaussianBlur.glsl

@@ -0,0 +1,27 @@
+const int samples = 35, LOD = 2,         // gaussian done on MIPmap at scale LOD
+sLOD = 4; // tile size = 2^LOD
+const float sigma = float(samples) * .25;
+
+float gaussian(vec2 i) {
+  return exp(-.5 * dot(i /= sigma, i)) / (6.28 * sigma * sigma);
+}
+
+int myMod(int a, int b) {
+  return a - b * int(floor(float(a) / float(b)));
+}
+
+vec4 blur(sampler2D sp, vec2 U, vec2 scale) {
+  vec4 O = vec4(0);
+  int s = samples / sLOD;
+
+  for(int i = 0; i < s * s; i++) {
+    vec2 d = vec2(myMod(i, s), i / s) * float(sLOD) - float(samples) / 2.;
+    O += gaussian(d) * jsvTexture2D(sp, U + scale * d);
+  }
+
+  return O / O.a;
+}
+
+void mainImage(out vec4 O, vec2 U) {
+  O = blur(iChannel0, U / iResolution.xy, 1. / iResolution.xy);
+}