求助：点击按钮实现圆绕另一圆指定角度旋转

我看了你的现有代码，已经实现了鼠标拖动让picker绕circle旋转的功能，要加上按钮触发指定角度旋转的功能其实很简单，咱们只需要跟踪当前的旋转角度，再新增一个触发旋转的函数就行。下面是修改后的完整代码和详细说明：

修改后的完整代码 #

<div id="circle"></div> <!-- 假设这是被绕转的目标圆，你原代码里用到了这个元素 -->
<div id="picker"> 
  <div id="picker-circle"></div>
</div>
<img id="image1" src="Images/Homepage/apartment-architecture-ceiling-271724-min.jpg">
<input type="text" id="circle_rot" placeholder="输入旋转角度">
<button onclick="rotateByAngle()">执行旋转</button>

<script>
// 新增变量跟踪当前旋转角度
let currentRotation = 0;

var circle = document.getElementById('circle'),
    picker = document.getElementById('picker'),
    pickerCircle = picker.firstElementChild,
    rect = circle.getBoundingClientRect(),
    center = {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2
    },
    transform = (function() {
      var prefs = ['t', 'WebkitT', 'MozT', 'msT', 'OT'],
          style = document.documentElement.style,
          p
      for (var i = 0, len = prefs.length; i < len; i++) {
        if ((p = prefs[i] + 'ransform') in style) return p
      }
      alert('your browser doesnot support css transforms!')
    })(),
    rotate = function(x, y) {
      var deltaX = x - center.x,
          deltaY = y - center.y,
          angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI
      return angle
    },
    // 新增函数：应用旋转角度到picker
    applyRotation = function() {
      picker.style[transform] = `rotate(${currentRotation}deg)`;
      $('#circle_rot').val(picker.style[transform]);
    },
    // DRAGSTART
    mousedown = function(event) {
      event.preventDefault()
      document.body.style.cursor = 'move'
      // 初始化当前角度为鼠标位置对应的角度
      currentRotation = rotate(event.pageX, event.pageY);
      applyRotation();
      document.addEventListener('mousemove', mousemove)
      document.addEventListener('mouseup', mouseup)
    },
    // DRAG
    mousemove = function(event) {
      currentRotation = rotate(event.pageX, event.pageY);
      applyRotation();
    },
    // DRAGEND
    mouseup = function() {
      document.body.style.cursor = null;
      document.removeEventListener('mouseup', mouseup)
      document.removeEventListener('mousemove', mousemove)
    },
    // 按钮触发的旋转函数
    rotateByAngle = function() {
      const inputVal = document.getElementById('circle_rot').value;
      const angle = parseFloat(inputVal);
      if (!isNaN(angle)) {
        // 这里可以选择两种模式：
        // 1. 累加角度：在当前基础上旋转指定角度
        currentRotation += angle;
        // 2. 直接设置角度：将picker旋转到指定角度
        // currentRotation = angle;
        applyRotation();
      } else {
        alert('请输入有效的数字角度！');
      }
    }

// DRAG START
pickerCircle.addEventListener('mousedown', mousedown)
// ENABLE STARTING THE DRAG IN THE BLACK CIRCLE
circle.addEventListener('mousedown', function(event) {
  if (event.target == this) mousedown(event)
})
</script>

关键修改点说明 #

• 新增currentRotation变量：用来跟踪picker当前的旋转角度，这样不管是鼠标拖动还是按钮触发，都能基于同一个状态更新旋转，避免冲突。
• 新增applyRotation函数：把设置旋转样式和更新输入框的逻辑抽出来复用，减少重复代码。
• 修改拖动逻辑：在mousedown和mousemove里，把计算出的角度赋值给currentRotation，再调用applyRotation应用样式，而不是直接设置样式。
• 新增rotateByAngle函数：读取输入框的角度值，验证是有效数字后，更新currentRotation（支持累加或直接设置，你可以注释掉其中一种模式），然后应用旋转。
• 添加触发按钮：在HTML里新增按钮，绑定点击事件到rotateByAngle函数，方便用户触发旋转。

这样修改后，你既可以继续用鼠标拖动旋转，也可以在输入框里输入角度（比如90、-45等），点击按钮实现指定角度的旋转啦～

内容的提问来源于stack exchange，提问作者Kanav Gilhotra