diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue index 9765676..c712db8 100644 --- a/src/components/BowTarget.vue +++ b/src/components/BowTarget.vue @@ -107,7 +107,7 @@ onMounted(() => { - + {{ (currentRound > totalRound ? totalRound : currentRound) + "/" + diff --git a/src/components/BowTargetEdit.vue b/src/components/BowTargetEdit.vue index 7e4d881..13e0aa9 100644 --- a/src/components/BowTargetEdit.vue +++ b/src/components/BowTargetEdit.vue @@ -19,10 +19,6 @@ const props = defineProps({ type: Function, default: null, }, - editMode: { - type: Boolean, - default: true, - }, }); const rect = ref({}); @@ -31,6 +27,7 @@ const isDragging = ref(false); const dragStartPos = ref({ x: 0, y: 0 }); const capsuleHeight = ref(0); const scale = ref(1); +const scrollTop = ref(0); let lastMoveTime = 0; // 点击靶纸创建新的点 @@ -43,7 +40,14 @@ const onClick = async (e) => { return; } if (props.id === 7 || props.id === 9) { + // 放大并通过滚动将点击位置置于视窗中心 scale.value = 1.5; + const viewportH = rect.value.width; // 容器高度等于宽度(100vw) + const contentH = scale.value * rect.value.width; // 内容高度 + const clickYInContainer = e.detail.y - rect.value.top; + let target = clickYInContainer * scale.value - viewportH / 2; + target = Math.max(0, Math.min(contentH - viewportH, target)); + scrollTop.value = Math.round(target); } const newArrow = { x: (e.detail.x - 6) * scale.value, @@ -75,12 +79,14 @@ const confirmAdd = () => { } arrow.value = null; scale.value = 1; + scrollTop.value = 0; }; // 删除箭矢 const deleteArrow = () => { arrow.value = null; scale.value = 1; + scrollTop.value = 0; }; // 开始拖拽 - 同样修复坐标获取 @@ -156,8 +162,10 @@ onMounted(async () => { - { :style="{ width: scale * 100 + 'vw', height: scale * 100 + 'vw', - transform: `translate(${(100 - scale * 100) / 2}vw,${ - (100 - scale * 100) / 2 - }vw) translateY(${scale > 1 ? 16.7 : 0}%)`, + transform: `translateX(${(100 - scale * 100) / 2}vw)`, }" > @@ -228,7 +234,7 @@ onMounted(async () => { - +