refactor(image-viewer): 优化align配置长图滚动范围设置 (#1442)

* refactor(image-viewer): 优化align配置长图滚动范围设置 * fix(image-viewer): 修复图片scaled时并且align为start和end时滚动区域问题
Tencent · Jun 12, 2024 · 529c560 · 529c560
1 parent a1cbc94
commit 529c560
Showing 1 changed file with 35 additions and 5 deletions.
diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -151,9 +151,39 @@ export default defineComponent({
 
     const getMaxDraggedY = (index: number) => {
       const rootOffsetHeight = rootRef.value?.offsetHeight || 0;
-      const currentImageScaledHeight = state.scale * (imagesSize?.[index]?.height || 0);
-      if (currentImageScaledHeight <= rootOffsetHeight) return 0;
-      return Math.max(0, (currentImageScaledHeight - rootOffsetHeight) / 2);
+      // 当前图片高度
+      const currentImageHeight = imagesSize?.[index]?.height || 0;
+      // 当前图片Scaled后总高度
+      const currentImageScaledHeight = state.scale * currentImageHeight;
+      // 当前图片Scaled后总高度与原图片高度差值的一半，作为图片Scaled后top和bottom的增量(scale是以图片中心点进行的，align为start和end时会影响)
+      const halfScaleHeight = (currentImageScaledHeight - currentImageHeight) / 2;
+      if (currentImageScaledHeight <= rootOffsetHeight) {
+        return {
+          top: 0,
+          bottom: 0,
+        };
+      }
+      // 图片和外层root元素高度差
+      const diffHeight = currentImageScaledHeight - rootOffsetHeight;
+      const centerDraggedY = diffHeight / 2;
+      // 图片align配置对应的滚动区域
+      const alignmentDraggedY = {
+        start: {
+          top: -diffHeight + halfScaleHeight,
+          bottom: halfScaleHeight,
+        },
+        center: {
+          top: -centerDraggedY,
+          bottom: centerDraggedY,
+        },
+        end: {
+          top: -halfScaleHeight,
+          bottom: diffHeight - halfScaleHeight,
+        },
+      };
+      // 当前图片align值
+      const alignment = imageInfoList.value[index]?.image?.align || 'center';
+      return alignmentDraggedY[alignment];
     };
 
     const setScale = (scale: number) => {
@@ -333,9 +363,9 @@ export default defineComponent({
                   from: () => [state.draggedX, state.draggedY],
                   pointer: { touch: true },
                   bounds: () => ({
-                    top: -getMaxDraggedY(index),
+                    top: getMaxDraggedY(index).top,
                     right: getMaxDraggedX(),
-                    bottom: getMaxDraggedY(index),
+                    bottom: getMaxDraggedY(index).bottom,
                     left: -getMaxDraggedX(),
                   }),
                 },