center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #12412 from dataease/pr@dev-v2@refactor_3d-roast

Browse Source 
refactor(图表): 3D旋转增加自动边界计算
This commit is contained in:
王嘉豪 2024-09-24 16:46:31 +08:00 committed by GitHub
commit 22cf267c86
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
View File

@ -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 {

18
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -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 {