@shijiu/jsview-vue-samples 2.2.373 → 2.3.0

package/DemoForOperator/Genie/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/DemoForOperator/Genie/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/DemoForOperator/Genie/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/DemoForOperator/Genie/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/DemoForOperator/GrayFilter/App.vue

@@ -0,0 +1,51 @@
+<template>
+  <jsv-focus-block autoFocus :onAction="{ onKeyDown }"></jsv-focus-block>
+  <gray-filter
+    :open="openFilter"
+    :left="50"
+    :top="50"
+    :width="400"
+    :height="400"
+  >
+    <div
+      :style="{
+        width: 400,
+        height: 400,
+        backgroundColor: '#00ffff',
+      }"
+    >
+      <img
+        :src="`url(${imageUrl})`"
+        :style="{
+          width: 300,
+          height: 300,
+        }"
+      />
+      <div
+        :style="{
+          top: 320,
+          width: 300,
+          height: 100,
+          color: '#ff0000',
+          fontSize: 30,
+        }"
+      >
+        按OK键切换
+      </div>
+    </div>
+  </gray-filter>
+</template>
+<script setup>
+import GrayFilter from "./GrayFilter.vue";
+import { ref } from "vue";
+
+const imageUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/GrayFilter/App/jpegDemo.jpeg";
+const openFilter = ref(false);
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 13) {
+    openFilter.value = !openFilter.value;
+    return true;
+  }
+  return false;
+};
+</script>

package/DemoForOperator/GrayFilter/GrayFilter.vue

@@ -0,0 +1,38 @@
+<template>
+  <jsv-filter-view :left="left" :top="top" :width="width" :height="height" :filterType="filterType">
+    <slot></slot>
+  </jsv-filter-view>
+</template>
+
+<script setup>
+import { JsvFilterView } from "jsview";
+import { shallowRef, watchEffect } from "vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+  },
+  width: {
+    type: Number,
+  },
+  height: {
+    type: Number,
+  },
+  left: {
+    type: Number,
+  },
+  top: {
+    type: Number,
+  }
+});
+
+const filterType = shallowRef(props.open ? "gray-down" : null);
+
+watchEffect(() => {
+  if (props.open) {
+    filterType.value = "gray-down";
+  } else {
+    filterType.value = null;
+  }
+});
+</script>

package/DemoForOperator/Jigsaw/App.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :style="{width: 1280, height: 720, backgroundColor: '#007788'}"></div>
+  <div
+    :style="{
+      left: 100,
+      top: 100,
+    }"
+  >
+    <JigsawFull
+      :imgInfo="{ src: imageSrc, width: 654, height: 654 }"
+      :strokeSrc="strokeSrc"
+      :size="{
+        width: 327,
+        height: 327,
+      }"
+      :configUrl="jsonSrc"
+      :displaySetting="[1, 0, 1, 1]"
+    />
+  </div>
+
+  <div
+    :style="{
+      left: 300,
+      top: 100,
+    }"
+  >
+    <JigsawSingle
+      :imgInfo="{ src: imageSrc, width: 654, height: 654 }"
+      :size="{
+        width: 327,
+        height: 327,
+      }"
+      :configUrl="jsonSrc"
+      :pieceIndex="1"
+    />
+  </div>
+</template>
+<script setup>
+import JigsawFull from "./JigsawFull.vue";
+import JigsawSingle from "./JigsawSingle.vue";
+
+const jsonSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/config.json";
+const imageSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/php.jpg";
+const strokeSrc = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Jigsaw/App/stroke.png";
+</script>

package/DemoForOperator/Jigsaw/JigsawFull.vue

@@ -0,0 +1,100 @@
+<template>
+  <JsvPreload
+    v-if="showPreload"
+    :preloadList="preloadList"
+    :onPreloadDone="preloadDone"
+  ></JsvPreload>
+
+  <div v-if="showComponent">
+    <div v-for="(item, index) in maskConfig">
+      <jsv-mask-clip-div
+        :key="index"
+        v-if="displaySetting[index] == 1"
+        :style="{
+          top: (item.top * size.width) / imgInfo.width,
+          left: (item.left * size.width) / imgInfo.width,
+          width: (item.width * size.width) / imgInfo.width,
+          height: (item.height * size.width) / imgInfo.width,
+        }"
+        :viewSrc="imgInfo.src"
+        :maskSrc="item.src"
+        :maskLeft="item.left / imgInfo.width"
+        :maskTop="item.top / imgInfo.height"
+        :maskWidth="item.width / imgInfo.width"
+        :maskHeight="item.height / imgInfo.height"
+      />
+    </div>
+  </div>
+  <img
+    :src="strokeSrc"
+    :style="{
+      width: size.width,
+      height: size.height,
+    }"
+  />
+</template>
+
+<script setup>
+import { shallowRef } from "vue";
+import { JsvMaskClipDiv, JsvPreload, buildPreloadInfo } from "jsview";
+
+const props = defineProps({
+  //每一片的配置, 格式 { pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}]}
+  //注意, mask的图片资源和json在同目录下
+  configUrl: {
+    type: String,
+  },
+  size: {
+    type: Object,
+  },
+  //每一片的显示设置, 0表示不显示, 1表示显示
+  displaySetting: {
+    type: Array,
+  },
+  //图片信息, 格式 { src: "", width: 0, height: 0 }
+  imgInfo: {
+    type: Object,
+  },
+  strokeSrc: {
+    type: String,
+  },
+});
+const showPreload = shallowRef(false);
+const showComponent = shallowRef(false);
+
+const preloadList = [];
+const maskConfig = [];
+
+function preloadDone() {
+  showComponent.value = true;
+}
+
+function prepareSrc() {
+  preloadList.push(buildPreloadInfo(props.imgInfo.src));
+  if (props.strokeSrc) {
+    preloadList.push(buildPreloadInfo(props.strokeSrc));
+  }
+  fetch(props.configUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      const lastSlashIndex = props.configUrl.lastIndexOf("/");
+      const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
+      for (let i = 0; i < data.pieces.length; i++) {
+        const url = baseUrl + data.pieces[i].file;
+        preloadList.push(buildPreloadInfo(url));
+        maskConfig.push({
+          src: url,
+          left: data.pieces[i].left,
+          top: data.pieces[i].top,
+          width: data.pieces[i].width,
+          height: data.pieces[i].height,
+        });
+      }
+      showPreload.value = true;
+    })
+    .catch((err) => {
+      console.log("fetch mask config failed", err);
+    });
+}
+prepareSrc();
+</script>

