shoot-miniprograms/src/components/BowTargetEdit.vue

<script setup>
import { ref, onMounted } from "vue";
import { getElementRect, calcRing } from "@/util";

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
  src: {
    type: String,
    default: "",
  },
  arrows: {
    type: Array,
    default: () => [],
  },
  onChange: {
    type: Function,
    default: null,
  },
});

const rect = ref({});
const arrow = ref(null);
const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });

// 点击靶纸创建新的点
const onClick = async (e) => {
  if (arrow.value !== null || !props.onChange) return;
  const newArrow = {
    x: e.detail.x - (rect.value.width * 0.1) / 2,
    y: e.detail.y - rect.value.top - 10,
  };
  const side = rect.value.width * 0.9;
  newArrow.ring = calcRing(props.id, newArrow.x, newArrow.y, side, side);
  arrow.value = {
    ...newArrow,
    x: newArrow.x / side,
    y: newArrow.y / side,
  };
};

// 确认添加箭矢
const confirmAdd = () => {
  if (props.onChange)
    props.onChange({ ...arrow.value, ring: arrow.value.ring || "M" });
  arrow.value = null;
};

// 删除箭矢
const deleteArrow = () => {
  arrow.value = null;
};

// 开始拖拽 - 同样修复坐标获取
const startDrag = async (e, index) => {
  if (!e.touches[0]) return;
  isDragging.value = true;
  dragStartPos.value = {
    x: e.touches[0].clientX,
    y: e.touches[0].clientY,
  };
};

// 拖拽移动 - 同样修复坐标获取
const onDrag = async (e) => {
  if (!isDragging.value || !e.touches[0] || !arrow.value) return;

  let clientX = e.touches[0].clientX;
  let clientY = e.touches[0].clientY;

  // 计算移动距离
  const deltaX = clientX - dragStartPos.value.x;
  const deltaY = clientY - dragStartPos.value.y;

  const side = rect.value.width * 0.9;

  // 更新坐标
  arrow.value.x = Math.max(0, Math.min(side, arrow.value.x * side + deltaX));
  arrow.value.y = Math.max(0, Math.min(side, arrow.value.y * side + deltaY));
  arrow.value.ring = calcRing(
    props.id,
    arrow.value.x,
    arrow.value.y,
    side,
    side
  );
  arrow.value.x = arrow.value.x / side;
  arrow.value.y = arrow.value.y / side;

  // 更新拖拽起始位置
  dragStartPos.value = { x: clientX, y: clientY };
};

// 结束拖拽
const endDrag = () => {
  isDragging.value = false;
};

onMounted(async () => {
  const result = await getElementRect();
  rect.value = result;
});
</script>

<template>
  <movable-area class="move-container">
    <view
      class="container"
      @click="onClick"
      @touchmove="onDrag"
      @touchend="endDrag"
    >
      <image :src="src" mode="widthFix" />
      <view
        v-for="(arrow, index) in arrows"
        :key="index"
        class="arrow-point"
        :style="{
          left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
          top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
        }"
      >
        <view
          v-if="arrow.x !== undefined && arrow.y !== undefined"
          class="point"
          ><text>{{ index + 1 }}</text></view
        >
      </view>
      <movable-view
        v-if="arrow"
        class="arrow-point"
        direction="all"
        :animation="false"
        :x="rect.width * 0.9 * arrow.x"
        :y="rect.width * 0.9 * arrow.y"
      >
        <!-- 箭矢点 -->
        <view class="point"> </view>
        <!-- 编辑按钮组（只在编辑状态下显示） -->
        <view class="edit-buttons" @click.stop>
          <view class="edit-btn-text">
            <text v-if="arrow.ring === 0" :style="{ width: '100%' }"
              >未上靶</text
            >
            <text v-if="arrow.ring !== 0">{{ arrow.ring }}</text>
            <text
              v-if="arrow.ring > 0"
              :style="{
                fontSize: '16px',
                marginLeft: '2px',
              }"
              >环</text
            >
          </view>
          <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
            <image src="../static/arrow-edit-save.png" mode="widthFix" />
          </view>
          <view class="edit-btn delete-btn" @click.stop="deleteArrow(index)">
            <image src="../static/arrow-edit-delete.png" mode="widthFix" />
          </view>
          <view
            class="edit-btn drag-btn"
            @touchstart.stop="startDrag($event, index)"
          >
            <image src="../static/arrow-edit-move.png" mode="widthFix" />
          </view>
        </view>
      </movable-view>
    </view>
  </movable-area>
</template>

<style scoped>
.move-container {
  width: 90vw;
  height: 90vw;
  margin: 10px auto;
}
.container {
  width: 100%;
  position: relative;
  user-select: none;
}

.container > image {
  width: 100%;
  display: block;
}

.arrow-point {
  position: absolute;
}

.point {
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
  z-index: 1;
  color: #fff;
  font-size: 8px;
  text-align: center;
  line-height: 10px;
  box-sizing: border-box;
  background-color: #ff4444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.point > text {
  transform: scaleX(0.7);
  display: block;
  font-weight: bold;
}

.edit-buttons {
  position: absolute;
  top: calc(50% - 44px);
  left: calc(50% - 44px);
  background: #18ff6899;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: flex-end;
}

.edit-btn-text {
  width: 100%;
  display: flex;
  justify-content: center;
}

.edit-btn-text > text {
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.edit-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.edit-btn > image {
  width: 24px;
  height: 24px;
}

.confirm-btn {
  left: calc(50% - 12px);
  bottom: -12px;
}

.delete-btn {
  left: calc(50% - 12px);
  top: -12px;
}

.drag-btn {
  right: -12px;
  bottom: -12px;
}
</style>