From 94a24dcbc81312797a6cf25ecdfeabef76d7aa69 Mon Sep 17 00:00:00 2001
From: zwgwf <134276765+zwgwf@users.noreply.github.com>
Date: Sat, 3 Aug 2024 20:08:08 +0800
Subject: [PATCH] refactor(components): [image-viewer] optimise translate calc
 method (#13157)

* Use trigonometric functions to calculate translate, which can support any angle
---
 .../image-viewer/src/image-viewer.vue         | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue
index 0bd535c0d0..1b938bde6e 100644
--- a/packages/components/image-viewer/src/image-viewer.vue
+++ b/packages/components/image-viewer/src/image-viewer.vue
@@ -178,20 +178,11 @@ const imgStyle = computed(() => {
   let translateX = offsetX / scale
   let translateY = offsetY / scale
 
-  switch (deg % 360) {
-    case 90:
-    case -270:
-      ;[translateX, translateY] = [translateY, -translateX]
-      break
-    case 180:
-    case -180:
-      ;[translateX, translateY] = [-translateX, -translateY]
-      break
-    case 270:
-    case -90:
-      ;[translateX, translateY] = [-translateY, translateX]
-      break
-  }
+  const radian = (deg * Math.PI) / 180
+  const cosRadian = Math.cos(radian)
+  const sinRadian = Math.sin(radian)
+  translateX = translateX * cosRadian + translateY * sinRadian
+  translateY = translateY * cosRadian - (offsetX / scale) * sinRadian
 
   const style: CSSProperties = {
     transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,