feat: dodule click scale

src/components/ImageBox.vue

@@ -118,7 +118,6 @@ const initialTouchRef = ref(0)
 const transitionCSS = `transform ${props.speed}ms ${props.easing}`
 
 function handleMaskStart (e) {
-  console.log(e)
   state.maskTouched = true
   state.CX = e.clientX
   state.CY = e.clientY
@@ -132,10 +131,10 @@ function onScale (current, clientX, clientY) {
     emit('expose', {
       scale: current
     })
-
+    const { x, y, width, height, scale } = state
     Object.assign(state, {
       scale: current,
-      ...getPositionOnMoveOrScale(state.x, state.y, state.width, state.height, state.scale, current, clientX, clientY),
+      ...getPositionOnMoveOrScale(x, y, width, height, scale, current, clientX, clientY),
       ...(current <= 1 && { x: 0, y: 0 })
     })
   }
@@ -148,7 +147,6 @@ const handleMove = (nextClientX, nextClientY, currentTouchLength) => {
     if (currentTouchLength === 0 && initialTouchRef.value === 0) {
       const isStillX = Math.abs(nextClientX - CX) <= minStartTouchOffset
       const isStillY = Math.abs(nextClientY - CY) <= minStartTouchOffset
-      console.log(isStillX, isStillY)
       // 初始移动距离不足
       if (isStillX && isStillY) {
         // 方向记录上次移动距离，以便平滑过渡
@@ -282,7 +280,7 @@ function handleStart (currentClientX, currentClientY, currentTouchLength = 0) {
 }
 
 // 计算位置
-const [translateX, translateY, currentWidth, currentHeight, currentScale] = useAnimationPosition(state)
+const [translateX, translateY, currentWidth, currentHeight, currentScale] = useAnimationPosition(state, props.speed)
 
 // img
 
@@ -309,6 +307,10 @@ function handleImageLoaded (e) {
   direction: ltr;
 }
 
+.PhotoView__PhotoBox {
+  transform-origin: left top;
+}
+
 .PhotoView__Photo {
   max-width: initial;
   cursor: grab;

src/components/hooks/useAnimationPosition.js

@@ -1,8 +1,8 @@
 import { computed } from 'vue'
-export default function useAnimationPosition (state) {
-  const autoWidth = computed(() => state.width * state.scale)
+import useTargetScale from './useTargetScale'
 
-  const autoHeight = computed(() => state.height * state.scale)
+export default function useAnimationPosition (state, speed) {
+  const { autoWidth, autoHeight, autoScale } = useTargetScale(state, speed)
 
   // 偏移量，x: 0, y: 0 居中为初始
   const centerWidth = innerWidth / 2
@@ -21,6 +21,6 @@ export default function useAnimationPosition (state) {
     translateY,
     autoWidth,
     autoHeight,
-    state.scale
+    autoScale
   ]
 }

src/components/hooks/useTargetScale.js

@@ -1 +1,59 @@
-export default function useTargetScale (realWidth, realHeight, realScale) {}
+import { reactive, computed, watch } from 'vue'
+import useDebounceCallback from './useDebounceCallback'
+
+/**
+ * 目标缩放延迟处理
+ */
+export default function useTargetScale (state, speed) {
+  const innerState = reactive({
+    lead: true,
+    scale: state.scale
+  })
+
+  const moveScale = useDebounceCallback(
+    (current) => {
+      state.pause = true
+      Object.assign(innerState, {
+        lead: false,
+        scale: current
+      })
+    },
+    { wait: speed }
+  )
+
+  watch(() => state.scale, () => {
+    state.pause = false
+    innerState.lead = true
+    moveScale(state.scale)
+  })
+
+  const autoWidth = computed(() => {
+    if (innerState.lead) {
+      return state.width * innerState.scale
+    } else {
+      return state.width * state.scale
+    }
+  })
+
+  const autoHeight = computed(() => {
+    if (innerState.lead) {
+      return state.height * innerState.scale
+    } else {
+      return state.height * state.scale
+    }
+  })
+
+  const autoScale = computed(() => {
+    if (innerState.lead) {
+      return state.scale / innerState.scale
+    } else {
+      return 1
+    }
+  })
+
+  return {
+    autoWidth,
+    autoHeight,
+    autoScale
+  }
+}

src/pages/index/index.vue

@@ -33,7 +33,6 @@ const state = reactive({
 })
 
 function show (uniqueId) {
-  console.log(uniqueId)
   state.index = uniqueId
   state.visible = true
 }