教程：调整图像大小

2014年6月10日

Rob Miracle
教程、技巧和演示

在开发应用程序时，您经常需要加载尺寸未知的图像。如何缩放图像是一个经常被问到的问题，因此让我们看一个简单的函数，该函数可以将任何图像缩放以适合任意大小的框。

为了获得此函数的灵感，让我们看一下 Adobe Photoshop 的 文件->自动化->图像大小调整 功能。此操作的对话框要求提供宽度、高度以及是否允许放大较小的图像。

您将使用的方法是首先将图像缩小到适合所需高度为止。如果新宽度适合尺寸，则您已完成，可以缩放图像。但是，如果宽度仍然在框外，则需要根据宽度重新计算尺寸，使其在所需尺寸内。

对于数字图像，放大通常会导致图像外观不佳。由于您的图像可能小于您定义的框，因此您可以选择放大或保持原样（因为较小的图像确实在边界内！）。

fitImage() 函数

fitImage 函数的代码是

local function fitImage( displayObject, fitWidth, fitHeight, enlarge )
	--
	-- first determine which edge is out of bounds
	--
	local scaleFactor = fitHeight / displayObject.height 
	local newWidth = displayObject.width * scaleFactor
	if newWidth &gt; fitWidth then
		scaleFactor = fitWidth / displayObject.width 
	end
	if not enlarge and scaleFactor > 1 then
		return
	end
	displayObject:scale( scaleFactor, scaleFactor )
end

local function fitImage( displayObject, fitWidth, fitHeight, enlarge )

-- 首先确定哪个边缘超出边界

local scaleFactor = fitHeight / displayObject.height

local newWidth = displayObject.width * scaleFactor

if newWidth > fitWidth then

scaleFactor = fitWidth / displayObject.width

end

if not enlarge and scaleFactor > 1 then

return

end

displayObject:scale( scaleFactor, scaleFactor )

end

该函数将采用的参数是 Corona 显示对象，通常是 display.newImage() API 调用的结果。接下来，是缩放后对象的所需宽度和高度。您的图像将适合此框内。这些示例适合正方形，但您可以选择适合您的应用程序的任何矩形。最后一个参数是一个布尔值，用于确定是否要放大较小的图像。

在函数内部，第一件事是计算图像高度与所需高度的比率。如果高度大于所需高度，则此值将小于 1。如果高度已经小于所需高度，则此值将大于 1。

接下来，将对象的宽度乘以新的比例因子。如果新宽度大于所需宽度，则需要进一步缩小图像，因此请根据宽度而不是高度计算新的 scaleFactor。

如果 scaleFactor 大于 1，则图像实际上小于所需的框。如果您不想放大小型图像，则只需返回而不执行任何操作。

最后一步是使用 display:scale() 方法实际调整图像大小。当然，图像本身并没有物理调整大小，只是缩放以适合该区域。

使用 fitImage() 函数

使用该函数非常简单

local icon = display.newImage( "Icon.png" )
icon.x = 50
icon.y = 300

fitImage( icon, 200, 200, false )

local icon = display.newImage( "Icon.png" )

icon.x = 50

icon.y = 300

fitImage( icon, 200, 200, false )

首先使用 display.newImage() 创建显示对象。将图像定位到您想要的位置。现在只需调用 fitImage()，指定框大小，先指定宽度，最后指定是否允许放大。

更多示例包括

local moose = display.newImage( "moose.jpg" )
moose.x = display.contentCenterX
moose.y = 100

fitImage( moose, 200, 200, false )

local icon2 = display.newImage( "Icon.png" )
icon2.x = display.contentWidth - 100
icon2.y = 300

fitImage( icon2, 200, 200, true )


local world = display.newImage( "world.jpg" )
world.x = 75
world.y = 450

fitImage( world, 200, 200, false )

local moose = display.newImage( "moose.jpg" )

moose.x = display.contentCenterX

moose.y = 100

fitImage( moose, 200, 200, false )

local icon2 = display.newImage( "Icon.png" )

icon2.x = display.contentWidth - 100

icon2.y = 300

fitImage( icon2, 200, 200, true )

local world = display.newImage( "world.jpg" )

world.x = 75

world.y = 450

fitImage( world, 200, 200, false )

这应该会产生类似如下的结果

第一张图片，麋鹿，最初是一张 2048 x 1638 的图片，被压缩成 200×160 像素的图像。Icon.png 图像有两个变体，均为 57×57 像素的图像。其中一个示例不允许放大，因此保持了原始大小。第二个版本允许放大，你可以看到放大后的图像有多么像素化。最后，world.jpg 图像最初是一张 320×480 的图像，被压缩成 133×200 的图像，同时保持了原始图像的宽高比。

结论

现在，你可以轻松地缩放任意大小的图像，以适应你应用程序中的空间。

Rob Miracle

[email protected]

Rob 是 Corona Labs 的开发者关系经理。除了热衷于帮助其他开发者使用 Corona 制作出色的游戏外，他还喜欢在业余时间制作游戏。自 1979 年以来，Rob 一直在从个人电脑到大型机等平台上编写游戏代码。他在游戏行业拥有超过 16 年的专业经验。

10 条评论

Kerem
发布于 16:24，6 月 10 日

多么及时的教程！非常感谢。这非常有用。
JCH_APPLE
发布于 22:03，6 月 10 日

当然 > 应该是 > 符号
JCH_APPLE
发布于 22:08，6 月 10 日

我的意思是，在我的浏览器中，在示例中，&gt + 分号显示的是 &gt，而不是被转换为 >。在我的第一篇文章中，它被转换了，这就是为什么我的评论很奇怪
- Rob Miracle
  发布于 05:27，6 月 11 日
  
  你可以感谢我们的博客软件。它喜欢将 > 转换为 &gt，即使在代码块中也是如此。我已经修复了它，但如果我们进行任何更新，它很可能会再次恢复。
  - Rob Miracle
    发布于 05:28，6 月 11 日
    
    更正：> 到 >
gjaman
发布于 22:44，6 月 17 日

我想将图像放入一个框中，但通过裁剪保持宽高比。我正在为每个图像使用 newContainer。这是最佳解决方案吗？
- Rob Miracle
  发布于 15:12，6 月 19 日
  
  是的，newContainer 将是最佳选择，或者手动应用遮罩。
Abdulaziz Al Zaabi
发布于 22:20，6 月 18 日

感谢 Rob 的精彩教程.. 这真的很有帮助。

我试图看看它如何处理远程图像，但效果不佳。我不确定是否应该在它们本地加载后处理，或者是否可以对远程图像执行相同的函数。

我收到这个错误

文件：main.lua
行号：10
尝试索引局部变量 ‘displayObject’ (一个 nil 值)

堆栈回溯
main.lua:10: 在函数 ‘fitImage’ 中
main.lua:50: 在主代码块中

我尝试使用 delay，但仍然没有成功..
谢谢
Abdul
- Rob Miracle
  发布于 15:12，6 月 19 日
  
  听起来你没有传入有效的显示对象。我们需要查看你加载图像并尝试调用函数的代码。博客评论无法很好地处理发布的代码。最好在论坛中处理这个问题。
  
  Rob
Abdulaziz Al Zaabi
发布于 23:17，6 月 19 日

我会在论坛上发布它..

谢谢
Abdul

教程：调整图像大小