feat：新增旋转功能

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -73,7 +73,7 @@
     </n-space>
 
     <!-- 滤镜 -->
-    <styles-setting :chartStyles="canvasConfig"></styles-setting>
+    <styles-setting :is-canvas="true" :chartStyles="canvasConfig"></styles-setting>
     <n-divider style="margin: 10px 0;"></n-divider>
 
     <!-- 主题选择和全局配置 -->

src/views/preview/components/PreviewRenderList/index.vue

@@ -4,7 +4,11 @@
     :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
     :key="item.id"
-    :style="{ ...getComponentAttrStyle(item.attr, index), ...getStyle(item.styles)}"
+    :style="{ 
+      ...getComponentAttrStyle(item.attr, index),
+      ...getFilterStyle(item.styles),
+      ...getTranstormStyle(item.styles)
+    }"
   >
     <component
       :is="item.chartConfig.chartKey"
@@ -20,7 +24,8 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { getSizeStyle, getStyle, getComponentAttrStyle, animationsClass } from '../../utils'
+import { getSizeStyle, getFilterStyle, getTranstormStyle, getComponentAttrStyle, animationsClass } from '../../utils'
+
 
 const props = defineProps({
   localStorageInfo: {
@@ -29,6 +34,8 @@ const props = defineProps({
   }
 })
 
+console.log(getTranstormStyle(props.localStorageInfo.componentList[0].styles))
+
 // 主题色
 const themeSetting = computed(() => {
   const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting

src/views/preview/index.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
-import { getEditCanvasConfigStyle, getStyle, getSessionStorageInfo } from './utils'
+import { getEditCanvasConfigStyle, getFilterStyle, getSessionStorageInfo } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'
@@ -25,7 +25,7 @@ import type { ChartEditStorageType } from './index.d'
 const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartEditStorageType
 
 const previewRefStyle = computed(() => {
-  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getStyle(localStorageInfo.editCanvasConfig) }
+  return { ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig), ...getFilterStyle(localStorageInfo.editCanvasConfig) }
 })
 
 useStore(localStorageInfo)

src/views/preview/utils/style.ts

@@ -47,11 +47,19 @@ export const animationsClass = (animations: string[]) => {
 }
 
 // 滤镜
-export const getStyle = (styles: StylesType | EditCanvasConfigType) => {
+export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
   const { opacity, saturate, contrast, hueRotate, brightness } = styles
   return {
     // 透明度
     opacity: opacity,
-    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`
+    filter: `saturate(${saturate}) contrast(${contrast}) hue-rotate(${hueRotate}deg) brightness(${brightness})`,
+  }
+}
+
+// 变换
+export const getTranstormStyle = (styles: StylesType) => {
+  const { rotateZ, rotateX, rotateY, skewX, skewY } = styles
+  return {
+    transform: `rotateZ(${rotateZ || 0}deg) rotateX(${rotateX || 0}deg) rotateY(${rotateY || 0}deg) skewX(${skewX || 0}deg) skewY(${skewY || 0}deg)`,
   }
 }