jQuery“粘液菜单” - 像素完美舍入答案

【问题标题】：jQuery "slime menu" - pixel perfect roundingjQuery“粘液菜单” - 像素完美舍入
【发布时间】：2015-03-31 09:56:13
【问题描述】：

我已经成功编写了我的 jQuery slime 菜单，现在它运行起来很漂亮。我唯一的问题是我分别移动了史莱姆的箭头和结束圆圈（图标），所以如果您将光标移离起点太远，它将无法精确地连接到史莱姆。这一定是一个四舍五入的问题。这是我正在谈论的图像：

这是我正在制作的小提琴： 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));
}

【问题讨论】：

你能解释一下如何计算箭头末端的宽度吗？
箭头的宽度有一个固定的 50px (border-width: { 0px 25px %VARIABLE% 25px; } ) 25x2 = 50px。下面的圆圈也有一个固定的 50px 宽度。我认为问题在于箭头的角度是圆的......

标签： javascript jquery css transform rounding

【解决方案1】：

您看到这种“未精确连接”的原因是旋转以 360 步（圆周的 360 度）进行。当您靠近中心时，可以忽略此影响，但是您离中心越远（增加圆的周长！），度数之间的可见差距就会增加。也许用 svg 试试这个？

实际上你可以使用浮点数一个度数..所以不要四舍五入！

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

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

【讨论】：

谢谢，看起来不错！ :)

【解决方案2】：

一些 jQuery 方法，如高度四舍五入小数。你可以试试这个：

$(".arrow")[0].getBoundingClientRect().height

【讨论】：