@shijiu/jsview-vue-samples 2.2.201 → 2.2.426-test.0

package/PosterPacker/tools/geniePakcer/genieBottom.glsl

@@ -0,0 +1,49 @@
+#define VTIME 0.3
+
+float yPoint(float y0, float y1, float x) {
+    float a = 2. * (y0 - y1);
+    float b = 3. * (y1 - y0);
+    float d = y0;
+    return a * x * x * x + b * x * x + d;
+}
+
+float remap2(float uv, float inputLow, float inputHigh, float outputLow, float outputHigh){
+    float t = (uv - inputLow)/(inputHigh - inputLow);
+    float final = mix(outputLow,outputHigh,t);
+    return final;
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    // Normalized pixel coordinates (from 0 to 1)
+    vec2 uv = fragCoord/iResolution.xy;
+    float t = ${myTime} ;    
+    // float t = abs(sin(iTime));
+    //v animation
+    if (t < VTIME) {
+        float vAnimP = (t) / VTIME;
+        float top = mix(1.0, ${RANGE_1}, vAnimP);
+        float bottom = mix(0.0, ${RANGE_2}, vAnimP);
+        float xTop = yPoint(top, 1., uv.y); // Swap uv.x with uv.y
+        float xBottom = yPoint(bottom, 0., uv.y); // Swap uv.x with uv.y
+        float newUvX = remap2(uv.x, xBottom, xTop, 0.0, 1.0); // Swap uv.x with uv.y
+        if (newUvX > 1. || newUvX < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(newUvX, uv.y));
+        }
+    } else {
+        //h animation
+        float xTop = yPoint(${RANGE_1}, 1., uv.y); // Swap uv.x with uv.y
+        float xBottom = yPoint(${RANGE_2}, 0., uv.y); // Swap uv.x with uv.y
+        float newUvX = remap2(uv.x, xBottom, xTop, 0.0, 1.0); // Swap uv.x with uv.y
+        float hAnimP = (t - VTIME) / (1. - VTIME);
+        float yStart = mix(0., 1., hAnimP); // Calculate the vertical shift
+        float newUvY = uv.y + yStart; // Adjust the y-coordinate
+        if (newUvX > 1. || newUvX < 0. || newUvY > 1. || newUvY < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(newUvX, newUvY));
+        }
+    }
+}

package/PosterPacker/tools/geniePakcer/genieLeft.glsl

@@ -0,0 +1,50 @@
+#define VTIME 0.3
+
+float yPoint(float y0, float y1, float x) {
+    float a = 2. * (y0 - y1);
+    float b = 3. * (y1 - y0);
+    //float c. = 0.;
+    float d = y0;
+    return a * x * x * x + b * x * x + d;
+}
+
+float remap2(float uv, float inputLow, float inputHigh, float outputLow, float outputHigh){
+    float t = (uv - inputLow)/(inputHigh - inputLow);
+    float final = mix(outputLow,outputHigh,t);
+    return final;
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    // Normalized pixel coordinates (from 0 to 1)
+    vec2 uv = fragCoord/iResolution.xy;
+    float t = ${myTime} ;    
+    // float t = abs(sin(iTime));
+    //v animation
+    if (t < VTIME) {
+        float vAnimP = (t) / VTIME;
+        float top = mix(1.0, ${RANGE_1}, vAnimP);
+        float bottom = mix(0.0, ${RANGE_2}, vAnimP);
+        float yTop = yPoint(top, 1., uv.x);
+        float yBottom = yPoint(bottom, 0., uv.x);
+        float newUvY = remap2(uv.y, yBottom, yTop, 0.0, 1.0);
+        if (newUvY > 1. || newUvY < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(uv.x, newUvY));
+        }
+    } else {
+        //h animation
+        float yTop = yPoint(${RANGE_1}, 1., uv.x);
+        float yBottom = yPoint(${RANGE_2}, 0., uv.x);
+        float newUvY = remap2(uv.y, yBottom, yTop, 0.0, 1.0);
+        float hAnimP = (t - VTIME) / (1. - VTIME);
+        float xStart = mix(0., 1., hAnimP);
+        float newUvX = uv.x + xStart;
+        if (newUvY > 1. || newUvY < 0. || newUvX > 1. || newUvY < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(newUvX, newUvY));
+        }
+    }
+}

