@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.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,59 @@
+<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({
+  /**
+   * 控制是否开启灰色滤镜
+   * @type {Boolean}
+   */
+  open: {
+    type: Boolean,
+  },
+  /**
+   * 组件宽度
+   * @type {Number}
+   */
+  width: {
+    type: Number,
+  },
+  /**
+   * 组件高度
+   * @type {Number}
+   */
+  height: {
+    type: Number,
+  },
+  /**
+   * 距离左侧的位置
+   * @type {Number}
+   */
+  left: {
+    type: Number,
+  },
+  /**
+   * 距离顶部的位置
+   * @type {Number}
+   */
+  top: {
+    type: Number,
+  }
+});
+
+const filterType = shallowRef(props.open ? "gray-down" : null);
+
+// 监听open属性变化更新滤镜类型
+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,142 @@
+<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({
+  /**
+   * 拼图遮罩配置文件的URL
+   * @type {String}
+   * @description 配置文件格式：{ pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}] }
+   *              注意：mask的图片资源需要和json配置文件放在同目录下
+   */
+  configUrl: {
+    type: String,
+  },
+  
+  /**
+   * 组件显示尺寸
+   * @type {Object}
+   * @property {number} width - 组件宽度
+   * @property {number} height - 组件高度
+   */
+  size: {
+    type: Object,
+  },
+  
+  /**
+   * 碎片显示控制数组
+   * @type {Array<number>}
+   * @description 数组元素值为0表示隐藏对应碎片，1表示显示对应碎片
+   *              数组索引对应maskConfig的索引
+   */
+  displaySetting: {
+    type: Array,
+  },
+  
+  /**
+   * 底图信息
+   * @type {Object}
+   * @property {string} src - 图片URL
+   * @property {number} width - 图片原始宽度
+   * @property {number} height - 图片原始高度
+   */
+  imgInfo: {
+    type: Object,
+  },
+  
+  /**
+   * 描边效果图片URL
+   * @type {String}
+   */
+  strokeSrc: {
+    type: String,
+  },
+});
+const showPreload = shallowRef(false);
+const showComponent = shallowRef(false);
+
+const preloadList = [];
+const maskConfig = [];
+
+/**
+ * 预加载完成回调
+ */
+function preloadDone() {
+  showComponent.value = true;
+}
+
+/**
+ * 准备资源加载
+ * @description 执行流程：
+ * 1. 加载底图和描边图
+ * 2. 获取遮罩配置文件
+ * 3. 构建预加载列表
+ * 4. 显示预加载组件
+ */
+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,118 @@
+<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";
+
+/**
+ * 拼图单一片组件
+ */
+const props = defineProps({
+  /** 
+   * @type {String} 拼图配置文件URL
+   * @description 拼图配置文件地址，格式为JSON对象包含pieces数组
+   * @example { 
+   *   pieces: [
+   *     {file: "piece1.png", left: 0, top: 0, width: 100, height: 100}
+   *   ]
+   * }
+   */
+  configUrl: {
+    type: String,
+  },
+  
+  /** 
+   * @type {Number} 当前显示的拼图片索引
+   * @description 指定要显示的拼图片在pieces数组中的位置
+   * @example 0 表示显示第一个拼图片
+   */
+  pieceIndex: {
+    type: Number,
+  },
+  
+  /** 
+   * @type {Object} 容器尺寸
+   * @description 包含width和height属性的对象，用于调整拼图片显示尺寸
+   * @example { width: 300, height: 200 }
+   */
+  size: {
+    type: Object,
+  },
+  
+  /** 
+   * @type {Object} 图片信息
+   * @description 包含图片源和原始尺寸的对象
+   * @example { 
+   *   src: "image.jpg",
+   *   width: 1920,
+   *   height: 1080 
+   * }
+   */
+  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/LongChatBox/App.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from "vue";
+import LongChat from "./LongChat.vue";
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#666',
+    }"
+  >
+    <div
+      :style="{
+        top: 50,
+        width: 1280,
+        height: 600,
+        overflow: 'hidden',
+      }"
+    >
+      <LongChat />
+    </div>
+    <div
+      :style="{
+        width: 1280,
+        height: 50,
+        backgroundColor: '#666',
+        fontSize: 30,
+        color: '#fff',
+      }"
+    >
+      按ok键开始生成, 按上下键滚动
+    </div>
+  </div>
+</template>