insomnia-cognition-h5/src/components/RoundSlider/index.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  centerName: {
    type: String,
    default: '中心点',
  },
  topName: {
    type: String,
    default: '',
  },
  moveName: {
    type: String,
    default: '3333',
  },
})
const emits = defineEmits(['curValue'])

// 定义角度值
const angle = ref(0)
const angleDiff = ref(0)

// 获取滑块元素
const sliderElement = ref<HTMLDivElement | null>(null)

// 鼠标按下事件
function onMouseDown(event: MouseEvent) {
  startDrag(event)
}

// 触摸开始事件
function onTouchStart(event: TouchEvent) {
  startDrag(event.touches[0])
}

// 开始拖动
function startDrag(event: MouseEvent | Touch) {
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
  document.addEventListener('touchmove', onTouchMove)
  document.addEventListener('touchend', onMouseUp)

  // 计算初始角度
  const rect = sliderElement.value!.getBoundingClientRect()
  const x = event.clientX - (rect.left + rect.width / 2)
  const y = event.clientY - (rect.top + rect.height / 2)
  angle.value = calculateAngle(x, y) + 90
  angleDiff.value = calculateAngleDiff(angle.value)
  emits('curValue', angleDiff.value)
}

// 鼠标移动事件
function onMouseMove(event: MouseEvent) {
  updateAngle(event)
}

// 触摸移动事件
function onTouchMove(event: TouchEvent) {
  updateAngle(event.touches[0])
}

// 更新角度
function updateAngle(event: MouseEvent | Touch) {
  const rect = sliderElement.value!.getBoundingClientRect()
  const x = event.clientX - (rect.left + rect.width / 2)
  const y = event.clientY - (rect.top + rect.height / 2)
  angle.value = calculateAngle(x, y) + 90
  angleDiff.value = calculateAngleDiff(angle.value)
  emits('curValue', angleDiff.value)
}

// 鼠标抬起事件
function onMouseUp() {
  document.removeEventListener('mousemove', onMouseMove)
  document.removeEventListener('mouseup', onMouseUp)
  document.removeEventListener('touchmove', onTouchMove)
  document.removeEventListener('touchend', onMouseUp)
}

// 计算角度
function calculateAngle(x: number, y: number): number {
  const rad = Math.atan2(y, x)
  const deg = (rad * 180) / Math.PI
  return deg >= 0 ? deg : 360 + deg
}

// 计算角度差
function calculateAngleDiff(currentAngle: number): number {
  let diff = currentAngle
  if (diff > 360 && diff <= 450) {
    diff -= 360
  }
  else if (diff >= 180 && diff <= 360) {
    diff = 360 - diff
  }
  return diff
}

onMounted(() => {
  if (sliderElement.value) {
    // 初始化角度
    angle.value = calculateAngle(0, 0) // 假设初始位置在正上方
    angleDiff.value = calculateAngleDiff(angle.value)
  }

  const touchArea = document.getElementById('touchArea')
  // 监听触摸事件
  touchArea!.addEventListener('touchstart', (event) => {
    // 记录开始触摸的位置
    const xStart = event.touches[0].pageX
    touchArea!.addEventListener('touchmove', (event) => {
      // 计算移动的距离
      const xMove = event.touches[0].pageX - xStart
      // 如果移动的距离大于0，则为左滑，小于0则为右滑
      if (Math.abs(xMove) > 0) {
        // 阻止页面滚动
        event.preventDefault()
        // 执行滑动处理
        // console.log(`Swipe detected, distance: ${xMove}`)
      }
    })
  }, false)
})
</script>

<template>
  <div class="slider-container">
    <div
      id="touchArea"
      ref="sliderElement"
      class="circle-slider"
      @mousedown="onMouseDown"
      @mousemove="onMouseMove"
      @mouseup="onMouseUp"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onMouseUp"
    >
      <div class="center-point" />
      <div class="absolute-center z-399 w-[100px] text-center text-[16px] text-[#3A3A3A]">
        {{ props.centerName }}
      </div>
      <div class="target-point flex-column flex-center text-[16px] text-[#3A3A3A]">
        <van-icon name="play" class="rotate-90" />
        <span>{{ props.topName }}</span>
      </div>
      <div class="move-point" :style="{ transform: `translateX(-50%) rotate(${angle}deg)` }">
        <span class="absolute left-26px block w-[180px] text-[16px] text-[#F87171]">{{ props.moveName }}</span>
      </div>
      <img
        src="@/assets/images/task/spatialOrientationAbility/icon_pointer.png"
        class="absolute left-[50%] top-[38px] z-19 h-[150px] w-[20px] translate-x-[-50%]"
        alt=""
      >
      <img
        src="@/assets/images/task/spatialOrientationAbility/icon_pointer_red.png"
        class="red-line absolute left-[50%] top-[40px] z-19 h-[130px] w-[4px] rounded-[2px]"
        :style="{ transform: `translateX(-50%) rotate(${angle}deg)` }"
        alt=""
      >
      <span class="absolute top-[295px] block text-[15px] text-[#3A3A3A]">{{ angleDiff.toFixed(5) }}°</span>
    </div>
  </div>
</template>

<style scoped>
.slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle-slider {
  position: relative;
  width: 280px; /* 直径 */
  height: 280px; /* 直径 */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/images/task/spatialOrientationAbility/bg_circle.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* 可选，让图片居中对齐 */
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 99;
  background-image: url('@/assets/images/task/spatialOrientationAbility/icon_center.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; /* 可选，让图片居中对齐 */
}

.target-point {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 40px;
}

.move-point {
  position: absolute;
  top: 20px;
  left: 50%;
  transform-origin: center 550%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #f3f3f3 !important;
  box-shadow: 0 0 4px 0 #000 !important;
  cursor: move;
}

.red-line {
  transform-origin: 50% 76%;
}
</style>