From 14d3eaec4714c1a646bebdee61bc5dd6d6869672 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 24 Sep 2024 11:33:13 +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

---
 .../data-visualization/canvas/Shape.vue       | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

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 68c87e5801..7842c9bb87 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -829,6 +829,30 @@ const commonBackgroundSvgInner = computed(() => {
   }
 })
 
+const padding3D = computed(() => {
+  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 {
+    paddingX: `${paddingX}px`,
+    paddingY: `${paddingY}px`
+  }
+})
+
 const componentBackgroundStyle = computed(() => {
   if (element.value.commonBackground && element.value.component !== 'GroupArea') {
     const {