旋转元素时如何阻止光标进入特定区域？

我明白你的需求了——就是想让用户拖动旋转手柄时，没法把鼠标拉到元素中心附近，而是强制鼠标沿着以元素中心为圆心的固定圆周滑动对吧？这其实可以通过计算鼠标与中心的距离，超出最小范围时修正鼠标位置来实现，下面是具体的修改方案：

核心思路 #

• 设定一个最小允许半径（比如你说的20px），当鼠标到元素中心的距离小于这个值时，就把鼠标位置“拉”到这个半径的圆周上
• 保持鼠标原本的角度方向，只是调整距离，这样旋转的逻辑不会被打乱

修改后的代码 #

// 定义最小允许的半径（可根据需求调整）
const minRadius = 20;

$('.element').rotatable({ 
    handle: $('.element .handle'), 
    start: function( event, ui ) { 
        rotate_in_progress = true; 
    }, 
    stop: function( event, ui ) { 
        rotate_in_progress = false; 
    }, 
    rotate: function( event, ui ) { 
        // 获取当前鼠标位置
        let mouseX = event.clientX;
        let mouseY = event.clientY;
        
        // 计算元素中心坐标
        const $element = $('.element');
        const elementLeft = parseInt($element.css("left"));
        const elementTop = parseInt($element.css("top"));
        const elementWidth = parseInt($element.css("width"));
        const elementHeight = parseInt($element.css("height"));
        const centerX = elementLeft + elementWidth / 2;
        const centerY = elementTop + elementHeight / 2;
        
        // 计算鼠标到中心的向量差
        const dx = mouseX - centerX;
        const dy = mouseY - centerY;
        // 计算当前距离
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        // 如果距离小于最小半径，修正鼠标位置
        if (distance < minRadius) {
            // 计算当前角度
            const angle = Math.atan2(dy, dx);
            // 根据角度和最小半径重新计算鼠标位置
            mouseX = centerX + minRadius * Math.cos(angle);
            mouseY = centerY + minRadius * Math.sin(angle);
            
            // 修正事件对象的鼠标坐标，让rotatable插件使用这个修正后的值
            event.clientX = mouseX;
            event.clientY = mouseY;
        }
    } 
});

代码说明 #

• 最小半径设置：minRadius变量可以根据你的需求调整，比如改成30px或者其他值
• 坐标计算：先准确算出元素的中心位置，再计算鼠标与中心的相对位置
• 距离判断与修正：当鼠标太近时，用三角函数算出对应角度下的圆周坐标，然后替换事件里的鼠标位置，这样插件就会基于这个修正后的位置来计算旋转角度，用户看起来就是鼠标被“卡”在圆周上滑动
• 事件对象修正：直接修改event.clientX和event.clientY，确保Rotatable插件能拿到正确的约束后位置，这样旋转逻辑不会出错

这样修改后，用户拖动旋转手柄时，就没法把鼠标拖到元素中心20px范围内了，鼠标会自动沿着圆周滑动，完美实现你要的效果！

内容的提问来源于stack exchange，提问作者sveti petar