From e509b087e255c40e75f80e88a1d9c403809a541e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 24 Sep 2024 16:45:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=203D=E6=97=8B?=
 =?UTF-8?q?=E8=BD=AC=E5=A2=9E=E5=8A=A0=E8=87=AA=E5=8A=A8=E8=BE=B9=E7=95=8C?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/ComponentWrapper.vue                | 17 +++++++++++++++++
 .../data-visualization/canvas/Shape.vue        | 18 ++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 685bdb31ba..d248900c1e 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -228,7 +228,24 @@ const commonBackgroundSvgInner = computed(() => {
 const slotStyle = computed(() => {
   // 3d效果支持
   if (config.value['multiDimensional'] && config.value['multiDimensional']?.enable) {
+    const width = config.value.style.width // 原始元素宽度
+    const height = config.value.style.height // 原始元素高度
+    const rotateX = config.value['multiDimensional'].x // 旋转X角度
+    const rotateY = config.value['multiDimensional'].y // 旋转Y角度
+
+    // 将角度转换为弧度
+    const radX = (rotateX * Math.PI) / 180
+    const radY = (rotateY * Math.PI) / 180
+
+    // 计算旋转后新宽度和高度
+    const newWidth = Math.abs(width * Math.cos(radY)) + Math.abs(height * Math.sin(radX))
+    const newHeight = Math.abs(height * Math.cos(radX)) + Math.abs(width * Math.sin(radY))
+
+    // 计算需要的 padding
+    const paddingX = (newWidth - width) / 2
+    const paddingY = (newHeight - height) / 2
     return {
+      padding: `${paddingY}px ${paddingX}px`,
       transform: `rotateX(${config.value['multiDimensional'].x}deg) rotateY(${config.value['multiDimensional'].y}deg) rotateZ(${config.value['multiDimensional'].z}deg)`
     }
   } else {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 7842c9bb87..d8d1cfc385 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -988,7 +988,25 @@ const tabMoveInCheck = async () => {
 const slotStyle = computed(() => {
   // 3d效果支持
   if (element.value['multiDimensional'] && element.value['multiDimensional']?.enable) {
+    const width = defaultStyle.value.width // 原始元素宽度
+    const height = defaultStyle.value.height // 原始元素高度
+    const rotateX = element.value['multiDimensional'].x // 旋转X角度
+    const rotateY = element.value['multiDimensional'].y // 旋转Y角度
+
+    // 将角度转换为弧度
+    const radX = (rotateX * Math.PI) / 180
+    const radY = (rotateY * Math.PI) / 180
+
+    // 计算旋转后新宽度和高度
+    const newWidth = Math.abs(width * Math.cos(radY)) + Math.abs(height * Math.sin(radX))
+    const newHeight = Math.abs(height * Math.cos(radX)) + Math.abs(width * Math.sin(radY))
+
+    // 计算需要的 padding
+    const paddingX = (newWidth - width) / 2
+    const paddingY = (newHeight - height) / 2
+
     return {
+      padding: `${paddingY}px ${paddingX}px`,
       transform: `rotateX(${element.value['multiDimensional'].x}deg) rotateY(${element.value['multiDimensional'].y}deg) rotateZ(${element.value['multiDimensional'].z}deg)`
     }
   } else {