图片放大缩小功能优化

src/components/shared/MarkHeader.vue

@@ -233,30 +233,50 @@ const validVal = (val: number, max: number, min: number) => {
   return Math.min(max, Math.max(val, min))
 }
 
-let imgLastWidth = 0
-
+let imgOriginWidth = 0
+bus.on('loadedImg', (img: any) => {
+  //拿到图片的原生宽度
+  imgOriginWidth = img.width
+})
 const getImgDomWidth = () => {
   let imgDom = document.querySelector('.paper-img')
   return imgDom ? imgDom.clientWidth : 0
 }
+let imgObserver: any = null
+let scaleType = ''
+let imgLastWidthBeforeScaleUp = 0
+let imgLastWidthBeforeScaleDown = 0
 const changeFun = () => {
   const imgDom: any = document.querySelector('.paper-img')
   imgDom.onload = () => {
     const newImgWidth = getImgDomWidth()
-    if (newImgWidth == imgLastWidth && imgLastWidth > 0) {
-      imgLastWidth = 0
-      ratio.value = validVal(minus(ratio.value, 0.1), 2, 0.5)
-      saveMarkSet()
+    if (scaleType === 'scaleUp') {
+      if (newImgWidth == imgLastWidthBeforeScaleUp && imgLastWidthBeforeScaleUp > 0) {
+        imgLastWidthBeforeScaleUp = 0
+        ratio.value = validVal(minus(ratio.value, 0.1), 2, 0.5)
+        saveMarkSet()
+      }
+    } else {
+      if (newImgWidth == imgLastWidthBeforeScaleDown && imgLastWidthBeforeScaleDown > 0 && imgOriginWidth > 0) {
+        //这里的逻辑发生的场景，是提前对页面左右大小拖拽了，减小了左侧图片容器的容器宽度，但是配置里的ratio却没有变化的情况，
+        //需要在点击缩小按钮的时候，实时算出新的ratio，并实时缩小图片
+        imgLastWidthBeforeScaleDown = 0
+        const curRealRatio = newImgWidth / imgOriginWidth
+        let rat = Math.floor(curRealRatio * 10) <= 6 ? 0.5 : (Math.ceil(curRealRatio * 10) - 1) / 10
+        ratio.value = rat
+        saveMarkSet()
+      }
     }
   }
 }
-let imgObserver: any = null
-const createImgObserver = () => {
+
+const createImgObserver = (type: string) => {
+  scaleType = type
   if (!imgObserver) {
     imgObserver = new MutationObserver(() => {
       changeFun()
     })
-    imgObserver.observe(document.querySelector('.paper-img'), { attributes: true })
+    imgObserver.observe(document.querySelector('.paper-img'), { attributes: true, attributeFilter: ['src'] })
   }
 }
 
@@ -266,13 +286,17 @@ const onOperationClick = (button: HeaderButton) => {
   }
   switch (button.type) {
     case 'scale-up':
-      imgLastWidth = getImgDomWidth()
-      createImgObserver()
+      imgLastWidthBeforeScaleUp = getImgDomWidth()
+      createImgObserver('scaleUp')
       ratio.value = validVal(add(ratio.value, 0.1), 2, 0.5)
+      console.log('scale-up', ratio.value)
       saveMarkSet()
       break
     case 'scale-down':
+      imgLastWidthBeforeScaleDown = getImgDomWidth()
+      createImgObserver('scaleDown')
       ratio.value = validVal(minus(ratio.value, 0.1), 2, 0.5)
+      console.log('scale-down', ratio.value)
       saveMarkSet()
       break
     case 'rotate':

src/hooks/useSetImgBg.ts

@@ -85,6 +85,7 @@ const autoLoadImage = (url: any, errorNum: number, rs?: any, rj?: any) => {
     img.src = url as string
     img.onload = () => {
       dynamicMessage?.close()
+      bus.emit('loadedImg', img)
       rs ? rs(img) : resolve(img)
     }
     img.onerror = () => {