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,
  };
  newArrow.ring = calcRing(
    props.id,
    newArrow.x,
    newArrow.y,
    rect.value.width * 0.9,
    rect.value.height - rect.value.top
  );
  arrow.value = newArrow;
};

// 确认添加箭矢
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 width = rect.value.width * 0.9;
  const height = rect.value.height - rect.value.top;

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

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

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

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

<template>
  <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) + 'px',
        top: (arrow.y !== undefined ? arrow.y : 0) + 'px',
      }"
    >
      <view v-if="arrow.x !== undefined && arrow.y !== undefined" class="point"
        ><text>{{ index + 1 }}</text></view
      >
    </view>
    <!-- 渲染所有箭矢点 -->
    <view
      v-if="arrow"
      class="arrow-point"
      :style="{
        left: arrow.x + 'px',
        top: arrow.y + 'px',
      }"
    >
      <!-- 箭矢点 -->
      <view class="point"> </view>
      <!-- 编辑按钮组（只在编辑状态下显示） -->
      <view class="edit-buttons" @click.stop>
        <text
          >{{ arrow.ring === 0 ? "未上靶" : arrow.ring
          }}<text
            :style="{
              fontSize: '20px',
              marginLeft: arrow.ring > 0 ? '5px' : 0,
            }"
            >{{ arrow.ring > 0 ? "环" : "" }}</text
          ></text
        >
        <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>
    </view>
  </view>
</template>

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

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

.arrow-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.point {
  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: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #18ff6899;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: flex-end;
}

.edit-buttons > text {
  width: 100%;
  display: block;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.edit-btn {
  transform: translateX(-50%) translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

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

.confirm-btn {
  left: 50%;
  bottom: -24px;
}

.delete-btn {
  left: 50%;
  top: 0;
}

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