algorithm - 将一个矩形放入另一个矩形

Question

我经常将一个矩形拟合到另一个矩形中，以便它很好地适合并且居中。我会在白板上画一些东西，拍一张照片，看看逻辑是什么，但是天色变暗了，烛光让它变得不那么有趣了。

无论如何，它非常简单易懂。这是我不得不再次从头开始编写的函数（这次是在 PHP 中）：

// Fit rectangle 2 into rectangle 1 to get rectangle 3
// Rectangle 3 must be centered
// Return dimensions of rectangle and position relative to rectangle 1

function fitrect($w1,$h1,$w2,$h2){

    // Let's take a chance with rectangle 3 width being equal to rectangle 1 width
    $w3=$w1;
    $h3=$w3*($h2/$w2);

    // Check if height breaks rectangle 1 height
    if($h3>$h1){
        // Recalculate dimensions and then position
        $h3=$h1;
        $w3=$h3*($w2/$h2);
        $x3=($w1-$w3)/2;
        $y3=0;
    }else{
        // Just calculate position
        $y3=($h1-$h3)/2;
        $x3=0;
    }

    // Tidy up
    $x3=round($x3);
    $y3=round($y3);
    $w3=round($w3);
    $h3=round($h3);

    // Result array
    $res=array($x3,$y3,$w3,$h3);

    return($res);

}

我想了解这个算法和它的其他版本，这样我的大脑就会摸索基础，这样我就不必再依赖笔和纸（或白板）了。

那么，你会怎么做呢？什么绒毛可以去除？

编辑：作为一个例子 - 假设我们有矩形 1 的尺寸为 256x256，矩形 2 的尺寸为 44x167。然后我们需要将矩形 2 缩放到 67x256 并将其定位在相对于矩形 1 的 94,0 处，使其最大化并集中在矩形 1 中。

Answer 1

这就是我将如何做到的。

让我们定义一个术语，肥胖，它等于矩形的宽度与其高度的比率。一个高度为 1 宽度为 10 的矩形的胖度为 10。一个高度为 20 宽度为 10 的矩形的胖度为 0.5。当你调整一个矩形的大小时，它的粗细不会改变。

当您将矩形 2 的大小向上或向下缩放以使其宽度等于矩形 1 时，只要矩形 2 比矩形 1 胖，它就不会溢出顶部或底部。如果 1 比矩形 2 胖，它将溢出。现在您提前知道是否要调整大小以适应合适的宽度或高度。此外，两种情况的翻译逻辑相同，因此可以超出 if/else 块。

在伪代码中：（对不起，我不知道 PHP）

fatness1 = w1 / h1
fatness2 = w2 / h2

#adjust scaling
if fatness2 >= fatness1:
    #scale for a snug width
    scaleRatio = w1 / w2
else:
    #scale for a snug height
    scaleRatio = h1 / h2
w3 = w2 * scaleRatio
h3 = h2 * scaleRatio


#adjust rectangle 3's center so it is the same as 1's center
xCenterOf1 = x1 + (w1 / 2)
yCenterOf1 = y1 + (h1 / 2)

x3 = xCenterOf1 - (w3 / 2)
y3 = yCenterOf1 - (h3 / 2)

return (x3, y3, w3, h3)

在 python 中测试，假设矩形 1 在 (0,0)，scale(256,256, 44, 167)返回(0.0, 94.3, 256.0, 67.4).

Answer 2

这是一个用 Java 编写的方便的函数。

public static RectF fitRectWithin(Rect inner, Rect outer) {
    float innerAspectRatio = inner.width() / (float) inner.height();
    float outerAspectRatio = outer.width() / (float) outer.height();

    float resizeFactor = (innerAspectRatio >= outerAspectRatio) ?
    (outer.width() / (float) inner.width()) :
    (outer.height() / (float) inner.height());

    float newWidth = inner.width() * resizeFactor;
    float newHeight = inner.height() * resizeFactor;
    float newLeft = outer.left + (outer.width() - newWidth) / 2f;
    float newTop = outer.top + (outer.height() - newHeight) / 2f;

    return new RectF(newLeft, newTop, newWidth + newLeft, newHeight + newTop);
}

Answer 3

这就是我的做法。（此算法对图像非常有效。）假设您有一个矩形和一个容器（也是一个矩形）：

aspectRatio = screen.width / screen.height

if (rectangle.width >= rectangle.height)
{
   resizeFactor = container.width / rectangle.width
   rectangle.width = rectangle.width * resizeFactor
   rectangle.height = rectangle.height * resizeFactor * aspectRatio
}
else
{
   resizeFactor = container.height / rectangle.height
   rectangle.width = rectangle.width * resizeFactor / aspectRatio
   rectangle.height = rectangle.height * resizeFactor
}

您可以通过将第 6 行更改为：

rectangle.width = container.width

如果您愿意，则与第 13 行相同。

Answer 4

我只需要处理类似的事情：让我们调用 rectangle2image和 rectangle1 window。所以我们的任务是将图像放入窗口中。

同样在我的场景中，image和window都有一个“内部”坐标系[-1,1]X[-1,1]。事实上，在窗口内部，有一个viewport（问题中的 rectangle3）image将被投影，因此我们的任务是找到与具有相同纵横比（宽度/高度）的最大viewport（内部矩形） 。windowimage

由的viewport宽度/高度的一部分确定image：

viewport_width = scale_w * window_w
viewport_height = scale_h * window_h

所以我们的目标是找到 的宽度和高度的正确缩放比例window，这样viewport将具有与 相同的纵横比（宽度/高度）image：

# goal: 
scale_w * window_w == image_w
scale_h * window_h == image_h

这意味着我们正在寻找的规模满足：

(scale_w / scale_h) == ((image_w / image_h) / (window_w / window_h))

s让我们暂时用 表示这个等式的右手边。

由于我们正在寻找最大的viewport，肯定至少有一个scale_w和scale_h将等于 1。所以 - 如果s<1，意味着window比 宽image，我们将有scale_w=s, scale_h=1（这对应于上图，带有scale_w=0.5）。如果s>1, 意义image比 更广泛window, 我们将拥有scale_w=1, scale_h=1/s.

在 python 代码中，它看起来像这样：

def compute_viewport_scale(image_size, window_size):
    image_w, image_h = image_size
    window_w, window_h = window_size
    im_ratio, win_ratio = image_w / image_h, window_w / window_h

    scale = im_ratio / win_ratio
    if scale > 1:  # image is wider than screen
        scale_w = 1
        scale_h = 1 / scale
    else:  # window is wider then image
        scale_w = scale
        scale_h = 1

    viewport_w, viewport_h = window_w * scale_w, window_h * scale_h
    assert (round(viewport_w / viewport_h, 5) == round(image_w / image_h, 5))

    return scale_w, scale_h

因为我想绝对确定我已经涵盖了所有案例，所以我构建了一个尺寸示例列表，以确保这个公式确实是正确的。事实上，如果你运行所有这些行，你将不会得到任何断言错误:)

# aspect ratio = 1
compute_viewport_scale((100, 100), (100, 100))
compute_viewport_scale((100, 100), (200, 200))
compute_viewport_scale((200, 200), (100, 100))

# image is wider than screen: (im_w / im_h) > (win_w / win_h)  [ i.e. im_ratio > win_ratio ]
# (im_ratio < 1 and win_ratio > 1 cant happen)
# im_w > win_w and im_h > win_h
compute_viewport_scale((300, 200), (100, 90))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((200, 300), (100, 200))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((300, 200), (100, 150))  # im_ratio > 1 and win_ratio < 1
# im_w > win_w and im_h < win_h
compute_viewport_scale((150, 50), (110, 100))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((200, 300), (100, 400))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((300, 100), (100, 150))  # im_ratio > 1 and win_ratio < 1
# (im_w < win_w and im_h > win_h cant happen)
# im_w < win_w and im_h < win_h
compute_viewport_scale((150, 50), (200, 100))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((90, 100), (100, 200))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((110, 100), (100, 200))  # im_ratio > 1 and win_ratio < 1

# image is wider than screen: (im_w / im_h) < (win_w / win_h)  [ i.e. im_ratio < win_ratio ]
# (im_ratio > 1 and win_ratio < 1 cant happen)
# im_w > win_w and im_h > win_h
compute_viewport_scale((300, 200), (100, 50))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((200, 400), (100, 150))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((200, 400), (150, 100))  # im_ratio < 1 and win_ratio > 1
# (im_w > win_w and im_h < win_h cant happen)
# im_w < win_w and im_h > win_h
compute_viewport_scale((150, 100), (200, 50))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((200, 400), (380, 390))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((200, 400), (390, 380))  # im_ratio < 1 and win_ratio > 1
# im_w < win_w and im_h < win_h
compute_viewport_scale((300, 200), (600, 300))  # im_ratio > 1 and win_ratio > 1
compute_viewport_scale((200, 300), (500, 600))  # im_ratio < 1 and win_ratio < 1
compute_viewport_scale((50, 100), (300, 200))  # im_ratio < 1 and win_ratio > 1