javascript - 在圆周段上绘制点

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

因此，我有一个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这是因为绘制的每个点还充当中心节点，该中心节点具有充当节点的子级，依此类推。这只是设置新节点相对于其父节点位置的位置。

因此，此代码对于中央节点非常有效。问题是，一旦离开中心，您就希望继续朝特定的方向移动，以避免一大堆节点相互干扰。因此，尽管此代码在圆周上绘制了一个点，但我需要能够在圆周的一段上绘制一个点。我在想大概三分之一的周长应该可以拿到。另一个障碍是，这必须是圆周的正确部分，即如果节点向上分支，我不希望该部分成为圆周的下半部分，则分支需要继续沿向上方向移动。

我可以根据新父节点相对于其父节点的位置来确定总体方向。但是，有人对如何使用此数据将字段缩小为该方向的段有任何想法吗？

让我知道这是否没有道理，没有图表很难解释。

最佳答案

我认为一种简单的方法是将圆分成n个段（每个段覆盖2 * PI / n角）。您可以将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;