Merge pull request #2407 from DouyinFE/fix/ImagecustomContainer

fix: Fixed the issue of abnormal scaling behavior of the Image compon…
DouyinFE · Aug 12, 2024 · 32acd88 · 32acd88
2 parents 55bd845 + 5c82888
commit 32acd88
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/packages/semi-foundation/image/previewImageFoundation.ts b/packages/semi-foundation/image/previewImageFoundation.ts
@@ -209,23 +209,28 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
         };
 
         if (e && imageDOM && e.target === imageDOM) {
-            const { x: offsetX, y: offsetY } = this.calcBoundingRectMouseOffset({
-                width,
-                height,
-                offset: {
-                    x: e.offsetX,
-                    y: e.offsetY
-                },
-                rotation
-            });
-
-            const imageNewCenterX = e.clientX + (imageBound.width / 2 - offsetX) * changeScale;
-            const imageNewCenterY = e.clientY + (imageBound.height / 2 - offsetY) * changeScale;
-            const containerCenterX = this.containerWidth / 2;
-            const containerCenterY = this.containerHeight / 2;
-
-            newTranslateX = imageNewCenterX - containerCenterX;
-            newTranslateY = imageNewCenterY - containerCenterY;
+            let angle = rotation % 360;
+            angle < 0 && (angle = 360 + angle);
+            switch (angle) {
+                case 0:
+                    newTranslateX = (e.offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.x;
+                    newTranslateY = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.y;
+                    break;
+                case 90:
+                    newTranslateX = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.x;
+                    newTranslateY = (e.offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.y;
+                    break;
+                case 180:
+                    newTranslateX = (0.5 * width - e.offsetX) * (1 - newZoom / currZoom) + translate.x;
+                    newTranslateY = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.y;
+                    break;
+                case 270:
+                    newTranslateX = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.x; 
+                    newTranslateY = (0.5 * width - e.offsetX ) * (1 - newZoom / currZoom) + translate.y;
+                    break;
+                default:
+                    break;
+            }
         }
 
         const newTranslate = this.getSafeTranslate(newImageBound.width, newImageBound.height, newTranslateX, newTranslateY);

diff --git a/packages/semi-ui/image/_story/image.stories.jsx b/packages/semi-ui/image/_story/image.stories.jsx
@@ -468,6 +468,7 @@ export const CustomContainer = () => {
                 style={{ 
                     height: 400, 
                     position: "relative",
+                    margin: '100px 200px',
                 }} 
             >
                 <ImagePreview