feat：新增旋转功能

src/components/Pages/ChartItemSetting/PositionSetting.vue

@@ -20,7 +20,7 @@
       placeholder="px"
     >
       <template #prefix>
-        <n-text depth="3">上边</n-text>
+        <n-text depth="3">上</n-text>
       </template>
     </n-input-number>
     <n-input-number

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -1,5 +1,5 @@
 <template>
-  <collapse-item name="滤镜">
+  <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
     <setting-item-box name="色相" :alone="true">
       <setting-item :name="`值：${chartStyles.hueRotate}deg`">
         <!-- 透明度 -->
@@ -68,6 +68,62 @@
         ></n-slider>
       </setting-item>
     </setting-item-box>
+    
+    <!-- 变换 -->
+    <setting-item-box v-if="!isCanvas" name="旋转°">
+      <setting-item name="Z轴(平面) - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateZ"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="X轴 - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateX"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴 - 旋转">
+        <!-- 透明度 -->
+        <n-input-number
+          v-model:value="chartStyles.rotateY"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <!-- 倾斜 -->
+    <setting-item-box v-if="!isCanvas" name="倾斜°">
+      <setting-item name="X轴 - 倾斜">
+        <n-input-number
+          v-model:value="chartStyles.skewX"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴 - 倾斜">
+        <n-input-number
+          v-model:value="chartStyles.skewY"
+          :min="0"
+          :max="360"
+          size="small"
+          placeholder="角度"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 </template>
 
@@ -81,6 +137,10 @@ import {
 } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
+  isCanvas: {
+    type: Boolean,
+    default: false
+  },
   chartStyles: {
     type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
     required: true,

src/packages/index.d.ts

@@ -26,13 +26,27 @@ interface EchartsDataType {
   source: any[]
 }
 
-// 滤镜枚举
+// 滤镜/变换枚举
 export enum FilterEnum {
-  HUE_ROTATE = 'hueRotate',
+  // 透明度
+  OPACITY = 'opacity',
+  // 饱和度
   SATURATE = 'saturate',
-  BRIGHTNESS = 'brightness',
+  // 对比度
   CONTRAST = 'contrast',
-  OPACITY = 'opacity',
+  // 色相
+  HUE_ROTATE = 'hueRotate',
+  // 亮度
+  BRIGHTNESS = 'brightness',
+
+  // 旋转
+  ROTATE_Z = 'rotateZ',
+  ROTATE_X = 'rotateX',
+  ROTATE_Y = 'rotateY',
+
+  // 倾斜
+  SKEW_X = 'skewX',
+  SKEW_Y = 'skewY',
 }
 
 // 组件实例类
@@ -41,16 +55,18 @@ export interface PublicConfigType extends requestConfig {
   rename?: string
   attr: { x: number; y: number; w: number; h: number; zIndex: number }
   styles: {
-    // 透明度
     [FilterEnum.OPACITY]: number;
-    // 饱和度
     [FilterEnum.SATURATE]: number;
-    // 对比度
     [FilterEnum.CONTRAST]: number;
-    // 色相
     [FilterEnum.HUE_ROTATE]: number;
-    // 亮度
     [FilterEnum.BRIGHTNESS]: number;
+
+    [FilterEnum.ROTATE_Z]: number;
+    [FilterEnum.ROTATE_X]: number;
+    [FilterEnum.ROTATE_Y]: number;
+
+    [FilterEnum.SKEW_X]: number;
+    [FilterEnum.SKEW_Y]: number;
     // 动画
     animations: string[]
   }

src/packages/public/publicConfig.ts

@@ -27,6 +27,16 @@ export class publicConfig implements PublicConfigType {
     brightness: 1,
     // 透明
     opacity: 1,
+
+    // 旋转
+    rotateZ: 0,
+    rotateX: 0,
+    rotateY: 0,
+
+    // 倾斜
+    skewX: 0,
+    skewY: 0,
+    
     // 动画
     animations: []
   }

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)`,
   }
 }