@shijiu/jsview-vue 2.1.448-test.0 → 2.1.482-test.0

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -1,18 +1,23 @@
 <!--
  * 【模块 export 内容】
  *  JsvSpriteAnim: 描画动态的精灵图(雪碧图)
+ *                 注意: PC模拟环境中，动画执行完成如果在onAnimEnd立刻进行不显示的话，可能闪一帧残留图像，在盒子不会有这个问题
  *      prop说明:
  *          spriteInfo {object}  (必需)精灵图配置信息
  *               { frames: [
  *                   {
- *                       source:{x, y, w, h},
- *                       target:{x, y, w, h},
+ *                       source:{x, y, w, h}, // 切片的绘制位置，来源于美术工具导出
+ *                       target:{x, y, w, h}, // 切片在精灵图中的位置，来源于美术工具导出
  *                   },
  *                   ...
  *                 ],
- *                 meta:{w,h}
+ *                 meta:{w,h} // 整张精灵图的尺寸，来源于美术工具导出
  *               }
- *      viewSize {object}  (可选){w:0, h:0}, 从SpriteInfo中提炼的最大子图内容显示尺寸
+ *      viewSize {object}  (可选){w:xxx, h:xxx},显示尺寸定制, 不设置则从SpriteInfo中提炼的最大子图内容显示尺寸
+ *                          可以只只设定width或者height，另一边则自适应
+ *                          因为精灵图的尺寸都是精灵图内容单图偏移+内容尺寸，所以定制区域后，此区域的显示内容是右下对齐的效果
+ *      spriteFrameSize {object} (可选){w:xxxx, h:xxxx},精灵图美术编译前居中显示的图尺寸,用来纠正viewSize设定后的右下对齐成居中
+ *                          一般可以通过JsvSpriteTools.guessOriginSize()来推测值,最好还是来源于美术提供资料
  *      imageUrl {string}  (必需)图片地址，另外，为了减小无效的解析处理，规定只有image的URL变更时才重新解析spriteInfo
  *      duration {float}  (动图必需)动图的时间
  *      onAnimEnd {function} 动图结束回调
