如何将显示的图像"智能调整"为原始宽高比

Question

我有一个应用程序,最终用户可以在设计器中调整大小和位置图像.由于规范要求将图像"拉伸"到包含控件,因此最终用户可能最终得到一个难以拉伸的图像.

为了帮助用户进行图像大小调整,我正在考虑实现智能缩放器功能,该功能允许用户轻松修复图片的宽高比,使其不再显得拉伸.

解决这个问题的快速方法是实际提供两个选项:1)从宽度2开始缩放从高度开始缩放.用户选择该方法,并且算法通过使用原始宽高比来调整图片的大小.例如:图片在设计器上显示为200x200,但原始图像为1024x768像素.用户选择"宽度智能尺寸",新尺寸变为~200x150,因为原始宽高比为~1.333

没关系,但是我怎么能通过询问重新计算应该基于哪个维度来使算法变得更聪明而不打扰用户呢？

Answer 1

如果我正确地解释您的规范,您希望结果不大于最终用户最初布置的结果; 你希望两个维度中的一个缩小,另一个保持不变.换句话说,新尺寸应该在一个方向上填充设计者空间,同时缩短另一个方向上的尺寸以保持原始纵横比.

original_ratio = original_width / original_height
designer_ratio = designer_width / designer_height
if original_ratio > designer_ratio
    designer_height = designer_width / original_ratio
else
    designer_width = designer_height * original_ratio

通常你会使用整数坐标,但产生上述比率的分区需要是浮点数.这是公式的重新排列,更加整数友好.确保整数具有处理最大宽度*高度的范围.

if original_width * designer_height > designer_width * original_height
    designer_height = (designer_width * original_height) / original_width
else
    designer_width = (designer_height * original_width) / original_height

Answer 2

这是我在处理这个问题时提出的解决方案.结果非常简短直接的imo,只是想分享它.

方便的"公式":ratio = W / H →交通 W = H * ratio →交通 H = W / ratio

1. 计算比率.
2. 如果要将宽度设置为新的大小宽度(允许的最大宽度),请计算图像的高度.
3. 如果要将高度设置为新的尺寸高度(最大允许高度),请计算图像的宽度.
4. 查看两种尺寸中的哪一种不会覆盖任何尺寸的最大尺寸.如果比率不是1,则其中一个总是错误的,并且总是正确的.

在Javascript中

// Returns array with new width and height
function proportionalScale(originalSize, newSize)
{
    var ratio = originalSize[0] / originalSize[1];

    var maximizedToWidth = [newSize[0], newSize[0] / ratio];
    var maximizedToHeight = [newSize[1] * ratio, newSize[1]];

    if (maximizedToWidth[1] > newSize[1]) { return maximizedToHeight; }
    else { return maximizedToWidth; }
}

originalSize并且newSize是一个数组[0] = width,[1] = height