文字拉伸

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -10,6 +10,7 @@ import { SHAPE_PATH_FORMULAS } from '@/configs/shapes'
 import { type AlignLine, uniqAlignLines } from '@/utils/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import emitter, { EmitterEvents } from '@/utils/emitter'
+import { path } from '@amcharts/amcharts4/core';
 
 interface RotateElementData {
   left: number
@@ -120,13 +121,28 @@ export default (
     const elOriginTop = element.top
     const elOriginWidth = element.width
     const elOriginHeight = element.height
+    const regex = /font-size\s*:\s*(\d+(?:\.\d+)?(px|PX))/g;
+    let matches = []
+    let elOriginFont:{path:string,originSize:number}[] = []
+    if('content' in element){
+      matches = element.content.match(regex)??[];
+      if(matches && matches.length>0){
+        matches.forEach(r=>{
+          const result = /font-size\s*:\s*(\d+(?:\.\d+)?)(px|PX)/.exec(r);
+          if (result) {
+            elOriginFont.push({path:r,originSize:parseInt(result[1])})
+          }
+        })
+      }
+      console.log(elOriginFont)
+    }
 
     const originTableCellMinHeight = element.type === 'table' ? element.cellMinHeight : 0
     
     const elRotate = ('rotate' in element && element.rotate) ? element.rotate : 0
     const rotateRadian = Math.PI * elRotate / 180
 
-    const fixedRatio = ctrlOrShiftKeyActive.value || ('fixedRatio' in element && element.fixedRatio)
+    const fixedRatio = true//ctrlOrShiftKeyActive.value || ('fixedRatio' in element && element.fixedRatio)
     const aspectRatio = elOriginWidth / elOriginHeight
 
     const startPageX = isTouchEvent ? e.changedTouches[0].pageX : e.pageX
@@ -377,6 +393,28 @@ export default (
           height = getSizeWithinRange(elOriginHeight - moveY)
           top = elOriginTop - (height - elOriginHeight)
         }
+        else if (command === OperateResizeHandlers.LEFT) {
+          const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
+          moveX = moveX - offsetX
+          width = getSizeWithinRange(elOriginWidth - moveX)
+          left = elOriginLeft - (width - elOriginWidth)
+        }
+        else if (command === OperateResizeHandlers.RIGHT) {
+          const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
+          moveX = moveX - offsetX
+          width = getSizeWithinRange(elOriginWidth + moveX)
+        }
+        else if (command === OperateResizeHandlers.TOP) {
+          const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
+          moveY = moveY - offsetY
+          height = getSizeWithinRange(elOriginHeight - moveY)
+          top = elOriginTop - (height - elOriginHeight)
+        }
+        else if (command === OperateResizeHandlers.BOTTOM) {
+          const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
+          moveY = moveY - offsetY
+          height = getSizeWithinRange(elOriginHeight + moveY)
+        }
       }
       
       elementList.value = elementList.value.map(el => {
@@ -405,42 +443,15 @@ export default (
           }
         }
 
-        let baseFontSize = 0
-        // let arr = aaa.split(';') 
-        let arr = el.content.split(';')
-        let fontSize = arr.filter((z:any)=>z.indexOf('font-size:')!=-1)
-        if(fontSize&&fontSize.length>0){
-          let arrs = fontSize[0].split(':')
-          let arrs2 = arrs[1].split('px')
-          baseFontSize = arrs2[0]
-        }
-        const w = parseInt(el.width-width)
-        
-        for(let i=0;i<arr.length;i++){
-          if(arr[i].indexOf('font-size:')!=-1){
-            if(w>2||w<-2){
-              if(w>2) baseFontSize--
-              else baseFontSize++
-              arr[i] = `font-size: ${parseInt(baseFontSize)}px`
-            }
-          }
+        if('content' in el && 'vertical' in el){
+          elOriginFont.forEach(x=>{
+            const newFontSize = x.originSize * (el.vertical?(height/elOriginHeight): (width / elOriginWidth));
+            const newPath = `font-size: ${newFontSize}px`
+            el.content = el.content.replaceAll(x.path,newPath)
+            x.path = newPath
+          })
+          
         }
-        let content = ''
-        const last = arr.length-1
-        for(let i=0;i<arr.length;i++){
-          if(i!=last){
-            content+=arr[i]+';'
-          }else content+=arr[i]
-        }
-        // console.log(el.content,'----content')
-        // console.log(arr,'----arr')
-        // console.log(content,'------组装结果')
-      
-        let value = baseFontSize+'px'
-        console.log(value,'111---')
-        let command = 'fontsize'
-        emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
-        
         return { ...el, left, top, width, height}
       })
     }
@@ -478,6 +489,7 @@ export default (
 
   // 缩放元素
   const scaleElement = (e: MouseEvent | TouchEvent, element: Exclude<PPTElement, PPTLineElement>, command: OperateResizeHandlers) => {
+
     const isTouchEvent = !(e instanceof MouseEvent)
     if (isTouchEvent && (!e.changedTouches || !e.changedTouches[0])) return