js实现按住旋转

实现按住旋转的JavaScript方法

使用JavaScript实现按住旋转功能通常涉及鼠标或触摸事件监听，结合CSS变换或Canvas绘制。以下是两种常见实现方式：

基于CSS和鼠标事件的旋转

通过监听鼠标移动事件计算旋转角度，并应用CSS的transform属性实现旋转效果。

let isDragging = false;
let startAngle = 0;
let currentAngle = 0;
const element = document.getElementById('rotatable-element');

element.addEventListener('mousedown', (e) => {
  isDragging = true;
  startAngle = getAngle(e.clientX, e.clientY);
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const angle = getAngle(e.clientX, e.clientY);
  currentAngle += angle - startAngle;
  startAngle = angle;
  element.style.transform = `rotate(${currentAngle}deg)`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

function getAngle(x, y) {
  const rect = element.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  return Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
}

基于Canvas的旋转控制

在Canvas中实现更精细的旋转控制，适合需要自定义绘制的情况。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let angle = 0;
let isRotating = false;
let lastX, lastY;

canvas.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  lastX = e.clientX - rect.left;
  lastY = e.clientY - rect.top;
  isRotating = true;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isRotating) return;
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  const deltaAngle = Math.atan2(y - centerY, x - centerX) - 
                    Math.atan2(lastY - centerY, lastX - centerX);

  angle += deltaAngle * 180 / Math.PI;
  lastX = x;
  lastY = y;
  drawRotatedObject();
});

canvas.addEventListener('mouseup', () => {
  isRotating = false;
});

function drawRotatedObject() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.fillRect(-50, -50, 100, 100); // 示例矩形
  ctx.restore();
}

触摸设备适配

为支持触摸设备，需要添加相应的事件监听器：

element.addEventListener('touchstart', (e) => {
  isDragging = true;
  const touch = e.touches[0];
  startAngle = getAngle(touch.clientX, touch.clientY);
});

document.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  const touch = e.touches[0];
  const angle = getAngle(touch.clientX, touch.clientY);
  currentAngle += angle - startAngle;
  startAngle = angle;
  element.style.transform = `rotate(${currentAngle}deg)`;
});

document.addEventListener('touchend', () => {
  isDragging = false;
});

性能优化建议

对于复杂场景，考虑使用requestAnimationFrame优化动画性能。避免在事件处理函数中直接进行DOM操作，改为在动画帧中统一处理。

function updateRotation() {
  if (isDragging) {
    requestAnimationFrame(updateRotation);
    element.style.transform = `rotate(${currentAngle}deg)`;
  }
}