vue实现拖拽旋转

实现拖拽旋转的基本思路

在Vue中实现拖拽旋转功能，通常需要结合鼠标事件和CSS变换。通过监听鼠标的按下、移动和释放事件，计算旋转角度并应用到目标元素上。

核心代码示例

以下是一个基于Vue 3的拖拽旋转实现示例：

<template>
  <div 
    class="rotatable-element"
    ref="element"
    @mousedown="startRotate"
    :style="{ transform: `rotate(${angle}deg)` }"
  >
    拖拽我旋转
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const angle = ref(0)
    const element = ref(null)
    const startAngle = ref(0)
    const startPosition = ref({ x: 0, y: 0 })
    const isRotating = ref(false)

    const getCenter = (el) => {
      const rect = el.getBoundingClientRect()
      return {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
      }
    }

    const getAngle = (center, position) => {
      return Math.atan2(position.y - center.y, position.x - center.x) * 180 / Math.PI
    }

    const startRotate = (e) => {
      isRotating.value = true
      const center = getCenter(element.value)
      startPosition.value = { x: e.clientX, y: e.clientY }
      startAngle.value = getAngle(center, startPosition.value) - angle.value

      document.addEventListener('mousemove', rotate)
      document.addEventListener('mouseup', stopRotate)
    }

    const rotate = (e) => {
      if (!isRotating.value) return
      const center = getCenter(element.value)
      const currentPosition = { x: e.clientX, y: e.clientY }
      angle.value = getAngle(center, currentPosition) - startAngle.value
    }

    const stopRotate = () => {
      isRotating.value = false
      document.removeEventListener('mousemove', rotate)
      document.removeEventListener('mouseup', stopRotate)
    }

    return { angle, element, startRotate }
  }
}
</script>

<style>
.rotatable-element {
  width: 200px;
  height: 200px;
  background-color: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transform-origin: center;
}
</style>

关键点解析

计算旋转中心
通过getBoundingClientRect()获取元素的位置和尺寸，计算元素的中心点坐标。

角度计算
使用Math.atan2函数计算鼠标位置相对于元素中心的角度，公式为： $$ angle = \arctan2(y - centerY, x - centerX) \times \frac{180}{\pi} $$

事件处理
在鼠标按下时记录初始角度和位置，移动时计算新角度并更新旋转值，释放时移除事件监听。

CSS变换
通过绑定transform: rotate()样式实现视觉旋转效果，注意设置transform-origin为center确保围绕中心旋转。

优化建议

1. 节流处理
   对mousemove事件进行节流，避免频繁重绘导致的性能问题。

2. 触摸支持
   添加touchstart、touchmove和touchend事件处理，实现移动端兼容。

3. 限制旋转范围
   如果需要限制旋转角度，可以在计算角度时进行范围约束。

4. 动画效果
   添加CSS过渡效果使旋转更平滑：

   transition: transform 0.1s ease-out;

5. 组件化
   将旋转逻辑封装为可复用的指令或组件，方便多处使用。