feat: 对接各个视频数据

src/views/interview/midterm-shooting/shooting/filmingLocation-b/useViewfinderB.ts

@@ -0,0 +1,291 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getTouchDistance, getTouchCenter, getClientPosition } from '../utils/touchGestures'
+
+// 设计稿尺寸常量
+const DESIGN_WIDTH = 1920
+const DESIGN_HEIGHT = 1080
+
+/**
+ * 自由取景框模式的逻辑
+ * 支持拖动、四角调整大小、双指缩放
+ */
+export function useViewfinderB() {
+  // 取景框相关
+  const viewfinderContainer = ref<HTMLElement>()
+  const viewfinderBox = ref<HTMLElement>()
+  const viewfinder = ref({
+    x: 660, // (1920 - 600) / 2 = 660，居中
+    y: 340, // (1080 - 400) / 2 = 340，居中
+    width: 600,
+    height: 400
+  })
+
+  // 拖动相关状态
+  const isDragging = ref(false)
+  const dragStart = ref({ x: 0, y: 0 })
+
+  // 调整大小相关状态
+  const isResizing = ref(false)
+  const resizeCorner = ref<'nw' | 'ne' | 'sw' | 'se' | null>(null)
+  const resizeStart = ref({
+    x: 0,
+    y: 0,
+    boxX: 0,
+    boxY: 0,
+    boxWidth: 0,
+    boxHeight: 0
+  })
+
+  // 双指缩放相关状态
+  const isPinching = ref(false)
+  const pinchStart = ref({
+    distance: 0,
+    centerX: 0,
+    centerY: 0,
+    boxWidth: 0,
+    boxHeight: 0,
+    boxX: 0,
+    boxY: 0
+  })
+
+  // 将屏幕坐标转换为缩放后的本地坐标
+  const convertClientToLocal = (clientX: number, clientY: number) => {
+    if (!viewfinderContainer.value) return { x: clientX, y: clientY }
+
+    const containerRect = viewfinderContainer.value.getBoundingClientRect()
+
+    // 计算缩放比例
+    const scaleX = containerRect.width / DESIGN_WIDTH
+    const scaleY = containerRect.height / DESIGN_HEIGHT
+
+    // 计算相对于容器的坐标，并转换为设计稿坐标系
+    const localX = (clientX - containerRect.left) / scaleX
+    const localY = (clientY - containerRect.top) / scaleY
+
+    return { x: localX, y: localY }
+  }
+
+  // 开始拖动取景框
+  const startDrag = (e: MouseEvent | TouchEvent) => {
+    if (isResizing.value || isPinching.value) return
+
+    // 检测双指触摸
+    if ('touches' in e && e.touches.length === 2) {
+      // 双指缩放
+      isPinching.value = true
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      pinchStart.value = {
+        distance: getTouchDistance(touch1, touch2),
+        centerX: (touch1.clientX + touch2.clientX) / 2,
+        centerY: (touch1.clientY + touch2.clientY) / 2,
+        boxWidth: viewfinder.value.width,
+        boxHeight: viewfinder.value.height,
+        boxX: viewfinder.value.x,
+        boxY: viewfinder.value.y
+      }
+      e.preventDefault()
+      return
+    }
+
+    // 单指拖动
+    if ('touches' in e && e.touches.length !== 1) return
+
+    isDragging.value = true
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    dragStart.value = {
+      x: localPos.x - viewfinder.value.x,
+      y: localPos.y - viewfinder.value.y
+    }
+
+    e.preventDefault()
+  }
+
+  // 开始调整大小
+  const startResize = (corner: 'nw' | 'ne' | 'sw' | 'se', e: MouseEvent | TouchEvent) => {
+    isResizing.value = true
+    resizeCorner.value = corner
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    resizeStart.value = {
+      x: localPos.x,
+      y: localPos.y,
+      boxX: viewfinder.value.x,
+      boxY: viewfinder.value.y,
+      boxWidth: viewfinder.value.width,
+      boxHeight: viewfinder.value.height
+    }
+
+    e.preventDefault()
+  }
+
+  // 处理移动
+  const handleMove = (e: MouseEvent | TouchEvent) => {
+    if (!isDragging.value && !isResizing.value && !isPinching.value) return
+
+    // 处理双指缩放
+    if (isPinching.value && 'touches' in e && e.touches.length === 2) {
+      const touch1 = e.touches[0]
+      const touch2 = e.touches[1]
+
+      const currentDistance = getTouchDistance(touch1, touch2)
+      const scale = currentDistance / pinchStart.value.distance
+
+      // 计算新的尺寸
+      let newWidth = pinchStart.value.boxWidth * scale
+      let newHeight = pinchStart.value.boxHeight * scale
+
+      const minSize = 200
+
+      // 限制最小和最大尺寸
+      newWidth = Math.max(minSize, Math.min(newWidth, DESIGN_WIDTH))
+      newHeight = Math.max(minSize, Math.min(newHeight, DESIGN_HEIGHT))
+
+      // 保持中心点不变，计算新的位置
+      const center = getTouchCenter(touch1, touch2)
+      const localCenter = convertClientToLocal(center.x, center.y)
+
+      let newX = localCenter.x - newWidth / 2
+      let newY = localCenter.y - newHeight / 2
+
+      // 边界检测
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - newWidth))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - newHeight))
+
+      viewfinder.value.width = newWidth
+      viewfinder.value.height = newHeight
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+
+      e.preventDefault()
+      return
+    }
+
+    const { x: clientX, y: clientY } = getClientPosition(e)
+
+    const localPos = convertClientToLocal(clientX, clientY)
+
+    if (isDragging.value && viewfinderContainer.value) {
+      // 拖动取景框
+      let newX = localPos.x - dragStart.value.x
+      let newY = localPos.y - dragStart.value.y
+
+      // 边界检测 - 使用设计稿尺寸
+      newX = Math.max(0, Math.min(newX, DESIGN_WIDTH - viewfinder.value.width))
+      newY = Math.max(0, Math.min(newY, DESIGN_HEIGHT - viewfinder.value.height))
+
+      viewfinder.value.x = newX
+      viewfinder.value.y = newY
+    } else if (isResizing.value && viewfinderContainer.value) {
+      // 调整取景框大小
+      const deltaX = localPos.x - resizeStart.value.x
+      const deltaY = localPos.y - resizeStart.value.y
+
+      const minSize = 200 // 最小尺寸
+
+      if (resizeCorner.value === 'se') {
+        // 右下角 - 使用设计稿尺寸限制
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'sw') {
+        // 左下角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newX = resizeStart.value.boxX + deltaX
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        viewfinder.value.height = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxHeight + deltaY, DESIGN_HEIGHT - viewfinder.value.y)
+        )
+      } else if (resizeCorner.value === 'ne') {
+        // 右上角 - 使用设计稿尺寸限制
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newY = resizeStart.value.boxY + deltaY
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+        viewfinder.value.width = Math.max(
+          minSize,
+          Math.min(resizeStart.value.boxWidth + deltaX, DESIGN_WIDTH - viewfinder.value.x)
+        )
+      } else if (resizeCorner.value === 'nw') {
+        // 左上角 - 使用设计稿尺寸限制
+        const newWidth = resizeStart.value.boxWidth - deltaX
+        const newHeight = resizeStart.value.boxHeight - deltaY
+        const newX = resizeStart.value.boxX + deltaX
+        const newY = resizeStart.value.boxY + deltaY
+
+        if (newWidth >= minSize && newX >= 0) {
+          viewfinder.value.x = newX
+          viewfinder.value.width = newWidth
+        }
+        if (newHeight >= minSize && newY >= 0) {
+          viewfinder.value.y = newY
+          viewfinder.value.height = newHeight
+        }
+      }
+    }
+
+    e.preventDefault()
+  }
+
+  // 结束拖动或调整
+  const handleEnd = () => {
+    isDragging.value = false
+    isResizing.value = false
+    isPinching.value = false
+    resizeCorner.value = null
+  }
+
+  // 挂载时添加全局事件监听
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
+    document.addEventListener('touchmove', handleMove)
+    document.addEventListener('touchend', handleEnd)
+  })
+
+  // 卸载时移除事件监听
+  onUnmounted(() => {
+    document.removeEventListener('mousemove', handleMove)
+    document.removeEventListener('mouseup', handleEnd)
+    document.removeEventListener('touchmove', handleMove)
+    document.removeEventListener('touchend', handleEnd)
+  })
+
+  return {
+    // Refs
+    viewfinderContainer,
+    viewfinderBox,
+
+    // 状态
+    viewfinder,
+    isDragging,
+    isResizing,
+    isPinching,
+
+    // 方法
+    startDrag,
+    startResize,
+
+    // 常量
+    DESIGN_WIDTH,
+    DESIGN_HEIGHT
+  }
+}