javascript - 找到对象的几何中心并旋转它以最大化边界框高度

Question

这是一个很难的问题，我做了一些思考，但没有取得多大成功。 我的主要目标是旋转任意像素对象以最小化其边界框的宽度。(或最大化高度，假设周长恒定，这应该是相同的)

因为这样的目标不在SO问题的范围内，所以我确定了一个更简单的目标来解决这个问题:找到像素对象的几何中心。

为什么？因为如果我有这个中心，我将能够找到距它最远的点，然后旋转对象以使这些点垂直对齐。

我原本以为这就像计算边界框的中心一样简单。 Inkscape 中的快速测试证明错误:边界框的中心不是旋转不变的:

那么，如何找到真正的几何中心来计算对象极值并旋转它呢？以下是我想要实现的目标的一些说明 - 请注意，我正在使用像素而不是矢量数据:

Answer 1

谷歌如何计算质心，但我宁愿直接接近你的主要目标:

1. 计算OBB(定向边界框)

   还有更多的方法可以实现这一点。有些人正在使用 PCA 或特征向量，我正在这样做:

   • How to Compute OBB of Multiple Curves?

   它可以应用于矢量和栅格输入。

2. 旋转，使 OBB 主轴与垂直轴对齐

   因此，您可以直接从 OBB 计算 Angular ，只需在较大的 OBB 侧向量上使用 atan2 即可。并旋转 90 Angular 逆时针(如果您的坐标系是 x+ 向右，y+ 向上， Angular 从x+轴沿CCW方向增加)。