@@ -45,6 +50,7 @@ import * as FBuilder from "./FrameBuidler";
 const props = defineProps({
   spriteInfo: Object,
   viewSize: Object,
+  spriteFrameSize: Object,
   imageUrl: String,
   duration: { type: Number, default: 1 },
   onAnimEnd: Function,
@@ -59,6 +65,8 @@ let innerId = shallowRef(0);
 let spriteDuration = shallowRef(props.duration);
 let apiStartEndCallback = null;
 let canvasSize = { width: 0, height: 0 };
+let viewSizeSetStyle = shallowRef({ width: 0, height: 0 });
+
 // 直接影响div的做step动画的style
 let transformStyle = {
   clipStyle: shallowRef({}),
@@ -91,15 +99,25 @@ const _BuildStaticFrame = (targetIndex) => {
     // 初始化静态图缓存
     staticFrameCachedInfo = {
       props: {
-        frameIndex: undefined,
+        source: {
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+        },
       },
       result: null,
     };
   }
 
+  let originCheckSource = staticFrameCachedInfo?.props.source;
+  let checkSource = props.spriteInfo.frames[targetIndex].source;
   if (
     staticFrameCachedInfo.result == null ||
-    staticFrameCachedInfo.props.frameIndex != targetIndex
+    originCheckSource.x != checkSource.x ||
+    originCheckSource.y != checkSource.y ||
+    originCheckSource.w != checkSource.w ||
+    originCheckSource.h != checkSource.h
   ) {
     // 缓存需要变化时，重算单图信息
     let framesLength = props.spriteInfo.frames.length;
@@ -121,7 +139,10 @@ const _BuildStaticFrame = (targetIndex) => {
       props.spriteInfo.meta.size.h
     );
 
-    staticFrameCachedInfo.props.frameIndex = targetIndex;
+    originCheckSource.x = checkSource.x;
+    originCheckSource.y = checkSource.y;
+    originCheckSource.w = checkSource.w;
+    originCheckSource.h = checkSource.h;
     staticFrameCachedInfo.result = spriteInfo;
   }
 
@@ -129,11 +150,6 @@ const _BuildStaticFrame = (targetIndex) => {
 };
 // 创建动图
 const _BuildAnimateFrame = (indexArray) => {
-  if (props.spriteInfo.frames == 1) {
-    // 单帧内容，始终使用静态图
-    return _BuildStaticFrame(0);
-  }
-
   if (!animFrameCachedInfo) {
     // 初始化动态图缓存
     animFrameCachedInfo = {
@@ -169,6 +185,12 @@ const _BuildAnimateFrame = (indexArray) => {
   }
 
   if (!arrayMatch) {
+    if (animFrameCachedInfo.result != null) {
+      // 清理残留的内容
+      FBuilder.expireAnimates(animFrameCachedInfo.result);
+      animFrameCachedInfo.result = null;
+    }
+
     // 解析图片信息
     let newFramesArray;
     if (indexArray == "all") {
@@ -188,23 +210,23 @@ const _BuildAnimateFrame = (indexArray) => {
       }
     }
 
-    if (animFrameCachedInfo.result != null) {
-      // 清理残留的内容
-      FBuilder.expireAnimates(animFrameCachedInfo.result);
-      animFrameCachedInfo.result = null;
-    }
-
-    let spriteInfo = FBuilder.newAnimateFrames(
-      props.imageUrl,
-      newFramesArray,
-      canvasSize.width,
-      canvasSize.height,
-      props.spriteInfo.meta.size.w,
-      props.spriteInfo.meta.size.h
-    );
+    if (props.spriteInfo.frames == 1) {
+      // 单帧内容，始终使用静态图
+      return _BuildStaticFrame(0);
+    } else {
+      // 处理动图
+      let spriteInfo = FBuilder.newAnimateFrames(
+        props.imageUrl,
+        newFramesArray,
+        canvasSize.width,
+        canvasSize.height,
+        props.spriteInfo.meta.size.w,
+        props.spriteInfo.meta.size.h
+      );
 
-    animFrameCachedInfo.props.indexArray = indexArray;
-    animFrameCachedInfo.result = spriteInfo;
+      animFrameCachedInfo.props.indexArray = indexArray;
+      animFrameCachedInfo.result = spriteInfo;
+    }
   }
 
   return animFrameCachedInfo.result;
@@ -224,8 +246,10 @@ const _OnReset = () => {
     // 启动动画
     spriteInfo = _BuildAnimateFrame("all");
     // 注入animation属性
-    spriteInfo.clipStyle.animation = `${spriteInfo.clipKeyFrameName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
-    spriteInfo.transStyle.animation = `${spriteInfo.transKeyFrameName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
+    if (spriteInfo.keyFrameRefName != null) {
+      spriteInfo.clipStyle.animation = `${spriteInfo.clipKeyFrameName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
+      spriteInfo.transStyle.animation = `${spriteInfo.transKeyFrameName} ${spriteDuration.value}s steps(1,end) ${props.loop}`;
+    }
   } else {
     // 展示静图
     spriteInfo = _BuildStaticFrame(0);
@@ -237,27 +261,68 @@ const _OnReset = () => {
 };
 
 // ******** 初始化处理 ********
+// 获取canvasSize
+
 // 获取viewSize
-if (props.viewSize) {
-  canvasSize.width = props.viewSize.w;
-  canvasSize.height = props.viewSize.h;
-} else {
-  // 从frame中提取canvasSize
-  let max_width = 0;
-  let max_height = 0;
-  for (let i = 0; i < props.spriteInfo.frames.length; i++) {
-    const target = props.spriteInfo.frames[i].target;
-    const sprite_with = target.x + target.w;
-    const sprite_height = target.y + target.h;
-    if (sprite_with > max_width) {
-      max_width = sprite_with;
-    }
-    if (sprite_height > max_height) {
-      max_height = sprite_height;
-    }
+// 从frame中提取canvasSize
+let max_width = 0;
+let max_height = 0;
+for (let i = 0; i < props.spriteInfo.frames.length; i++) {
+  const target = props.spriteInfo.frames[i].target;
+  const sprite_with = target.x + target.w;
+  const sprite_height = target.y + target.h;
+  if (sprite_with > max_width) {
+    max_width = sprite_with;
+  }
+  if (sprite_height > max_height) {
+    max_height = sprite_height;
+  }
+}
+canvasSize.width = max_width;
+canvasSize.height = max_height;
+
+// 确定精灵图原图的尺寸
+let spriteFrameSize = {
+  width: canvasSize.width,
+  height: canvasSize.height,
+};
+if (props.spriteFrameSize) {
+  spriteFrameSize.width = props.spriteFrameSize.w;
+  spriteFrameSize.height = props.spriteFrameSize.h;
+}
+viewSizeSetStyle.value.width = spriteFrameSize.width;
+viewSizeSetStyle.value.height = spriteFrameSize.height;
+
+// 设置view尺寸缩放
+if (props.viewSize && (props.viewSize.w || props.viewSize.h)) {
+  let viewDispSize = { widthScale: 1, heightScale: 1 };
+  let viewSize = { width: props.viewSize.w, height: props.viewSize.h };
+  if (!viewSize.width) {
+    // width 无值，由height推断
+    viewSize.width = Math.floor(
+      (viewSize.height * spriteFrameSize.width) / spriteFrameSize.height
+    );
+  } else if (!viewSize.height) {
+    // height 无值，由width推断
+    viewSize.height = Math.floor(
+      (viewSize.width * spriteFrameSize.height) / spriteFrameSize.width
+    );
+  }
+
+  viewDispSize.widthScale = viewSize.width / spriteFrameSize.width;
+  viewDispSize.heightScale = viewSize.height / spriteFrameSize.height;
+  // 忽略较小变化
+  if (viewDispSize.widthScale > 0.99 && viewDispSize.widthScale < 1.01) {
+    viewDispSize.widthScale = 1;
+  }
+  if (viewDispSize.heightScale > 0.99 && viewDispSize.heightScale < 1.01) {
+    viewDispSize.heightScale = 1;
+  }
+  // 有变化才进行scale调整
+  if (viewDispSize.widthScale != 1 || viewDispSize.heightScale != 1) {
+    viewSizeSetStyle.value.transform = `scale3d(${viewDispSize.widthScale}, ${viewDispSize.heightScale}, 1)`;
+    viewSizeSetStyle.value.transformOrigin = "left top";
   }
-  canvasSize.width = max_width;
-  canvasSize.height = max_height;
 }
 
 // 注册prop变化的内容重置
@@ -286,6 +351,11 @@ onUnmounted(() => {
 const onAnimEndDelegate = () => {
   // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
   if (props.onAnimEnd) {
+    if (!window.JsView) {
+      console.log(
+        "JsvSpriteAnim 结束回调时进行隐藏在PC环境会有一帧残留，盒子环境是正常,可忽略这个问题"
+      );
+    }
     props.onAnimEnd();
   }
 
@@ -350,8 +420,10 @@ const op = {
 
     let spriteInfo = _BuildAnimateFrame(indexArray);
     // 注入animation属性
-    spriteInfo.clipStyle.animation = `${spriteInfo.clipKeyFrameName} ${duration}s steps(1,end) ${loopSet}`;
-    spriteInfo.transStyle.animation = `${spriteInfo.transKeyFrameName} ${duration}s steps(1,end) ${loopSet}`;
+    if (spriteInfo.keyFrameRefName != null) {
+      spriteInfo.clipStyle.animation = `${spriteInfo.clipKeyFrameName} ${duration}s steps(1,end) ${loopSet}`;
+      spriteInfo.transStyle.animation = `${spriteInfo.transKeyFrameName} ${duration}s steps(1,end) ${loopSet}`;
+    }
 
     // 设置界面
     _ApplySpriteInfo(spriteInfo);
@@ -436,17 +508,19 @@ defineExpose(op);
 </script>
 
 <template>
-  <div id="clip" :style="transformStyle.clipStyle.value" :key="innerId">
-    <div
-      id="trans"
-      :style="transformStyle.transStyle.value"
-      @animationend="onAnimEndDelegate"
-    >
+  <div :style="{ ...viewSizeSetStyle }">
+    <div id="clip" :style="transformStyle.clipStyle.value" :key="innerId">
       <div
-        id="image"
-        :style="{ ...transformStyle.imageStyle.value, animation: blinkAnim }"
-        @animationend="onBlinkAnimEnd"
-      ></div>
+        id="trans"
+        :style="transformStyle.transStyle.value"
+        @animationend="onAnimEndDelegate"
+      >
+        <div
+          id="image"
+          :style="{ ...transformStyle.imageStyle.value, animation: blinkAnim }"
+          @animationend="onBlinkAnimEnd"
+        ></div>
+      </div>
     </div>
   </div>
 </template>

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteTools.ts

@@ -0,0 +1,26 @@
+let JsvSpriteTools = {
+    /**
+     * guessOriginSize
+     * 从spriteInfo中挑出最大的一张，认为其是居中显示来估算精灵图原画布的尺寸，以此可填写imageOriginSize信息
+     * 
+     * @param {object} spriteInfo  此Canvas画布的宽度
+     * @return {object} 结构体{w:xxx, h:xxx}, 估算出的宽和高
+     */
+    guessOriginSize(spriteInfo: any): object {
+        let maxSize = 0;
+        let guessResult = { w: 0, h: 0 };
+        for (let i = 0; i < spriteInfo.frames.length; i++) {
+            const target = spriteInfo.frames[i].target;
+            const spriteSize = target.w * target.h;
+            if (spriteSize > maxSize) {
+                // 找到最大面积内容，以此为居中推测
+                maxSize = spriteSize;
+                guessResult.w = target.x * 2 + target.w;
+                guessResult.h = target.y * 2 + target.h;
+            }
+        }
+        return guessResult;
+    }
+}
+
+export default JsvSpriteTools;

package/utils/JsViewVueWidget/JsvSpriteAnim/index.js

@@ -1,5 +1,12 @@
 import JsvSpriteAnim from "./JsvSpriteAnim.vue";
 import JsvSpriteLoader from "./JsvSpriteLoader.vue";
 import { SpriteController } from "./SpriteController.js";
+import JsvSpriteTools from "./JsvSpriteTools";
 
-export { JsvSpriteAnim, JsvSpriteLoader, SpriteController };
+export {
+    JsvSpriteAnim as JsvSpriteStatic, // 静图复用Animate，当info内容为单个时则为静图
+    JsvSpriteAnim,
+    JsvSpriteLoader,
+    SpriteController,
+    JsvSpriteTools,
+};

package/utils/JsViewVueWidget/JsvSwiper/JsvSwiper.vue

@@ -272,6 +272,7 @@ export default {
         controllerList[i] = new JsvActorMoveControl();
       }
     }
+    let focusBlock = ref();
     let preOffset = -1;
     let offset = ref(0);
     let focused = ref(false);
@@ -283,6 +284,7 @@ export default {
       timeoutHandler,
       controllerList,
       autoplay: false,
+      focusBlock,
     };
   },
   watch: {
@@ -291,6 +293,9 @@ export default {
     },
   },
   methods: {
+    getFocusBlockRef() {
+      return this.focusBlock;
+    },
     stopAutoplay() {
       this.autoplay = false;
       clearInterval(this.timeoutHandler);
@@ -497,6 +502,7 @@ export default {
     :callback="onBeVisible"
   ></jsv-visible-sensor>
   <jsv-focus-block
+    ref="focusBlock"
     :name="name"
     :style="{
       left: layoutInfo.left,

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -58,7 +58,7 @@
 
 <script setup>
 import { shallowReactive, shallowRef, onBeforeUnmount,reactive } from "vue";
-import { getKeyFramesGroup } from "../../JsViewVueTools/JsvDynamicKeyFrames.js";
+import { getKeyFramesGroup } from "../../JsViewVueTools/JsvDynamicKeyFrames";
 
 const props = defineProps({
   dispNumber: { type: Number, require: true },