画布上的等距点

Question

我想使用JavaScript在HTML5画布元素上绘制可变数量的等距点。如何计算每个点的X / Y位置？

编辑：

我希望从一个点到它的直接邻居和画布边缘的距离是相同的 如果我有一个8px x 8px画布和4个点，从一个点到它的直接邻居和画布边缘的距离将是2px。
但是，如果我的点数不均匀而不是方形画布呢？ （我认为图像可能有助于更好地理解我的问题）

Answer 1

我建议构建一个简单的约束求解器 - 使用放松来得到你想要的答案。这类似于一些类似Visio的应用程序使用的技术。基本上，您可以在点对和画布边界之间添加弹力。你模拟了很短的时间，一切都会“稳定”到位。

你可以试试Box2DJS--一个简单的javascript物理系统。或者阅读Verlet集成/约束 - 启动和运行起来非常简单，并且非常适合这些类型的应用程序。

Answer 2

@snorpey - 你要问的是基本上要安排点，这样，给定半径R，所有点都是半径为R的圆心，其中：

1. 所有“直接邻居”（这需要更好的定义）都在周围;
2. 边缘附近的所有圆点都与最近的边相切。

我的直觉说，给定一个任意数量的点可能无法满足这个要求，并给出了一个更严格的邻居定义，但我可能是错的。

Answer 3

如果你的意思是一系列的点与一行上的最后一个点等距，那么你只需要沿着x和y轴取出起点和终点之间的总距离并将其除以总和

所以要得到点n（xn和yn，其中x0和y0是起点）你可以做

xn =（（xend - x0）/ number_of_points）* n

同样的。

Answer 4

如果我用标签“x px”看你的图并尝试识别“直接邻居”，我需要一些帮助。如果我们采取中心点并尝试识别其DN，则图中的所有其他rpoint可以是DN。如何识别你想要的那些？