diff --git a/src/components/marking/components/renderer/MarkingImageViewerNew.vue b/src/components/marking/components/renderer/MarkingImageViewerNew.vue index d8fb1f3..06b9608 100644 --- a/src/components/marking/components/renderer/MarkingImageViewerNew.vue +++ b/src/components/marking/components/renderer/MarkingImageViewerNew.vue @@ -3,7 +3,6 @@ import type { KonvaMarkingData } from '../../composables/renderer/useMarkingKonv import type { ExamStudentMarkingQuestionResponse } from '@/api' import { markingSettings } from '../../composables/useMarkingSettings' import { useSmartScale } from '../../composables/useSmartScale' -import ScaleControlPanel from '../ScaleControlPanel.vue' import QuestionRenderer from './QuestionRenderer.vue' interface Props { @@ -21,6 +20,62 @@ const smartScale = useSmartScale(props.imageSize) const questionData = defineModel('questionData') +// 手势缩放相关 +const containerRef = ref() +const initialDistance = ref(0) +const initialScale = ref(1) +const isGesturing = ref(false) + +/** + * 计算两点之间的距离 + */ +function getDistance(touch1: Touch, touch2: Touch): number { + const dx = touch2.clientX - touch1.clientX + const dy = touch2.clientY - touch1.clientY + return Math.sqrt(dx * dx + dy * dy) +} + +/** + * 处理触摸开始 + */ +function handleTouchStart(e: TouchEvent) { + if (e.touches.length === 2) { + // 双指触摸,开始缩放手势 + isGesturing.value = true + initialDistance.value = getDistance(e.touches[0], e.touches[1]) + initialScale.value = smartScale.userScaleFactor.value + e.preventDefault() + } +} + +/** + * 处理触摸移动 + */ +function handleTouchMove(e: TouchEvent) { + if (e.touches.length === 2 && isGesturing.value) { + // 计算新的距离 + const currentDistance = getDistance(e.touches[0], e.touches[1]) + + // 计算缩放比例变化 + const scaleChange = currentDistance / initialDistance.value + + // 应用新的缩放比例 + const newScale = initialScale.value * scaleChange + smartScale.setScale(newScale) + + e.preventDefault() + } +} + +/** + * 处理触摸结束 + */ +function handleTouchEnd(e: TouchEvent) { + if (e.touches.length < 2) { + isGesturing.value = false + } +} + // 计算题目布局类 const questionsLayoutClass = computed(() => ({ 'questions-vertical': true, // 多题总是竖排 @@ -51,17 +106,20 @@ function handleMarkingChange(questionIndex: number, imageIndex: number, data: Ko