Javascript：跟随光标，但保持在圆形内，而不是矩形div

我试图获得下面的jsfiddle示例，使黄色的圆圈div跟随鼠标，但约束为圆圈，而不是正方形（div）

JS代码如下所示：

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX, limitX);
   mouseY = Math.min(e.pageY, limitY);
});

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

}, 30);

我理解代码的结构和方法，只是不太熟悉语法

---

更新

limitX/Y

并加入额外的

半径

，

距离

变量的最佳位置在哪里？

您可以通过计算远离圆心的距离来实现这一点（2D距离是用

（x*x+Y*Y）

计算的）。然后检查距离是否大于要约束到的圆的半径。如果是，请缩小距离以匹配约束半径

以下是片段：

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
var centerX = limitX / 2, centerY = limitY / 2;
var radius = centerX;
$(window).mousemove(function(e) {
   var diffX = e.pageX - centerX;
   var diffY = e.pageY - centerY;

   // Get the mouse distance from the center
   var r = Math.sqrt(diffX * diffX + diffY * diffY);

   if (r > radius) {
     // Scale the distance down to length 1 
     diffX /= r;
     diffY /= r;

     // Scale back up to the radius
     diffX *= radius;
     diffY *= radius;
   }

   mouseX = centerX + diffX;
   mouseY = centerY + diffY;
});

下面是完整的代码：

类似