Javascript 沿fabricjs中的圆移动对象

目前我正在使用fabricjs在画布上绘制

我有一个大半圆和一个小圆。我希望用户能够移动大半圆外线上的小圆。但是我怎样才能防止圆离开它的路径呢？数学不是问题；）

编辑：这里我有一些代码，可以告诉你我想要什么

            deltaLeft = p.left - centerPointX;
            deltaTop = p.top - centerPointY;
            length = Math.sqrt(deltaLeft * deltaLeft + deltaTop * deltaTop);

            console.log(length);
            if((length <= centerRadius + 5) && (length >= centerRadius - 5) ){
                handleNewX = p.left;
                handleNewY = p.top;
            }else{
                p.left = handleNewX;
                p.top = handleNewY;
            }

deltaLeft=p.left-centerPointX；
deltaTop=p.top-中心点；
长度=Math.sqrt（deltaLeft*deltaLeft+deltaTop*deltaTop）；
控制台日志（长度）；
如果（（长度=中心半径-5））{
handleNewX=p.left；
handleNewY=p.top；
}否则{
p、 左=手柄EWX；
p、 顶部=手柄EWY；
}

---

问题是，移动手柄感觉不自然

问题在于数学，如果要限制对象在圆上的力矩，它将计算向量从中心到鼠标位置的角度。然后使用角度和

中心半径计算新位置。基本上，从鼠标位置的中心槽开始放置一条无限长的直线，然后计算直线与圆的交点

deltaLeft = p.left - centerPointX;
deltaTop = p.top - centerPointY;

var radians = Math.atan2(deltaTop, deltaLeft)
p.left = Math.cos(radians) * centerRadius + centerPointX
p.top = Math.sin(radians) * centerRadius + centerPointY


如果您确实希望将范围
中心半径-5
扩展到
中心半径+5
，则可以轻松扩展到：

var length = Math.sqrt(deltaLeft * deltaLeft + deltaTop * deltaTop);

// change the position only if mouse is outside if the centerRadius +/- 5 range
if (length <= centerRadius - 5 || length >= centerRadius + 5) {
  var radians = Math.atan2(deltaTop, deltaLeft)

  if (length < centerRadius) {
    length = centerRadius - 5;
  } else {
    length = centerRadius + 5;
  }
  p.left = Math.cos(radians) * length + centerPointX
  p.top = Math.sin(radians) * length + centerPointY
}

var length=Math.sqrt（deltaLeft*deltaLeft+deltaTop*deltaTop）；
//仅当鼠标位于中心半径+/-5范围外时才更改位置
如果（长度=中心半径+5）{
var弧度=数学atan2（deltaTop，deltaLeft）
if（长度<中心半径）{
长度=中心半径-5；
}否则{
长度=中心半径+5；
}
p、 左=数学cos（弧度）*长度+中心点x
p、 顶部=数学正弦（弧度）*长度+中心点
}

如果数学不是问题，那么不清楚
的意思是什么，但如何防止圆离开其路径？
。在你的问题中添加一个最小的可执行示例，允许重现你的问题。问题是，移动圆圈感觉很奇怪。它不像是粘在圆圈上。