package/PosterPacker/tools/geniePakcer/genieRight.glsl

@@ -0,0 +1,57 @@
+#define VTIME 0.3
+
+float yPoint(float y0, float y1, float x) {
+    float a = 2. * (y1 - y0); // 交换 y0 和 y1
+    float b = 3. * (y0 - y1);
+     float d = y1; // 交换 y0 和 y1
+    return a * x * x * x + b * x * x + d;
+}
+
+float remap2(float uv, float inputLow, float inputHigh, float outputLow, float outputHigh){
+    float t = (uv - inputLow)/(inputHigh - inputLow);
+    float final = mix(outputLow,outputHigh,t);
+    return final;
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    // Normalized pixel coordinates (from 0 to 1)
+    vec2 uv = fragCoord/iResolution.xy;
+    float t = ${myTime} ;    
+    // float t = abs(sin(iTime));
+    //v animation
+    if (t < VTIME) {
+    // 垂直动画
+    float vAnimP = (t) / VTIME;
+    float top = mix(1.0, ${RANGE_1}, vAnimP);
+    float bottom = mix(0.0, ${RANGE_2}, vAnimP);
+    float yTop = yPoint(top, 1., uv.x);
+    float yBottom = yPoint(bottom, 0., uv.x);
+    float newUvY = remap2(uv.y, yBottom, yTop, 0.0, 1.0);
+    if (newUvY > 1. || newUvY < 0.) {
+        fragColor = vec4(0.);
+    } else {
+        fragColor = jsvTexture2D(iChannel0, vec2(uv.x, newUvY));
+    }
+} else {
+    // 水平动画
+    float yTop = yPoint(${RANGE_1}, 1., uv.x);
+    float yBottom = yPoint(${RANGE_2}, 0., uv.x);
+    float newUvY = remap2(uv.y, yBottom, yTop, 0.0, 1.0);
+    
+    // 水平收缩动画的进度
+    float hAnimP = (t - VTIME) / (1. - VTIME);
+    
+    // 从左到右收缩效果，xStart 从 0 渐变到 1
+    float xStart = mix(0., 1., hAnimP);
+    
+    // 计算新的 UV X
+    float newUvX = uv.x - xStart;
+    // 确保 newUvX 和 newUvY 在合法范围内
+    if (newUvY > 1. || newUvY < 0. || newUvX > 1. || newUvX < 0.) {
+        fragColor = vec4(0.);
+    } else {
+        fragColor = jsvTexture2D(iChannel0, vec2(newUvX, newUvY));
+    }
+}
+}

package/PosterPacker/tools/geniePakcer/genieTop.glsl

@@ -0,0 +1,50 @@
+#define VTIME 0.3
+
+
+float yPoint(float y0, float y1, float x) {
+    float a = 2. * (y1 - y0);
+    float b = 3. * (y0 - y1);
+    float d = y1;
+    return a * x * x * x + b * x * x + d;
+}
+
+float remap2(float uv, float inputLow, float inputHigh, float outputLow, float outputHigh){
+    float t = (uv - inputLow)/(inputHigh - inputLow);
+    float final = mix(outputLow, outputHigh, t);
+    return final;
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+    // Normalized pixel coordinates (from 0 to 1)
+    vec2 uv = fragCoord/iResolution.xy;
+    float t = ${myTime} ;    
+    // float t = abs(sin(iTime));
+    //v animation
+    if (t < VTIME) {
+        float vAnimP = (t) / VTIME;
+        float top = mix(1.0, ${RANGE_1}, vAnimP);
+        float bottom = mix(0.0, ${RANGE_2}, vAnimP);
+        float xTop = yPoint(top, 1., uv.y);
+        float xBottom = yPoint(bottom, 0., uv.y);
+        float newUvX = remap2(uv.x, xBottom, xTop, 0.0, 1.0);
+        if (newUvX > 1. || newUvX < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(newUvX, uv.y));
+        }
+    } else {
+        //h animation
+        float xTop = yPoint(${RANGE_1}, 1., uv.y);
+        float xBottom = yPoint(${RANGE_2}, 0., uv.y);
+        float newUvX = remap2(uv.x, xBottom, xTop, 0.0, 1.0);
+        float hAnimP = (t - VTIME) / (1. - VTIME);
+        float yStart = mix(0., 1., hAnimP); // Calculate the vertical shift
+        float newUvY = uv.y - yStart; // Adjust the y-coordinate for downward animation
+        if (newUvX > 1. || newUvX < 0. || newUvY > 1. || newUvY < 0.) {
+            fragColor = vec4(0.);
+        } else {
+            fragColor = jsvTexture2D(iChannel0, vec2(newUvX, newUvY));
+        }
+    }
+}

