使用JavaScript围绕三角形中心旋转

Question

在一个周五深夜，我正在思考这个问题。

我试图绘制一个等边三角形，并围绕其中心旋转，但是我无法确定它的中心点。

在这里，您可以看到我的JSFiddle，我将其翻译到画布的中心，然后使用以下公式从那里绘制三角形：

var width = 30;
var height = width * (Math.sqrt(3)/2);

确定宽度/高度比。

我在这里错过了什么？欢迎提供您的想法。

- braitsch

Answer 1

您正在以(0, 0)为中心旋转，但在这种情况下，它并不是您三角形的中心。

一个顶点为(0, -h/2)，(w/2, h/2)，(-w/2, h/2)的三角形具有平均这三个位置的中心。很明显，(1/3)(-h/2) + (2/3)(h/2) = h/6。因此，这是您三角形中心的实际y坐标。

一个解决方案可能是将您的三角形移动到(0, (-2/3)*h)，(w/2, h/3)，(-w/2, h/3)。

- John Calsbeek

---

太棒了，我刚刚按照你建议的坐标画出了三角形，效果非常好。但是，你能否解释一下如何从我的三角形顶点（0，-h / 2），（w / 2，h / 2），（-w / 2，h / 2）计算出中心的y坐标？你的方程式（1/3）（-h / 2）+（2/3）（h / 2）= h / 6 对我来说不太清楚。谢谢！ - braitsch

这与计算三个数字的平均值使用的逻辑相同：将每个顶点的x和y分量相加，然后除以您添加的数量。在您的情况下，您有两个y分量为h/2的顶点和一个y分量为-h/2的顶点。直观地看，您可以看到这些值的平均值略高于零；数学上，这是(h/2 + h/2 - h/2)/3，我刚刚写成了(2/3)(h / 2) + (1/3)(-h / 2)。 - John Calsbeek

顺便提一下，如果你想推广到非等边三角形，实际上有多种方法可以得到三角形的“中心”，它们具有不同的几何解释，并且可能更适合不同的目的：http://www.jimloy.com/geometry/centers.htm - John Calsbeek

非常感谢您的帮助。感谢您抽出时间来帮助澄清问题。干杯！ - braitsch