如何将不同宽度的矩形水平对齐到中心，但将锚点保持在每个矩形的中心？

Question

比如我有2个矩形，锚点在矩形的中心，一个宽度为6（红色），另一个宽度为2（蓝色），我想将它们水平对齐到中心像这样：

为了使整个结构的位置（也是中心和锚点）在原点，红色矩形应该放在(-1,0)，蓝色矩形应该放在(3, 0).

这个例子可以用图来解决，分成1个单位段，但是如果我有任意数量的不同宽度的矩形呢？

如何找到每个矩形的锚点在中心的每个矩形的位置？

Answer 1

将所有矩形的宽度相加，然后除以 2。这是最左侧矩形的左侧到中心的距离。

然后对于每个矩形，计算从最左侧矩形的左侧到矩形中心点的距离。从第一个数字中减去它以找到矩形中心点距中心的偏移量。

伪代码：

求最左边矩形的左边到中心的距离：

int i;
float sum = 0;
for(i = 0; i < rectangle_count; i++)
    sum += rectangles[i].width;
centerpoint = sum / 2.0;

计算每个矩形距中心的偏移量：

sum = 0.0;
for(i = 0; i < rectangle_count; i++)
{
    // compute offset for this rectangle relative to center:
    rectangles[i].offset = (sum + (rectangles[i].width / 2.0)) - centerpoint;

    sum += rectangles[i].width;
}

Answer 2

假设有n个小矩形，称它们为r₀, r₁, ..., r_n-1。此外，假设我们将它们从左到右放置。让我们将通过将它们全部首尾相接形成的较大矩形称为 R，并假设我们有一个函数 w(r) 来计算矩形的宽度。

我们知道 R 的左侧的 x 坐标为 -w(R)/2。那也将是r₀的x坐标，我们称这个x坐标为l₀。您知道 r₁ 左侧的 x 坐标将移动 r₀ 的一个宽度。换句话说，l₁ = w(r₀) + l₀。同样，您知道 r₂ 左侧的 x 坐标将位于 l₂ = w(r₁) + l₁。一般来说，l_i = w(r_i-1) + l_i-1.

用简单的英语来说，您正在计算第一个矩形左侧的位置并加上它的宽度以找到下一个矩形的左侧并重复该过程直到您知道左侧的位置每个矩形的手边。

现在唯一的困难是找到每个矩形中心的 x 坐标。但是您已经知道每个左侧的 x 坐标，因此只需将其宽度的一半向右移动即可。即c_i = l_i + w(i)/2，其中c_i是r_i.

中心的x坐标

如何将不同宽度的矩形水平对齐到中心，但将锚点保持在每个矩形的中心？

How to align rectangles with different width horizontally to center, but keeping the anchor point at the centre of each rectangle?

language-agnostic

algorithm

math

geometry