package/PosterPacker/tools/particlePacker/Particle.vue

@@ -0,0 +1,71 @@
+<script setup>
+/**
+ * @file  Particle组件说明
+ *   Particle：粒子装饰组件
+ *       props说明:
+ *           @prop {Object}         style      (必填)    组件的基础样式
+ *           @prop {Array<String>}  imgArray   (必填)    传入的粒子数组,每个item是图片的url
+ *
+ */
+import { JsvSpray } from "jsview";
+
+const props = defineProps({
+  style: { type: Object, require: true },
+  imgArray: { type: Array,require: true},
+});
+//粒子图片数组
+const ImgData = [];
+//检查传入的imgArray格式
+if (props.imgArray !== undefined) {
+  if (Array.isArray(props.imgArray)) {
+    props.imgArray.forEach((item, index) => {
+      ImgData.push(item);
+    });
+  } else {
+    console.warn("请传入正确的数组格式");
+  }
+} else {
+  console.error("请传入图片数组");
+}
+//粒子特效配置
+const sprayOk = {
+  type: 1,
+  particleNum: 5,
+  deltaAngle: 0,
+  deltaWidth: props.style.width / 2,
+  deltaHeight: 1,
+  pointSizeMin: 20,
+  pointSizeMax: 30,
+  speedMin: -3,
+  speedMax: -5,
+  lifeMin: 1500,
+  lifeMax: 3000,
+  accelerateX: 0,
+  accelerateY: 0,
+  particleAddSpeed: 0.002,
+  angularVelocityMin: 10,
+  angularVelocityMax: 15,
+  enableFade: false,
+  enableShrink: false,
+};
+</script>
+<template>
+  <div
+    :style="{
+      width: props.style.width,
+      height: props.style.height,
+      left: props.style.left,
+      top: props.style.top,
+      overflow: 'hidden',
+    }"
+  >
+    <jsv-spray
+      v-for="item in ImgData"
+      :key="`item_${item}`"
+      :pointRes="`url(${item})`"
+      :sprayStyle="sprayOk"
+      :ignoreClip="false"
+    />
+  </div>
+</template>
+<style scoped></style>

package/PosterPacker/tools/vortexPacker/Vortex.vue

@@ -0,0 +1,135 @@
+<template>
+  <div :key="keyNum">
+    <jsv-frag-shader-view
+      ref="rWidgetRef"
+      :style="{ left: 100, top: 200, width: props.width, height: props.height }"
+      :duration="rShaderInfo.duration"
+      :shaderStr="rShaderInfo.shader.value"
+      :autoplay="true"
+      :textures="rShaderInfo.textures"
+      :onEnd="rShaderInfo.onEnd"
+    >
+    </jsv-frag-shader-view>
+    <div
+      :style="{
+        width: props.width,
+        height: props.height,
+        left: 100,
+        top: 200,
+      }"
+    >
+      <div
+        :style="{
+          width: 50,
+          height: 50,
+          left: myX * props.width - 25,
+          top: props.height - (myY * props.height + 25),
+          backgroundColor: '#FF1213',
+        }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import vortexShader from "./vortex.glsl?raw";
+import { shallowRef, computed, onMounted, onUnmounted } from "vue";
+import { JsvFragShaderView } from "jsview";
+const props = defineProps({
+  width: { type: Number, require: true },
+  height: { type: Number, require: true },
+  imgUrl: { type: String, require: true },
+  left: { type: Number, default: 0 },
+  top: { type: Number, default: 0 },
+});
+//图片
+const ImagePanda = "https://oss.image.qcast.cn/ai-draw/panda.jpeg";
+//0-1的x和y的坐标值（初始为x和y的中心点）
+let myX = 0.5;
+let myY = 0.5;
+let keyNum = shallowRef(0);
+//ref
+const rWidgetRef = shallowRef();
+let vSTRENGTH = "10.";
+//替换
+let replacedShader = shallowRef(
+  vortexShader
+    .replace(/\$\{myCustomCenterX\}/g, myX)
+    .replace(/\$\{myCustomCenterY\}/g, myY)
+    .replace(/\$\{STRENGTH\}/g, vSTRENGTH)
+);
+console.log(9998, vortexShader);
+
+//随机替换
+const getRandomDecimal = () => {
+  myX = 0.9;
+  myY = 0.1;
+  //根据x轴的位置确定转数
+  if (myX >= 0.8 || myX <= 0.2) {
+    console.log("很小或很大");
+    vSTRENGTH = "40.";
+  } else if (myX > 0.2 <= 0.4) {
+    vSTRENGTH = "30.";
+  } else if (myX >= 0.6 && myX < 0.8) {
+    vSTRENGTH = "30.";
+  } else if (myX > 0.4 && myX < 0.6) {
+    vSTRENGTH = "10.";
+  }
+
+  replacedShader.value = vortexShader
+    .replace(/\$\{myCustomCenterX\}/g, myX)
+    .replace(/\$\{myCustomCenterY\}/g, myY)
+    .replace(/\$\{STRENGTH\}/g, vSTRENGTH);
+  keyNum.value += 1;
+};
+//接收外部设定中心点
+const SetCenter = (x, y) => {
+  myX = x;
+  myY = y;
+  replacedShader.value = vortexShader
+    .replace(/\$\{myCustomCenterX\}/g, myX)
+    .replace(/\$\{myCustomCenterY\}/g, myY);
+  keyNum.value += 1;
+};
+//重新加载动画
+const reloading1 = () => {
+  rWidgetRef.value?.startAnim();
+};
+const rShowShaderView = shallowRef(true);
+//配置
+const cShaderSettings = {
+  name: "vortex",
+  shader: replacedShader,
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: ImagePanda,
+    },
+  ],
+  duration: 3000,
+  onEnd: () => {
+    console.log("flip anim end");
+    rShowShaderView.value = false;
+  },
+};
+
+const rShaderInfo = computed(() => {
+  return cShaderSettings;
+});
+onMounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(true);
+});
+
+onUnmounted(() => {
+  window.JsvCoreApi.enableFpsDisplay(false);
+});
+//向父组件暴露方法
+defineExpose({
+  getRandomDecimal,
+  reloading1,
+  SetCenter,
+});
+</script>
+
+<style lang="scss" scoped></style>

package/PosterPacker/tools/vortexPacker/vortex.glsl

@@ -0,0 +1,37 @@
+#define RANGE 6.
+#define SPEED .5
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = vec2(${myCustomCenterX}, ${myCustomCenterY}) * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = sin(iTime * SPEED);
+
+    //vortex
+  float cTime = ${STRENGTH} * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0, 0.5, 0.6, 1.);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/Preload/App.vue

@@ -131,7 +131,7 @@ setTimeout(() => {
       :style="{
         left: 100,
         top: 350,
-        width: 800,
+        width: 1000,
         height: 800,
         fontSize: 30,
         color: '#000000',

package/ScaleDownNeon/App.vue

@@ -9,19 +9,22 @@
 import { useRouter } from "vue-router";
 const router = useRouter();
 
-const test1 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
-const test2 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
-const test3 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
-const test4 = "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
+const test1 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_1.jpeg)";
+const test2 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_2.jpeg)";
+const test3 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_3.jpeg)";
+const test4 =
+  "url(https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/ScaleDownTest/test_4.jpeg)";
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
   if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    if (window.JsView) {
-      window.JsView.setGlobalConfig({
-        texCache: -1,
-      });
-    }
+    // 关掉TextureCache(通过将waterLevel设置成-1)
+    window.JsvCoreApi.setRenderGlobalConfig({
+      texCache: -1,
+    });
 
     router.go(-1); // 有router时，回退
     return true;
