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

Question

我做了一个旋转菜单。

要select 项目，您可以通过单击并拖动来旋转菜单。

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);

});

我的问题是在第一次拖动到 select 一个项目之后。

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

在 'mouseup' 我保存 'newangle' 变量并覆盖 'angle variable'.

我怀疑该行某处有错误

newangle =  (orgradians + radians) - angle;

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

提前感谢您的指导！

-保罗

Answer 1

如果您不在鼠标移动时使用三角函数，而只在定义圆的半径时使用一次三角函数，问题就会解决：

根据圆的半径求旋转速度：

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

利用旋转速度和鼠标移动时光标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);

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

Why does my menu jump the second time I try and drag it to a new item?

javascript

math

pi

trigonometry