Question

我已经制作了旋转菜单。

要选择项目，请通过单击并拖动来旋转菜单。

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

});

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

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

on＆＃39; mouseup＆＃39;我保存了新的＆＃39; newangle＆＃39;变量并覆盖＆＃39;角度变量＆＃39;。

我怀疑行中某处有错误

newangle =  (orgradians + radians) - angle;

我一直在撕扯我的头发试图让它发挥作用！

提前感谢任何指导！

-Paul

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

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

1 个答案: