文字放大缩小

src/views/Editor/Canvas/Operate/TextsizeHandler.vue

@@ -36,9 +36,9 @@ const rotateClassName = computed(() => {
   left: 0;
   top: 0;
   margin: -5px 0 0 -5px;
-  border: 1px solid $themeColor;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
   background-color: #fff;
-  border-radius: 1px;
   cursor: pointer;
 
   &.left-top.rotate-0,
@@ -49,7 +49,7 @@ const rotateClassName = computed(() => {
   &.right-top.rotate-90,
   &.top.rotate-135,
   &.bottom.rotate-135 {
-    cursor: nwse-resize;
+    cursor: url('https://im.oytour.com/trip/cusor/8f76b0abb0a62213ab3795d3ebaf3c3e.svg') 16 16, nwse-resize;
   }
   &.top.rotate-0,
   &.bottom.rotate-0,
@@ -59,7 +59,7 @@ const rotateClassName = computed(() => {
   &.right.rotate-90,
   &.left-bottom.rotate-135,
   &.right-top.rotate-135 {
-    cursor: ns-resize;
+    cursor: url('https://im.oytour.com/trip/cusor/4f7515dd177541d307de562bd6ee8f07.svg') 16 16, ns-resize;
   }
   &.left-bottom.rotate-0,
   &.right-top.rotate-0,
@@ -69,7 +69,7 @@ const rotateClassName = computed(() => {
   &.right-bottom.rotate-90,
   &.left.rotate-135,
   &.right.rotate-135 {
-    cursor: nesw-resize;
+    cursor: url('https://im.oytour.com/trip/cusor/13cfd89732053891fab7d23547a6d4f0.svg') 16 16, nesw-resize;
   }
   &.left.rotate-0,
   &.right.rotate-0,
@@ -79,7 +79,7 @@ const rotateClassName = computed(() => {
   &.bottom.rotate-90,
   &.left-top.rotate-135,
   &.right-bottom.rotate-135 {
-    cursor: ew-resize;
+    cursor: url('https://im.oytour.com/trip/cusor/7e6be5a8633602679325c01e745e53ef.svg') 16 16, ew-resize !important;
   }
 }
 </style>
\ No newline at end of file

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

@@ -140,11 +140,6 @@ export default (
     let baseTop = 0
     let horizontalLines: AlignLine[] = []
     let verticalLines: AlignLine[] = []
-    let idData =''
-    let oWidth = 0
-    let oHeight = 0
-    let nWidth = 0
-    let nHeight = 0
 
     // 旋转后的元素进行缩放时，引入基点的概念，以当前操作的缩放点相对的点为基点
     // 例如拖动右下角缩放时，左上角为基点，需要保持左上角不变然后修改其他的点的位置来达到所放的效果
@@ -408,11 +403,31 @@ export default (
             cellMinHeight: cellMinHeight < 36 ? 36 : cellMinHeight,
           }
         }
-        idData = el.id
-        oWidth = el.width
-        oHeight = el.height
-        console.log(oHeight,'------')
-        return { ...el, left, top, width, height, fontSize:2 }
+
+        let baseFontSize = 0 
+        let arr = el.content.split(';')
+        let fontSize = arr.filter((z:any)=>z.indexOf('font-size:')!=-1)
+        if(fontSize.length>0){
+          let arrs = fontSize[0].split(':')
+          let arrs2 = arrs[1].split('px')
+          baseFontSize = Number(arrs2[0])
+        }
+        for(let i=0;i<arr.length;i++){
+          if(arr[i].indexOf('font-size:')!=-1){
+            if((el.width-width)>2||(el.width-width)<-2){
+              if((el.width-width)>1) baseFontSize--
+              else baseFontSize++
+              arr[i] = `font-size:${baseFontSize}px`
+            }
+          } 
+        }
+        let content = ''
+        for(let i=0;i<arr.length;i++){
+          if(i<arr.length-1){
+            content+=arr[i]+';'
+          }else content+=arr[i]
+        }
+        return { ...el, left, top, width, height, content}
       })
     }
 
@@ -430,29 +445,9 @@ export default (
       const currentPageY = e instanceof MouseEvent ? e.pageY : e.changedTouches[0].pageY
       
       if (startPageX === currentPageX && startPageY === currentPageY) return
-      
-      let richTextAttr = richTextAttrs.value.fontsize.split('px')
-      let baseFontSize =  Number(richTextAttr[0])
-      let textIdData = elementList.value.filter(x=>x.id==idData)
-      let el = textIdData[0]
-      nWidth = el.width
-      nHeight = el.height
-      
-
-      const fontSizeW = Math.round(nWidth / 100 * baseFontSize);
-      const fontSizeH = Math.round(nHeight / 100 * parseInt(baseFontSize));
-      
-      let value = fontSizeH+'px'
-      console.log(value,'111---')
-      let command = 'fontsize'
-      // useFontStore().loadFontToDocument([value])
-      // emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
 
       slidesStore.updateSlide({ elements: elementList.value })
       mainStore.setScalingState(false)
-      
-      
-
       addHistorySnapshot()
     }