简单的js旋转角度圆盘

<script setup lang="ts">
import { reactive,computed } from 'vue';
const pos = reactive({
  offsetX:0,
  offsetY:0
})
const r = 100;
const tranPos = (offsetX,offsetY) => {
  offsetX-=r;
  offsetY=r-offsetY;
  // 
  return {offsetX,offsetY}
}

let isDown = false;
const down = (e) => {
  isDown = true;
}

const move = (e) => {
  if(!isDown) return;
  const {offsetX,offsetY} = e;// 鼠标移动时的坐标
  Object.assign(pos,tranPos(offsetX,offsetY));

}

const up = (e) => {
  isDown = false;
}


const deg = computed(() => {
  // 求其实坐标跟 结束坐标之间的夹角 并判定是逆时针旋转还是顺时针旋转
  const {offsetX,offsetY} = pos
  const theta = Math.atan2(offsetY,offsetX);//返回的弧度值，在x正半轴和y轴负半轴之间夹角的余弦值。
  return theta * 180 / Math.PI;
})

</script>
<template>
  <div>结束点:({{pos.offsetX}},{{pos.offsetY}}) ; 角度：{{deg||0}}</div>
  <div id="yuan" @mousedown="down" @mousemove="move" @mouseup="up"></div>
</template>
<style scoped lang="scss">

#yuan{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  border: 1px solid red;
  margin: auto;
  margin-top: calc(50vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  --x:calc(v-bind(pos.offsetX) * 1px);
  --y:calc(v-bind(pos.offsetY) * -1px);
  &::before{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: green;
    content:'';
    transform: translate(var(--x),var(--y));
  }
  
  &::after{
    width: 4px;
    height: 4px;
    display: block;
    content:'';
    border-radius: 100%;
    background-color: #000;
  }
}
</style>