package/DemoForOperator/Jigsaw/JigsawSingle.vue

@@ -0,0 +1,86 @@
+<template>
+  <JsvPreload
+    v-if="showPreload"
+    :preloadList="preloadList"
+    :onPreloadDone="preloadDone"
+  ></JsvPreload>
+
+  <div v-if="showComponent">
+    <jsv-mask-clip-div
+      :style="{
+        top: (maskConfig.top * size.width) / imgInfo.width,
+        left: (maskConfig.left * size.width) / imgInfo.width,
+        width: (maskConfig.width * size.width) / imgInfo.width,
+        height: (maskConfig.height * size.width) / imgInfo.width,
+      }"
+      :viewSrc="imgInfo.src"
+      :maskSrc="maskConfig.src"
+      :maskLeft="maskConfig.left / imgInfo.width"
+      :maskTop="maskConfig.top / imgInfo.height"
+      :maskWidth="maskConfig.width / imgInfo.width"
+      :maskHeight="maskConfig.height / imgInfo.height"
+    />
+  </div>
+</template>
+
+<script setup>
+import { shallowRef } from "vue";
+import { JsvMaskClipDiv, JsvPreload, buildPreloadInfo } from "jsview";
+
+//只显示一片的demo
+const props = defineProps({
+  configUrl: {
+    //每一片的配置, 格式 { pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}]}
+    type: String,
+  },
+  pieceIndex: {
+    type: Number,
+  },
+  size: {
+    type: Object,
+  },
+  imgInfo: {
+    type: Object,
+  },
+});
+const showPreload = shallowRef(false);
+const showComponent = shallowRef(false);
+
+const preloadList = [];
+let maskConfig = null;
+
+function preloadDone() {
+  showComponent.value = true;
+}
+
+function prepareSrc() {
+  preloadList.push(buildPreloadInfo(props.imgInfo.src));
+  if (props.strokeSrc) {
+    preloadList.push(buildPreloadInfo(props.strokeSrc));
+  }
+  fetch(props.configUrl)
+    .then((res) => res.json())
+    .then((data) => {
+      const lastSlashIndex = props.configUrl.lastIndexOf("/");
+      const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
+      if (data.pieces[props.pieceIndex]) {
+        const url = baseUrl + data.pieces[props.pieceIndex].file;
+        preloadList.push(buildPreloadInfo(url));
+        maskConfig = {
+          src: url,
+          left: data.pieces[props.pieceIndex].left,
+          top: data.pieces[props.pieceIndex].top,
+          width: data.pieces[props.pieceIndex].width,
+          height: data.pieces[props.pieceIndex].height,
+        };
+        showPreload.value = true;
+      } else {
+        console.error("pieceIndex out of range", data, props.pieceIndex);
+      }
+    })
+    .catch((err) => {
+      console.log("fetch mask config failed", err);
+    });
+}
+prepareSrc();
+</script>

package/DemoForOperator/Particle/App.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#000000aa',
+    }"
+  ></div>
+  <div
+    :style="{
+      top: 50,
+      width: 1280,
+      height: 100,
+      fontSize: 30,
+      color: '#ffffff',
+      textAlign: 'center',
+    }"
+  >
+    按OK键爆炸效果
+  </div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  ></jsv-focus-block>
+  <DropParticle
+    :urlList="urlList"
+    :layout="{
+      width: 300,
+      height: 720,
+    }"
+    numLevel="high"
+    sprayLevel="middle"
+  />
+
+  <ExplodeParticle
+    ref="explodeRef"
+    :layout="{
+      left: 615,
+      top: 300,
+      width: 10,
+      height: 10,
+    }"
+    :urlList="urlList"
+    numLevel="high"
+  />
+</template>
+
+<script setup>
+import DropParticle from "./Drop/DropParticle.vue";
+import ExplodeParticle from "./Explode/ExplodeParticle.vue";
+import { shallowRef } from "vue";
+
+const star1 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/redStar.png";
+const star2 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/yellowStar.png";
+const star3 = "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsViewFrameworkDemo/banger/purpleStar.png";
+const urlList = [star1, star2, star3];
+
+const explodeRef = shallowRef();
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    explodeRef.value?.start();
+    return true;
+  }
+  return false;
+}
+</script>