poster-design/packages/color-picker/comps/AngleHandle.vue

<!--
 * @Author: ShawnPhang
 * @Date: 2023-11-29 10:34:54
 * @Description: 角度手柄
 * @LastEditors: ShawnPhang <https://m.palxp.cn>
 * @LastEditTime: 2023-11-29 19:24:14
-->
<template>
  <div class="angle-input-box">
    <input ref="numInput" v-model="num" class="angle-input" @focus="visiable = true" @blur="visiable = false" @input="inputChange" />
    <div v-show="visiable" class="AngleHandle" @mousedown="touch($event, true)" @mouseup="touch($event, false)">
      <div class="angle" @mouseup="turn" @mousemove="turn">
        <div :style="`transform: rotate(${angleInDegrees}deg)`" class="line"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, computed } from 'vue'

export default defineComponent({
  props: ['modelValue'],
  emits: ['change', 'update:modelValue'],
  setup(props, { emit }) {
    const num = ref(90)
    const numInput = ref(null)
    const angleInDegrees = computed(() => {
      return num.value - 90
    })
    let inProcess = false
    const visiable = ref(false)

    const inputChange = (e: any) => {
      emit('change', e)
    }
    watch(
      () => num.value,
      (v) => {
        props.modelValue !== num.value && emit('update:modelValue', v)
        emit('change')
      },
    )
    watch(
      () => props.modelValue,
      (v) => {
        num.value = v
      },
    )

    const turn = (e: any) => {
      if (!inProcess) {
        return
      }
      const origin = { x: 27, y: 27 }
      // 计算相对于原点的坐标差值
      const deltaX = e.offsetX - origin.x
      const deltaY = e.offsetY - origin.y
      // 计算夹角（弧度）
      const angleInRadians = Math.atan2(deltaY, deltaX)
      // 将弧度转换为角度
      const angleInDegrees = (angleInRadians * 180) / Math.PI
      num.value = Math.round(angleInDegrees + 90)
    }

    const touch = (e: any, isHandle: boolean) => {
      e.preventDefault()
      inProcess = isHandle
    }
    return { inputChange, num, turn, touch, angleInDegrees, numInput, visiable }
  },
})
</script>

<style lang="less">
.angle-input {
  width: 38px;
  margin-left: 5px;
  padding: 0 0 0 4px;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  position: relative;
}
.angle-input-box {
  position: relative;
}
.angle-input-box::after {
  content: '°';
  width: 5px;
  height: 2px;
  position: absolute;
  right: 2px;
  top: 0;
}

.AngleHandle {
  position: absolute;
  z-index: 2;
  right: 2px;
  margin-top: 3px;
  background: #ffffff;
  width: 60px;
  height: 60px;
  border-radius: 7px;
  box-shadow: 0 0 2px rgb(0 0 0 / 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  .angle {
    width: 54px;
    height: 54px;
    position: relative;
    overflow: hidden;
    background: #f1f2f4;
    border-radius: 50%;
    user-select: none;
    cursor: pointer;
  }
  .line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: #999999;
    pointer-events: none;
    transform-origin: left top;
  }
  .line::before {
    position: absolute;
    content: '';
    left: -1px;
    top: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #999999;
  }
  .line::after {
    position: absolute;
    content: '';
    right: 0;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999999;
  }
}
</style>