From 4363b52e00fb0b460e8058999c536d2df4430dae Mon Sep 17 00:00:00 2001 From: "zhangyumei.0319" Date: Mon, 12 Aug 2024 11:28:48 +0800 Subject: [PATCH 1/2] fix: Fixed the issue of abnormal scaling behavior of the Image component in the case of customContainer --- .../image/previewImageFoundation.ts | 37 ++++++++++--------- .../semi-ui/image/_story/image.stories.jsx | 1 + 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/semi-foundation/image/previewImageFoundation.ts b/packages/semi-foundation/image/previewImageFoundation.ts index d4ef741add..3f464cc261 100644 --- a/packages/semi-foundation/image/previewImageFoundation.ts +++ b/packages/semi-foundation/image/previewImageFoundation.ts @@ -209,23 +209,26 @@ export default class PreviewImageFoundation

, 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; + switch (rotation % 360) { + 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 = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.x; + newTranslateY = (0.5 * width - e.offsetX ) * (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 = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.x; + newTranslateY = (e.offsetX - 0.5 * width) * (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 index e9691d1fa7..8ac4a8f486 100644 --- 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', }} > Date: Mon, 12 Aug 2024 14:12:10 +0800 Subject: [PATCH 2/2] fix: Fixed the issue of abnormal scaling behavior of the Image component in the case of customContainer --- .../image/previewImageFoundation.ts | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/semi-foundation/image/previewImageFoundation.ts b/packages/semi-foundation/image/previewImageFoundation.ts index 3f464cc261..79532b094e 100644 --- a/packages/semi-foundation/image/previewImageFoundation.ts +++ b/packages/semi-foundation/image/previewImageFoundation.ts @@ -209,22 +209,24 @@ export default class PreviewImageFoundation

, S = Record< }; if (e && imageDOM && e.target === imageDOM) { - switch (rotation % 360) { + 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 = (e.offsetY - 0.5 * height) * (1 - newZoom / currZoom) + translate.x; - newTranslateY = (0.5 * width - e.offsetX ) * (1 - newZoom / currZoom) + translate.y; + 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: + 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 = (0.5 * height - e.offsetY) * (1 - newZoom / currZoom) + translate.x; - newTranslateY = (e.offsetX - 0.5 * width) * (1 - newZoom / currZoom) + translate.y; + 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;