在fabricjs中沿圆圈移动对象答案

【问题标题】：Move an object along a circle in fabricjs在fabricjs中沿圆圈移动对象
【发布时间】：2018-05-10 21:22:33
【问题描述】：

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

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

【问题讨论】：

如果数学不是问题，那么您对But how can I prevent that the circle leave it's path? 的意思就不清楚了。向您的问题添加一个最小的可执行示例，以便重现您的问题。
问题是，移动圆圈感觉很奇怪。感觉不像粘在圆圈上。

标签： javascript canvas fabricjs

【解决方案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

【讨论】：