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

我有一个小div，我设置它来跟随我的鼠标，但仍然被限制为一个父div维度。这是最新的

下面是我用来使follower div跟随鼠标并限制到父对象大小的脚本。完整的代码可以在小提琴上看到

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

var mouseX=0，mouseY=0，limitX=$（'.container'）.width（）-15，limitY=$（'.container'）.height（）-15；
$（窗口）.mousemove（函数（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）；
如果（mouseX<0）mouseX=0；
如果（mouseY<0）mouseY=0；
$（'.log'）.html（“DivX:+Math.round（mouseX-halfContWidth）+“DivY:+Math.round（mouseY-halfContHeight））；
});
$（窗口）。调整大小（函数（）{
limitX=$（'.container'）.width（）-15；
limitY=$（'.container'）.height（）-15；
});
//缓存选择器
var follower=$（“#follower”）；
var xp=0，yp=0；
var loop=setInterval（函数（）{
//更改12以更改阻尼值越高，速度越慢
xp+=（mouseX-xp）/12；
yp+=（鼠标-yp）/12；
css（{left:xp，top:yp}）；
},5);

---

但是，如果我希望限制器div具有边界半径，并且仍然将鼠标跟随器限制为其圆形轮廓，该怎么办

如果希望鼠标仅在

容器中移动，请将
$（窗口）。mousemove
更改为：

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

以下是两种情况下的情况：

编辑：

我使用毕达哥拉斯公式并实现了这部分代码：

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;

    }

if（Math.sqrt（Math.pow（Math.abs（e.pageX-offset.left-halfContHeight），2）+Math.pow（Math.abs（e.pageY-offset.top-halfContHeight），2））>newDim/2）{
var比率=（mouseX-halfContWidth）/（mouseY-halfContHeight）；
var符号=1；
如果（鼠标-半连续宽度<0）
符号=-1；
mouseX=Math.sqrt（Math.pow（比率，2）*Math.pow（newDim，2）/4/（1+Math.pow（比率，2））*符号；
mouseY=（mouseX/比率）；
mouseX+=半宽度；
鼠标+=半高；
}

它检查鼠标位置是否在圆之外，然后相应地更改光标在圆中的位置。我使用的公式如下：
（newDim/2）^2=（mouseX）^2+（mouseY）^2

这是小提琴：

 <强>编辑：< /强>将鼠标指针放在红色光标中间，添加“代码> 5”/代码>到<代码> XP+=（MSOX-XP - 5）= > /P>，您希望鼠标移动只在容器中而不是整个页面吗？是的。只有在“.container”div中与第一小提琴一样。圆形容器的大小必须是可调整的吗？是的。我需要它能够像现在一样响应浏览器的尺寸。关于这个问题，第一个答案有一个可以调整的工作解决方案，可以与可调整大小的容器一起工作。这不是我需要的。我不知道你是否看到了，但即使我将鼠标移到容器外，跟随者仍然跟随鼠标位置，但它仅限于容器的轮廓。但是谢谢你的回答。你希望它能做什么？你想让红色光标消失吗？不，不，我不知道如何让你明白我想要什么。我想让它做出与矩形相同的东西，但不限于正方形。我想把它限制为圆形。当我的鼠标在容器外时，我希望红色指针沿着圆形轮廓，而不是方形轮廓。