javascript - 将元素限制为 mousemove 上的圆形容器轮廓

Question

我设置了一个小 div 以跟随我的鼠标，但仍受限于父 div 尺寸。这是FIDDLE .

这是我用来使跟随者 div 跟随鼠标并限制父级大小的脚本。完整的代码可以在 fiddle 中看到。

var mouseX = 0, mouseY = 0, limitX = $('.container').width()-15, limitY = $('.container').height()-15;
$(window).mousemove(function(e){
var offset = $('.container').offset();
var halfContWidth = $('.container').width()/2;
var halfContHeight = $('.container').height()/2;
mouseX = Math.min(e.pageX - offset.left, limitX);
mouseY = Math.min(e.pageY - offset.top, limitY);
if (mouseX < 0) mouseX = 0;
if (mouseY < 0) mouseY = 0;
$('.log').html("DivX: " + Math.round(mouseX - halfContWidth) + " DivY: " + Math.round(mouseY - halfContHeight));
});

$(window).resize(function(){
    limitX = $('.container').width()-15;
    limitY = $('.container').height()-15;
});


// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

},5);

但是，如果我希望限制器 div 的边框半径为圆形，并且我的鼠标随动器仍受限于其圆形轮廓怎么办？ FIDDLE

Answer 1

如果您希望鼠标移动仅在 container div 中，请将 $(window).mousemove 更改为:

$('.container').mousemove...

这是两种情况的 fiddle :Rectangle Circle

编辑:

我使用了毕达哥拉斯方程并实现了这部分代码:

if (Math.sqrt(Math.pow(Math.abs(e.pageX - offset.left - halfContWidth), 2) + Math.pow(Math.abs(e.pageY - offset.top - halfContHeight), 2)) > newDim / 2) {

        var ratio = (mouseX - halfContWidth)/(mouseY - halfContHeight);
        var sign = 1;

        if(mouseX - halfContWidth < 0)
            sign = -1;

        mouseX = Math.sqrt(Math.pow(ratio,2)*Math.pow(newDim,2)/4/(1+Math.pow(ratio,2))) * sign;            
        mouseY = (mouseX/ratio);

        mouseX += halfContWidth;
        mouseY += halfContHeight;

    }

它检查鼠标位置是否在圆圈外，然后相应地改变圆圈内光标的位置。我使用了这样的等式:(newDim/2)^2 = (mouseX)^2 + (mouseY)^2

这是 fiddle :DEMO

编辑: 更新了 fiddle ，鼠标光标位于红色光标中间，将 5 添加到 xp += (mouseX - xp - 5) => FIDDLE