修复文字transform，投影，渐变等特效

src/assets/styles/prosemirror.scss

+.text-static .ProseMirror{
+  position: static !important;
+}
 .ProseMirror, .ProseMirror-static {
   outline: 0;
   border: 0;

src/types/slides.ts

@@ -179,6 +179,7 @@ export interface PPTTextElement extends PPTBaseElement {
   contentStr?: string,
   TemplateList?: unknown,
   TemplateDataSource?: DataSourceType
+  clip?:boolean
 }
 
 

src/utils/psdParser/text.ts

@@ -6,6 +6,8 @@ export const ResolveText = (item: any, index: number,offsetLeft:number,offsetTop
     let domwidth = item.layer.width
     let domTop = item.layer.top-offsetTop
     let domheight = item.layer.height
+    let transformRotate = 0
+    let clip = false
     const opacity = (parseFloat(item.layer.opacity) / 255.0)
 
     let f = item.layer.typeTool().export()
@@ -20,13 +22,19 @@ export const ResolveText = (item: any, index: number,offsetLeft:number,offsetTop
             fontSize = sizes[0]
         }
     }
+    if(transform){
+        let angle = Math.atan2(transform.xy,transform.xx)
+        transformRotate = Math.ceil(angle * (180 / Math.PI))
+    }
     
     const StyleSheet = item.layer.adjustments.typeTool.obj.engineData.EngineDict.StyleRun.RunArray[0].StyleSheet || {}
+    
     const { StyleSheetData } = StyleSheet
     const tracking = fontSize * (StyleSheetData.Tracking / 1000)
     const lineHeight = StyleSheetData.Leading
     let leading = (Math.round((lineHeight * transform.yy) * 100) * 0.01) / fontSize
     let objectEFFFects = item.layer.objectEffects ? item.layer.objectEffects() : null
+    
     let color = `rgba(${colors[0][0]},${colors[0][1]},${colors[0][2]},${(parseFloat(colors[0][3]) / 255.0).toFixed(2)})`
 
     let style = `text-align:${alignment[0]}; font-size:${fontSize-2}px; font-weight:${weights[0]};`
@@ -37,13 +45,13 @@ export const ResolveText = (item: any, index: number,offsetLeft:number,offsetTop
         style += `font-style:italic;`
     }
 
-    let content = `<p style="${style}">${value}</p>`
+    
     let textShadow: any = null
-    if (objectEFFFects && objectEFFFects.data?.DrSh.enab) {
+    if (objectEFFFects && objectEFFFects.data?.DrSh?.enab) {
         textShadow = getShadows(objectEFFFects)
     }
     let background = ''
-    if (objectEFFFects && objectEFFFects.data?.GrFl.enab) {
+    if (objectEFFFects && objectEFFFects.data?.GrFl?.enab) {
         background += `rgba(${colors[0][0]},${colors[0][1]},${colors[0][2]},${(parseFloat(colors[0][3]) / 255.0).toFixed(2)})`
         background += " "+getGradient(objectEFFFects)
         background += " no-repeat"
@@ -52,8 +60,11 @@ export const ResolveText = (item: any, index: number,offsetLeft:number,offsetTop
         // div.style.backgroundPositionX = objectEFFFects.data.GrFl.Ofst.Hrzn.value+"px"
         // div.style.backgroundPositionY = objectEFFFects.data.GrFl.Ofst.Vrtc.value+"px"
         color = 'transparent',
-            textShadow = null
+        textShadow = null
+        clip=true
+        style += `background:${background} !important;-webkit-background-clip: text !important;`
     }
+    let content = `<p><span  style="${style}">${value}</span></p>`
 
     const isVertical = item.layer.adjustments.typeTool.obj.textData.Ornt.value != 'Hrzn'
     if(isVertical) {
@@ -81,18 +92,19 @@ export const ResolveText = (item: any, index: number,offsetLeft:number,offsetTop
         width:domwidth,
         top:domTop,
         height:domheight,
-        rotate: 0,
+        rotate: transformRotate,
         opacity,
         content,
         defaultFontName: names.join(','),
         defaultColor: color,
         fill: background,
-        lineHeight: leading,
+        lineHeight: leading<1?1:leading,
         wordSpace: tracking,
         vertical: isVertical,
-        contentStr: content,
+        contentStr: value,
         layerName:item.layer.name,
-        groupId :groupId
+        groupId :groupId,
+        clip
     }
     if (textShadow) element.shadow = textShadow
 

src/views/components/element/TextElement/index.vue

@@ -19,7 +19,7 @@
         :style="{
           width: elementInfo.vertical ? 'auto' : elementInfo.width + 'px',
           height: elementInfo.vertical ? elementInfo.height + 'px' : 'auto',
-          backgroundColor: elementInfo.fill,
+          background: elementInfo.fill,
           opacity: elementInfo.opacity,
           textShadow: shadowStyle,
           lineHeight: elementInfo.lineHeight,
@@ -28,6 +28,8 @@
           fontFamily: elementInfo.defaultFontName,
           writingMode: elementInfo.vertical ? 'vertical-rl' : 'horizontal-tb',
         }"
+        :class="{'clip-box':elementInfo.clip}"
+        
         v-contextmenu="contextmenus"
         @mousedown="$event => handleSelectElement($event)"
         @touchstart="$event => handleSelectElement($event)"
@@ -38,7 +40,7 @@
           :outline="elementInfo.outline"
         />
         <ProsemirrorEditor
-          class="text"
+          :class="{'text-static':elementInfo.clip,'text':!elementInfo.clip}"
           :elementId="elementInfo.id"
           :defaultColor="elementInfo.defaultColor"
           :defaultFontName="elementInfo.defaultFontName"
@@ -200,6 +202,9 @@ watch(isHandleElement, () => {
   .text {
     position: relative;
   }
+  .text-static {
+    position: static;
+  }
 
   ::v-deep(a) {
     cursor: text;
@@ -217,4 +222,7 @@ watch(isHandleElement, () => {
     bottom: 0;
   }
 }
+.clip-box{
+  -webkit-background-clip: text !important;
+}
 </style>