vue模拟摇杆组件

使用vue实现模拟摇杆组件

点击中心圆拖动鼠标,最大范围是外圈圆,实时获取摇动角度

新建rocker.vue

html 复制代码
<script setup lang="ts">

const { r } = withDefaults(defineProps<{
  r: number,
  inR: number
}>(), {
  r: 100,
  inR: 30
})

let outCircleRef = ref<HTMLElement>()
let innerCircleRef = ref<HTMLElement>()
let mouseAngle = ref<number>(0)
let mouseAngleComp = computed(() => {
  return mouseAngle.value.toFixed(2) + '°'
})

defineExpose({ mouseAngleComp })

function mouseDown(e: MouseEvent) {
  document.body.addEventListener('mousemove', mouseMove)
}

function mouseMove(e: MouseEvent) {
  if (outCircleRef.value && innerCircleRef.value) {
    let centerX = outCircleRef.value.offsetLeft + r
    let centerY = outCircleRef.value.offsetTop + r
    let disToCenter = distance(centerX, centerY, e.clientX, e.clientY)
    let ratioX = 0
    let ratioY = 0
    if (disToCenter <= r) {
      ratioX = (e.clientX - outCircleRef.value.offsetLeft) / (r * 2) * 100
      ratioY = (e.clientY - outCircleRef.value.offsetTop) / (r * 2) * 100
    } else {
      let copyX = e.clientX
      let copyY = e.clientY
      while (disToCenter > r) {
        copyX += copyX > centerX ? -2 : 2
        copyY += copyY > centerY ? -2 : 2
        disToCenter = distance(centerX, centerY, copyX, copyY)
      }
      ratioX = (copyX - outCircleRef.value.offsetLeft) / (r * 2) * 100
      ratioY = (copyY - outCircleRef.value.offsetTop) / (r * 2) * 100
    }
    innerCircleRef.value.style.left = ratioX + '%'
    innerCircleRef.value.style.top = ratioY + '%'
    mouseAngle.value = (Math.atan2(ratioX, ratioY) * 180) % 360
  }
}

function mouseUp(e: MouseEvent) {
  document.body.removeEventListener('mousemove', mouseMove)
  innerCircleRef.value!.style.left = '50%'
  innerCircleRef.value!.style.top = '50%'
  mouseAngle.value = 0
}

function distance(x0: number, y0: number, x1: number, y1: number) {
  return Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2)
}

onMounted(() => {
  innerCircleRef.value?.addEventListener('mousedown', mouseDown)
  document.body.addEventListener('mouseup', mouseUp)
})

</script>

<template>
  <div>
    <div class="out_circle" ref="outCircleRef" :style="{ width: r * 2 + 'px', height: r * 2 + 'px' }">
      <div class="inner_circle" ref="innerCircleRef" :style="{ width: inR * 2 + 'px', height: inR * 2 + 'px' }">
        Press
      </div>
    </div>
  </div>
</template>

<style scoped>
.out_circle {
  border-radius: 50%;
  background-color: #ddd;
  position: relative;
  margin-top: 8px;

  .inner_circle {
    border-radius: 50%;
    background-color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    user-select: none;

    &:active {
      background: #666;
    }
  }
}
</style>

使用:

html 复制代码
<rocker ref="rockerRef" :r="100" :in-r="50"/>
相关推荐
前端没钱19 分钟前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
汪洪墩23 分钟前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
NoneCoder24 分钟前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影27 分钟前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员1 小时前
鸿蒙学习记录
开发语言·前端·javascript
顽疲1 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端
羊小猪~~1 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了1 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js
程序员shen1616112 小时前
抖音短视频saas矩阵源码系统开发所需掌握的技术
java·前端·数据库·python·算法
Ling_suu2 小时前
SpringBoot3——Web开发
java·服务器·前端