Browse Source

feat: 长图模式

MinJieLiu 5 years ago
parent
commit
070a080fea
5 changed files with 26 additions and 10 deletions
  1. BIN
      example/src/4.jpg
  2. BIN
      example/src/4.png
  3. 3 0
      src/PhotoView.less
  4. 1 1
      src/PhotoView.tsx
  5. 22 9
      src/utils/getSuitableImageSize.ts

BIN
example/src/4.jpg


BIN
example/src/4.png


+ 3 - 0
src/PhotoView.less

@@ -44,6 +44,9 @@
     overflow: hidden;
   }
 
+  &__PhotoBox {
+  }
+
   &__PhotoMask {
     position: absolute;
     top: 0;

+ 1 - 1
src/PhotoView.tsx

@@ -455,7 +455,7 @@ export default class PhotoView extends React.Component<IPhotoViewProps, typeof i
           onTouchStart={isTouchDevice && isActive ? this.handleMaskTouchStart : undefined}
         />
         <div
-          className={classNames({
+          className={classNames('PhotoView__PhotoBox', {
             PhotoView__animateIn: loaded && showAnimateType === ShowAnimateEnum.In,
             PhotoView__animateOut: loaded && showAnimateType === ShowAnimateEnum.Out,
           })}

+ 22 - 9
src/utils/getSuitableImageSize.ts

@@ -7,32 +7,45 @@ export default function getSuitableImageSize(
 ): {
   width: number;
   height: number;
+  x: number;
+  y: number;
+  scale: number;
 } {
   let width;
   let height;
+  let y = 0;
   const { innerWidth, innerHeight } = window;
+  const autoWidth = (naturalWidth / naturalHeight) * innerHeight;
+  const autoHeight = (naturalHeight / naturalWidth) * innerWidth;
+
   if (naturalWidth < innerWidth && naturalHeight < innerHeight) {
     width = naturalWidth;
     height = naturalHeight;
   } else if (naturalWidth < innerWidth && naturalHeight >= innerHeight) {
-    width = (naturalWidth / naturalHeight) * innerHeight;
+    width = autoWidth;
     height = innerHeight;
   } else if (naturalWidth >= innerWidth && naturalHeight < innerHeight) {
     width = innerWidth;
-    height = (naturalHeight / naturalWidth) * innerWidth;
-  } else if (
-    naturalWidth >= innerWidth &&
-    naturalHeight >= innerHeight &&
-    naturalWidth / naturalHeight > innerWidth / innerHeight
-  ) {
+    height = autoHeight;
+  } else if (naturalWidth / naturalHeight > innerWidth / innerHeight) {
     width = innerWidth;
-    height = (naturalHeight / naturalWidth) * innerWidth;
+    height = autoHeight;
+  }
+  // 长图模式
+  else if (naturalHeight / naturalWidth > 3) {
+    width = innerWidth;
+    height = autoHeight;
+    // 默认定位到顶部区域
+    y = (height - innerHeight) / 2;
   } else {
-    width = (naturalWidth / naturalHeight) * innerHeight;
+    width = autoWidth;
     height = innerHeight;
   }
   return {
     width: Math.floor(width),
     height: Math.floor(height),
+    x: 0,
+    y,
+    scale: 1,
   };
 }