@@ -104,4 +107,4 @@ const style2 = {
 .top250 {
   top: 250;
 }
-</style>
+</style>

package/SceneTransition/App.vue

@@ -18,7 +18,9 @@
       </div>
       <!-- 文字说明 -->
       <div class="textLong" :style="{ left: 20, top: 20 }">
-        {{ "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。" }}
+        {{
+          "操作说明：按【下】键进行随机碎片下落过渡效果。按【上】键进行过渡还原。"
+        }}
       </div>
       <div class="text" :style="{ left: 810, top: 20 }">{{ "素材展示" }}</div>
       <div class="text" :style="{ left: 400, top: 500 }">
@@ -133,8 +135,7 @@ const onKeyDown = (ev) => {
           boxSwitch.value = false;
         }, 1000);
       }
-
-      break;
+      return true;
 
     //按方向键上调用组件的恢复函数
     case 38:
@@ -142,7 +143,7 @@ const onKeyDown = (ev) => {
         control.value.fireNeEvent();
         down.value = false;
       }
-      break;
+      return true;
     default:
       break;
   }

package/ScrollBoxTest/ClipBar.vue

@@ -141,6 +141,7 @@ y=${Math.floor(y)}`
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
     onTouchEnd: () => {
       rPercentDisp.value =
         Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;

package/ScrollBoxTest/NinePatchBar.vue

@@ -161,6 +161,7 @@ y=${Math.floor(y)}`
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
     onTouchEnd: () => {
       rPercentDisp.value =
         Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;

package/ScrollBoxTest/SizeDivBar.vue

@@ -126,6 +126,7 @@ y=${Math.floor(y)}`
 
   // 注册按下抬起的监听
   rPressDetectDiv.value.jsvSetTapListener({
+    onTouchStart: () => {console.log(" touch start")},
     onTouchEnd: () => {
       rPercentDisp.value =
         Math.floor(rJsvScrollBox.value.currentPercent() * 100) / 100;

package/SprayMove/App.vue

@@ -0,0 +1,75 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#0000FF' }">
+    <div v-for="(item, index) in CenterSet">
+      <SprayMove
+        v-if="showArray[index]"
+        :center="item.center"
+        :color="item.color"
+        :num="item.num"
+      ></SprayMove>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import SprayMove from "./SprayMove.vue";
+import { onMounted, reactive } from "vue";
+
+//随机数(6-12)
+const getRandomNumber = (min = 6, max = 12) => {
+  const result = Math.floor(Math.random() * (max - min + 1)) + min;
+  return result;
+};
+//组件配置
+const CenterSet = [
+  {
+    center: { x: 100, y: 100 },
+    num: getRandomNumber(),
+    color: "#FFFF00",
+  },
+  {
+    center: { x: 200, y: 500 },
+    num: getRandomNumber(),
+    color: "#00FF00",
+  },
+  {
+    center: { x: 820, y: 200 },
+    num: getRandomNumber(),
+    color: "#FFA500",
+  },
+  {
+    center: { x: 900, y: 500 },
+    num: getRandomNumber(),
+    color: "#FF0000",
+  },
+  {
+    center: { x: 500, y: 320 },
+    num: getRandomNumber(),
+    color: "#FFFFFF",
+  },
+];
+//定时器控制实现烟花绚烂效果
+const showArray = reactive([]);
+CenterSet.forEach((item, index) => {
+  showArray.push(false);
+});
+showArray[0] = true;
+console.log(showArray);
+
+const timer = { id: -1 };
+
+onMounted(() => {
+  timer.id = setInterval(() => {
+    const index = showArray.indexOf(false); // 找到第一个 false 的索引
+    if (index !== -1) {
+      showArray[index] = true; // 将第一个 false 改为 true
+      console.log(showArray);
+    } else {
+      // 如果数组内所有的 false 都变为 true，清除定时器
+      clearInterval(timer.id);
+    }
+  }, 1000); // 每 1.5 秒执行一次
+});
+</script>
+
+<style lang="scss" scoped></style>