画布上的等距点

Question

我想在使用JavaScript的HTML5画布元素上绘制一些等距离点，并使每个点的X/Y位置计算出来。如何实现？

编辑： 我希望一个点到它的相邻直接点和画布边缘的距离是相同的。 如果我有一个8px x 8px的画布和4个点，则点到其相邻直接点和画布边缘的距离将为2px。 但如果我有不同数量的点和非正方形的画布呢？ （我认为图片可以更好地帮助理解我的问题）

- snorpey

---

“直接邻居”这个术语在这个上下文中有点模糊。你需要一个更好的定义。 - ysap

谢谢你迄今为止的答案。我想你是对的。在能够给出更好的“直接邻居”定义之前，我需要先画一些草图... - snorpey

这个怎么样：M={p_1, p_2, ..., p_n} 被称为具有相等距离 d，当且仅当：对于 M 中的每个元素 p_i：p_i 到最近边缘的距离 <= d，并且存在 M 中的元素 p_j，使得 |p_i - p_j| = d。 - wnrph

Answer 1

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

您可以尝试Box2DJS-一个简单的JavaScript物理系统。或者了解Verlet集成/约束-它很容易上手，并且非常适合这些类型的应用程序。

- Scott S

Answer 2

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

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

我的直觉告诉我，鉴于任意数量的点和更严格的邻居定义，这个要求可能无法满足，但我可能错了。

- ysap

Answer 3

如果您指的是一系列点都与线上的上一个点等距，则只需沿x轴和y轴取起始点和终点之间的总距离，然后将其除以总数即可。

因此，要获取第n个点（其中xn和yn为x0和y0为起点），您可以执行以下操作：

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

y也是同样的方法。

- Calin Leafshade

---

最好的方法是修正增量并将其添加到上一个点的坐标中。 - aaronasterling

Answer 4

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

- Jaydee