画布上的等距点答案

【问题标题】：Equidistant points on canvas画布上的等距点
【发布时间】：2011-05-10 12:11:41
【问题描述】：

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

编辑：

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

【问题讨论】：

【解决方案1】：

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

您可以尝试 Box2DJS - 一个简单的 JavaScript 物理系统。或者阅读 Verlet 集成/约束 - 启动和运行非常简单，非常适合这类应用程序。

【讨论】：

【解决方案2】：

如果我查看带有“x px”标签的图表并尝试识别“直接邻居”，我需要一些帮助。如果我们取中心点并尝试识别其 DN，则图中的所有其他点都可能是 DN。如何识别您想要的人？

【讨论】：

【解决方案3】：

@snorpey - 你要问的基本上是安排点，使得在给定半径 R 的情况下，所有点都是半径 R 的圆心，其中：

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

【讨论】：

【解决方案4】：

如果您的意思是一系列点与一条线上的最后一个点等距，那么您只需要沿 x 和 y 轴取起点和终点之间的总距离，然后除以总距离

所以要获得点 n（xn 和 yn，以 x0 和 y0 为起点），您可以这样做

xn = ((xend - x0) / number_of_points) * n

y 也一样。

【讨论】：