画布上的等距点

Question

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

编辑：

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

Answer 1

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

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