vue实现拖拽旋转

Vue 实现拖拽旋转功能

实现拖拽旋转功能通常需要结合鼠标事件和数学计算。以下是一个基于 Vue 的实现方法：

基本思路

1. 监听鼠标按下、移动和释放事件
2. 计算旋转角度
3. 应用旋转样式到元素

代码实现

<template>
  <div class="container">
    <div 
      class="rotatable-element"
      :style="{ transform: `rotate(${angle}deg)` }"
      @mousedown="startRotate"
    >
      可旋转元素
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      angle: 0,
      startAngle: 0,
      center: { x: 0, y: 0 },
      isRotating: false
    }
  },
  methods: {
    startRotate(e) {
      this.isRotating = true
      const rect = e.target.getBoundingClientRect()
      this.center = {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
      }
      this.startAngle = Math.atan2(e.clientY - this.center.y, e.clientX - this.center.x) * 180 / Math.PI

      window.addEventListener('mousemove', this.rotate)
      window.addEventListener('mouseup', this.stopRotate)
    },
    rotate(e) {
      if (!this.isRotating) return

      const currentAngle = Math.atan2(e.clientY - this.center.y, e.clientX - this.center.x) * 180 / Math.PI
      this.angle = this.angle + (currentAngle - this.startAngle)
      this.startAngle = currentAngle
    },
    stopRotate() {
      this.isRotating = false
      window.removeEventListener('mousemove', this.rotate)
      window.removeEventListener('mouseup', this.stopRotate)
    }
  }
}
</script>

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style>

实现说明

1. 使用 transform: rotate() CSS 属性来实现旋转效果
2. 计算元素中心点作为旋转中心
3. 通过 Math.atan2 计算鼠标相对于中心点的角度
4. 监听全局鼠标事件以便在鼠标移出元素时仍能继续旋转

进阶优化

1. 添加触摸事件支持实现移动端兼容
2. 添加旋转限制（如最小/最大角度）
3. 实现平滑旋转动画
4. 添加旋转手柄而不是整个元素可旋转

数学原理

旋转角度计算基于以下公式：

θ = atan2(y, x) × (180/π)

其中：

• θ 是旋转角度
• atan2 是计算反正切的函数
• x 和 y 是鼠标坐标相对于旋转中心的偏移量

注意事项

1. 确保元素有明确的尺寸
2. 考虑性能优化，避免频繁重绘
3. 在组件销毁时移除事件监听器