Question

目前我正在使用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;
            }

https://jsfiddle.net/g1h2gL88/

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

Answer 1

问题是数学，如果你想限制圆上物体的力矩，它会计算从中心到鼠标位置的矢量角度。然后使用角度和centerRadius计算新位置。你基本上从中心槽鼠标位置开始直线无限线，然后计算线与圆的交点。

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

jsfiddle demo

如果你真的想要一个范围centerRadius - 5到centerRadius + 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
}

fiddle demo

在fabricjs中沿圆圈移动对象

1 个答案: