javascript - 在圆周段上绘制点

Question

这需要一点可视化，如果我的解释很糟糕，很抱歉。

所以，我的中心点是 0,0。从这一点开始，我在其圆周上以 350 像素(随机数)为半径绘制随机点。为此，我使用以下代码:

var angle = Math.random()*Math.PI*2;
var x = Math.cos(angle)*radius;
var y = Math.sin(angle)*radius;

x+=parent.position.x;
y+=parent.position.y;

parent.position 这是因为绘制的每个点也充当中心节点，其中的子节点充当节点等等。这只是设置新节点相对于其父节点的位置。

所以这段代码对于中心节点来说工作得非常好。问题是，一旦偏离中心，您就希望继续朝特定方向移动，以避免一大群节点相互干扰。因此，虽然此代码在圆周上绘制一个点，但我需要能够在圆周的一段上绘制一个点。我想也许大约三分之一的周长应该是可以到达的。另一个障碍是，这必须是圆周的正确线段，即如果节点向上分支，我不希望该线段成为圆周的下半部分，分支需要继续向上移动。

我可以根据新父节点相对于其父节点位置的位置来建立大体方向。但是有人知道如何使用这些数据将字段减少到这个方向的a段吗？

如果这没有意义，请告诉我，没有图表很难解释。

Answer 1

我认为一种简单的方法是将圆分成 n 段(每段覆盖 2*PI/n Angular )。您可以将 n 设置为您想要的任何值，具体取决于您想要的精确程度。然后，当您计算新点 x 时，首先获取 x.parent 所在的线段(相对于其自己的父点)，然后使用它将 x 放在与 x.parent 相同的部分中。然后你可以得到这样的东西:

var getSection = function(point) {
  var parent = point.parent;
  var angle = Math.acos((point.x - parent.x) / radius) % (Math.PI*2);
  var section = Math.floo(angle / (Math.PI * 2 / n))
  return section;
}

var section = getSection(parent); // return the index of the section
var angle = (Math.random() + section) * Math.PI * 2 / n
var x = Math.cos(angle)*radius;
var y = Math.sin(angle)*radius;

x+=parent.position.x;
y+=parent.position.y;