javascript - jQuery“史莱姆菜单”-像素完美舍入

我已经成功编程了jQuery粘液菜单，现在它可以正常工作了。我唯一的问题是我分别移动粘液的箭头和结束圆圈（图标），因此，如果将光标移离起始点太远，它将无法精确地连接到粘液。这一定是一个四舍五入的问题。这是我正在谈论的图像：



这是我正在研究的小提琴：
http://jsfiddle.net/41Lcj653/4/

编辑（工作中）：http://jsfiddle.net/41Lcj653/7/

谁能解决这个问题？我使用CSS转换，并在每个步骤中使用JS更新CSS规则。

代码的JS部分：

$(function(){
    $(window).mousemove(function(e){
        moveslime(e);
    });
});

function moveslime(e){
    var rad  = $('.arrow').height() / 2;
    var ofs  = $('.arrow').offset();
    var mPos = {x: e.pageX-25-rad, y: e.pageY-25-rad};
    var dir  = Math.round( -(Math.atan2(mPos.x, mPos.y)) / (Math.PI/180) );
    $('.arrow').css('transform','rotate('+dir+'deg)');
    $('.arrow').css('border-width','0 25px '+pdist(0, 0, mPos.x, mPos.y)+'px 25px');
    $('.bubble').css('left', mPos.x+'px').css('top', mPos.y+'px');
}

function pdist(x1,y1,x2,y2) {
    return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));
}

最佳答案

您看到此“未精确连接”的原因是旋转以360步（一个圆的360度）进行。当您靠近中心时，可以忽略该效果，但是您越远离中心（圆周长！），度之间的可见间隙会增加。
也许用svg尝试一下？

实际上，您可以使用度数的浮点数..所以不要四舍五入！

https://jsfiddle.net/41Lcj653/5/

// without math.round
 var dir  = -(Math.atan2(mPos.x, mPos.y)) / (Math.PI/180);