javascript - 为什么我第二次尝试将菜单拖到新项目时会跳转？

Question

我做了一个旋转菜单。

要选择一个项目，您可以通过单击并拖动来旋转菜单。

http://codepen.io/PaulBunker/pen/ZGgxvY

var dragging = false;
var links = $('.menu a');
var radius = 520;
var degree = 0.262;
var angle = 0.79;
var orgX;
var orgY;
var offset = $('.menu').offset();
var newangle;
var origradians;

function setItems(angle) {
    var internalangle = angle;
    links.each(function() {

        var y = Math.round(radius * Math.cos(internalangle));
        var x = Math.round(radius * Math.sin(internalangle));

        $(this).css({
            left: x + 'px',
            top: 0-y + 'px',
            display:'block',
        });

        $(this).addClass(y);


        if (y < 10 & x > 0) {
            $(this).addClass('active');
        }
        if ( y < -10 || y > 0) {
            $(this).removeClass('active');
        }


        internalangle += degree;

    });
}


$(function() {

    $(document).mousedown(function(evt) {
        orgX = evt.pageX - offset.left;
        orgY = evt.pageY - offset.top;
        orgradians = Math.atan2(orgX, orgY);
        dragging = true;
    });

    $(document).mouseup(function() {
        dragging = false;
        angle = newangle;
    });

    $(document).mousemove(function(evt) {
        if (dragging) {

            var x = evt.pageX - offset.left;
            var y = evt.pageY - offset.top;
            var radians = Math.atan2(y, x);


            newangle =  (orgradians + radians) - angle;
            console.log (orgradians , radians, angle, newangle);

            setItems(newangle);
            console.log(newangle);
        }
    });

    setItems(angle);

});

我的问题是在第一次拖动以选择一个项目之后。

在第二次拖动开始时，菜单跳转到了错误的位置。

在 'mouseup' 上我保存 'newangle' 变量并覆盖 'angle 变量'。

我怀疑某处有错误

newangle =  (orgradians + radians) - angle;

我一直在努力尝试让它发挥作用!

提前感谢您的指导!

-保罗

Answer 1

如果您不在鼠标移动时使用三 Angular 函数，而只在定义圆的半径时使用它一次，它将解决问题:

1. 根据圆的半径计算出旋转速度:

   var rotationSpeed = Math.atan(1/radius);
   

2. 利用旋转速度和鼠标移动时光标在Y轴位置的差异:

   var newangle = lastangle - (difY*rotationSpeed);
   

http://codepen.io/stevenarcher/pen/yNmRyP

var dragging = false;
var links = $('.menu a');
var radius = 520;
var degree = 0.262;
var lastY;
var offset = $('.menu').offset();
var lastangle = 0;
var rotationSpeed = Math.atan(1/radius);


function setItems(internalangle) {
    links.each(function() {

        var y = Math.round(radius * Math.cos(internalangle));
        var x = Math.round(radius * Math.sin(internalangle));

        $(this).css({
            left: x + 'px',
            top: 0 - y + 'px',
            display:'block',
        });

        $(this).addClass(y);

        if (y < 10) {
            $(this).addClass('active');
        }
        if ( y < -10 || y > 0) {
            $(this).removeClass('active');
        }
        internalangle += degree;

    });
}



$(document).mousedown(function(evt) {
    lastY = evt.pageY - offset.top;
    dragging = true;
});

$(document).mouseup(function(evt) {
    dragging = false;
});

$(document).mousemove(function(evt) {

    if (dragging) {    
        var y = evt.pageY - offset.top;
        var difY = lastY - y;
        lastY = y;
        var newangle = lastangle - (difY*rotationSpeed);
        setItems(newangle);
        lastangle = newangle;
    }
});

setItems(0);