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

package/DemoForOperator/Genie/geniePakcer/GenieTools.ts

@@ -0,0 +1,463 @@
+import genieLeft from "./genieLeft.glsl?raw";
+import genieRight from "./genieRight.glsl?raw";
+import genieBottom from "./genieBottom.glsl?raw";
+import genieTop from "./genieTop.glsl?raw";
+
+export default function buildGenieAnimation(position: {x: number, y: number}, width: number, height: number, direction: string) {
+    let vDistanceX:number = 0;
+    let vDistanceY:number = 0;
+    let vRelease:string = "";
+    let vContract:string = "";
+    let vShaderMode:string = "";
+    let vRange1:number = 0;
+    let vRange2:number = 0;
+    let vTransformScale:number = 1;
+    let vTransformDirection:string = "";
+    const keyFrameRandom: number = Math.floor(Math.random() * 100000) + 1;
+    const KeyFrameReleaseName = `Genie-release-${keyFrameRandom}`;
+    const KeyFrameContractName = `Genie-contract-${keyFrameRandom}`;
+
+    //在组件外部的八种情况
+    //左上方
+    if (position.x < 0 && position.y < 0) {
+        vDistanceX = position.x;
+        vDistanceY = position.y;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70%{
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                    }
+                    80% {
+                transform: translate3d(0, 0, 0);
+                }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+        if (direction == "horizontal") {
+            vShaderMode = genieLeft;
+            vRange1 = 1 - 1 / height;
+            vRange2 = 1 - 2 / height;
+        } else if (direction == "vertical") {
+            vShaderMode = genieTop;
+            vRange1 = 1 / width;
+            vRange2 = 2 / width;
+        }
+    } else if (position.x < width && position.y < 0) {
+        //正上方
+        vDistanceY = position.y;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+        
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d($0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d($0, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, ${vDistanceY}, 0);
+                }
+                }`;
+    
+        vShaderMode = genieTop;
+    
+        vRange1 = (position.x + 1) / width;
+        vRange2 = position.x / width;
+    } else if (position.x > width && position.y < 0) {
+        //右上角
+        if (direction == "horizontal") {
+            vDistanceX = position.x - width;
+            vDistanceY = position.y;
+            vShaderMode = genieRight;
+            vRange1 = 1 - 1 / height;
+            vRange2 = 1 - 2 / height;
+            } else if (direction == "vertical") {
+            vDistanceX = position.x - width;
+            vDistanceY = position.y;
+            vShaderMode = genieTop;
+            vRange2 = 1 - 2 / width;
+            vRange1 = 1 - 1 / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else if (
+        position.x < 0 &&
+        position.y > 0 &&
+        position.y <= height
+    ) {
+        //正左边
+        vDistanceX = position.x;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX},0, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                }`;
+    
+        vShaderMode = genieLeft;
+    
+        vRange2 = 1 - position.y / height;
+        vRange1 = 1 - (position.y + 1) / height;
+    } else if (
+        position.x > width &&
+        position.y > 0 &&
+        position.y <= height
+    ) {
+        //正右边
+        vDistanceX = position.x - width;
+        vDistanceY = position.y;
+        vShaderMode = genieRight;
+        vRange1 = 1 - position.y / height;
+        vRange2 = 1 - (1 + position.y) / height;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX},0, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX},0, 0);
+                }
+                }`;
+    } else if (position.x < 0 && position.y > height) {
+        //左下方
+        if (direction == "horizontal") {
+        vDistanceX = position.x;
+        vDistanceY = position.y - height;
+        vShaderMode = genieLeft;
+        vRange2 = 1 / height;
+        vRange1 = (1 + 1) / height;
+        } else if (direction == "vertical") {
+        vDistanceX = position.x;
+        vDistanceY = position.y - height;
+        vShaderMode = genieBottom;
+        vRange1 = 1 / width;
+        vRange2 = (1 + 1) / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else if (
+        position.x > 0 &&
+        position.x < width &&
+        position.y > height
+    ) {
+        //正下方
+        vDistanceY = position.y - height;
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(0,${vDistanceY}, 0);
+                } 
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d($0, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, ${vDistanceY}, 0);
+                }
+                }`;
+    
+        vShaderMode = genieBottom;
+    
+        vRange1 = position.x / width;
+        vRange2 = (position.x - 1) / width;
+    } else if (position.x > width && position.y > height) {
+        //右下方
+        if (direction == "horizontal") {
+        vDistanceX = position.x - width;
+        vDistanceY = position.y - height;
+        vShaderMode = genieRight;
+        vRange2 = 1 / height;
+        vRange1 = (1 + 1) / height;
+        } else if (direction == "vertical") {
+        vDistanceX = position.x - width;
+        vDistanceY = position.y - height;
+        vShaderMode = genieBottom;
+        vRange2 = 1 - 2 / width;
+        vRange1 = 1 - 1 / width;
+        }
+        //释放的动画
+        vRelease = `@keyframes ${KeyFrameReleaseName} {
+                0% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    70% {
+                    transform: translate3d(${vDistanceX},${vDistanceY}, 0);
+                }
+                    80%{
+                    transform: translate3d(0, 0, 0);
+                    }
+                    100% {
+                    transform: translate3d(0, 0, 0);
+                }
+                }`;
+        vContract = `@keyframes ${KeyFrameContractName} {
+                0% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    30% {
+                    transform: translate3d(0, 0, 0);
+                }
+                    40%{
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                    }
+                    100% {
+                    transform: translate3d(${vDistanceX}, ${vDistanceY}, 0);
+                }
+                }`;
+    } else {
+        //在组件内
+        //根据传入进来的方向和中心点位置确定缩放动画
+        if (direction == "vertical") {
+            if (position.y < height / 2) {
+                vTransformDirection = "bottom center";
+                vShaderMode = genieTop;
+                vTransformScale = 1 - position.y / height;
+            } else {
+                vTransformDirection = "top center";
+                vShaderMode = genieBottom;
+                vTransformScale = position.y / height;
+            }
+            vRange1 = position.x / width;
+            vRange2 = (position.x - 1) / width;
+            } else if (direction == "horizontal") {
+            //解析坐标位置是否要进行移动动画
+            if (position.x < width / 2) {
+                vTransformDirection = "center right";
+                vShaderMode = genieLeft;
+                vTransformScale = 1 - position.x / width;
+            } else {
+                vTransformDirection = "center left";
+                vShaderMode = genieRight;
+                vTransformScale = position.x / width;
+            }
+            vRange1 = 1 - position.y / height;
+            vRange2 = 1 - (position.y + 1) / height;
+        }
+    
+        if (direction == "horizontal") {
+            //   //收的动画
+            vContract = `@keyframes ${KeyFrameContractName} {
+                        0% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        30% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+            //   //释放的动画
+            vRelease = `@keyframes ${KeyFrameReleaseName} {
+                        0% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        70% {
+                        transform: scale3d(${vTransformScale}, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+        } else if (direction == "vertical") {
+            //收的动画
+            vContract = `@keyframes ${KeyFrameContractName} {
+                        0% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        30% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, ${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+            //释放的动画
+            vRelease = `@keyframes ${KeyFrameReleaseName} {
+                        0% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        70% {
+                        transform: scale3d(1,${vTransformScale}, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                        100% {
+                        transform: scale3d(1, 1, 1);
+                        transform-origin:${vTransformDirection};
+                        }
+                    }`;
+        }
+    }
+
+    const cLocalizationShader = vShaderMode
+        .replace(/\$\{RANGE_1\}/g, vRange1.toString())
+        .replace(/\$\{RANGE_2\}/g, vRange2.toString());
+
+    return {
+        vRelease,
+        vContract,
+        vShader: cLocalizationShader,
+        vTransformDirection,
+        KeyFrameReleaseName,
+        KeyFrameContractName,
+    };
+}
+

package/DemoForOperator/GrayFilter/GrayFilter.vue

@@ -9,18 +9,38 @@ 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,
   }
@@ -28,6 +48,7 @@ const props = defineProps({
 
 const filterType = shallowRef(props.open ? "gray-down" : null);
 
+// 监听open属性变化更新滤镜类型
 watchEffect(() => {
   if (props.open) {
     filterType.value = "gray-down";

package/DemoForOperator/Jigsaw/JigsawFull.vue

@@ -39,22 +39,51 @@ 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在同目录下
+  /**
+   * 拼图遮罩配置文件的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,
   },
-  //每一片的显示设置, 0表示不显示, 1表示显示
+  
+  /**
+   * 碎片显示控制数组
+   * @type {Array<number>}
+   * @description 数组元素值为0表示隐藏对应碎片，1表示显示对应碎片
+   *              数组索引对应maskConfig的索引
+   */
   displaySetting: {
     type: Array,
   },
-  //图片信息, 格式 { src: "", width: 0, height: 0 }
+  
+  /**
+   * 底图信息
+   * @type {Object}
+   * @property {string} src - 图片URL
+   * @property {number} width - 图片原始宽度
+   * @property {number} height - 图片原始高度
+   */
   imgInfo: {
     type: Object,
   },
+  
+  /**
+   * 描边效果图片URL
+   * @type {String}
+   */
   strokeSrc: {
     type: String,
   },
@@ -65,18 +94,33 @@ 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) => {
+  
+  // samples中未安装axios, 实际项目可以用axios改写
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', props.configUrl);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      const data = JSON.parse(xhr.responseText);
       const lastSlashIndex = props.configUrl.lastIndexOf("/");
       const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
       for (let i = 0; i < data.pieces.length; i++) {
@@ -91,10 +135,13 @@ function prepareSrc() {
         });
       }
       showPreload.value = true;
-    })
-    .catch((err) => {
-      console.log("fetch mask config failed", err);
-    });
+    }
+  };
+  xhr.onerror = function() {
+    console.log("fetch mask config failed", xhr.statusText);
+  };
+  xhr.send();
 }
+
 prepareSrc();
 </script>

package/DemoForOperator/Jigsaw/JigsawSingle.vue

@@ -27,18 +27,50 @@
 import { shallowRef } from "vue";
 import { JsvMaskClipDiv, JsvPreload, buildPreloadInfo } from "jsview";
 
-//只显示一片的demo
+/**
+ * 拼图单一片组件
+ */
 const props = defineProps({
+  /** 
+   * @type {String} 拼图配置文件URL
+   * @description 拼图配置文件地址，格式为JSON对象包含pieces数组
+   * @example { 
+   *   pieces: [
+   *     {file: "piece1.png", left: 0, top: 0, width: 100, height: 100}
+   *   ]
+   * }
+   */
   configUrl: {
-    //每一片的配置, 格式 { pieces: [{file: "", left: 0, top: 0, width: 0, height: 0}]}
     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,
   },
@@ -58,9 +90,13 @@ function prepareSrc() {
   if (props.strokeSrc) {
     preloadList.push(buildPreloadInfo(props.strokeSrc));
   }
-  fetch(props.configUrl)
-    .then((res) => res.json())
-    .then((data) => {
+
+  // samples中未安装axios, 实际项目可以用axios改写
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', props.configUrl);
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      const data = JSON.parse(xhr.responseText);
       const lastSlashIndex = props.configUrl.lastIndexOf("/");
       const baseUrl = props.configUrl.substring(0, lastSlashIndex + 1);
       if (data.pieces[props.pieceIndex]) {
@@ -77,10 +113,12 @@ function prepareSrc() {
       } else {
         console.error("pieceIndex out of range", data, props.pieceIndex);
       }
-    })
-    .catch((err) => {
-      console.log("fetch mask config failed", err);
-    });
+    }
+  };
+  xhr.onerror = function() {
+    console.log("fetch mask config failed", xhr.statusText);
+  };
+  xhr.send();
 }
 prepareSrc();
 </script>