feat(image-viewer): 优化preview

Author: novlan1

src/image-viewer/getFixScaleEleTransPosition.ts

@@ -2,7 +2,8 @@ import { getClientSize } from './util';
 
 function fixPoint(key: 'x' | 'y', start: number, width: number, clientWidth: number) {
   const startAddWidth = start + width;
-  const offsetStart = (width - clientWidth) / 2;
+  const offsetStart = key === 'x' ? (width - clientWidth) / 2 : 0;
+  const offsetEnd = key === 'x' ? -offsetStart : clientWidth - width;
 
   if (width > clientWidth) {
     if (start > 0) {
@@ -17,7 +18,7 @@ function fixPoint(key: 'x' | 'y', start: number, width: number, clientWidth: num
     }
   } else if (start < 0 || startAddWidth > clientWidth) {
     return {
-      [key]: start < 0 ? offsetStart : -offsetStart,
+      [key]: start < 0 ? offsetStart : offsetEnd,
     };
   }
   return {};

src/image-viewer/image-viewer.tsx

@@ -159,7 +159,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (props) => {
                   imgRefs.current[index] = node;
                 }}
                 style={{
-                  transform: `matrix(${transform.scale}, 0, 0, ${transform.scale}, ${transform.x}, 0)`,
+                  transform: `matrix(${transform.scale}, 0, 0, ${transform.scale}, ${transform.x}, ${transform.y})`,
                   transitionDuration: isTouching ? '0s' : '.3s',
                 }}
                 className={`${imageViewerClass}__img`}