CodeV

2.6-Fitting and Filling

发表于

通常你需要调整图形的大小以适应一个比自然大小更小或更大的空间。为了实现这一点，无论你是使用路径，图片还是上下文绘制函数，都要计算该图形的目标。有四种基本方法可以实现：centering，fitting，filling和squeezing。

如果您使用过视图内容模式，这些方法可能听起来很熟悉。绘制时，应用与UIKit用来填充视图内容相同的策略。相应的内容模式是center，scale aspect fit，scale aspect fill和scale to fill。

Centering

使用自然（原始）的缩放比例，直接在目的地的中心居中放置一个矩形。大于像素显示区域的部分被裁剪。比该区域小的材料被铺垫。（在图形的所有四个边上留下额外的区域称为windowboxing。）图2-5显示了两个源，一个比目标大，另一个比目标小。

在每种情况下，项目都使用清单2-5中的RectAroundCenter()居中。由于外部图形原本就较大一些，当绘制到灰色矩形时，灰色矩形外的部分将被裁剪。较小的内部图形则将使用额外的空间填充所有边的剩余空间。

图2-5

图 2-5 居中放置矩形使原始大小保持不变，因此，可能会也可能不会发生裁剪和填充。

Fitting

当将项目适配到目标中时，保留源矩形的原始宽高比例，并且源材料的每个部分保持可见。根据原始的宽高比，结果或者是letterboxed或是pillarboxed，需要一些额外的区域来填充图像。

在物理世界中，matting是指用于构图的背景或边框。背景或边框增加了艺术和物理框架之间的空间。这里，我使用术语matting来表示绘图区域的边缘和目标矩形的范围之间的额外空间。

图2-6显示了拟合目标的项目。灰色背景表示目标矩形，浅紫色背景显示由列表2-8计算的拟合矩形。 除非各个边完全匹配，否则绘图区域将居中，并在顶部和底部或侧面留下额外的空间。

图2-6

图2-6保留原始宽高比到绘制目标，但可能会留下letterbox（图上的情况）或pillarbox（图下的情况）额外的空间。

清单 2-8 通过拟合到矩形计算目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Multiply the size components by the factor
CGSize SizeScaleByFactor(CGSize aSize, CGFloat factor)
{
	return CGSizeMake(aSize.width * factor,aSize.height * factor);
}

// Calculate scale for fitting a size to a destination
CGFloat AspectScaleFit(CGSize sourceSize, CGRect destRect)
{
	CGSize destSize = destRect.size;
	CGFloat scaleW = destSize.width / sourceSize.width;
	CGFloat scaleH = destSize.height / sourceSize.height;
	return MIN(scaleW, scaleH);
}

// Return a rect fitting a source to a destination
CGRect RectByFittingInRect(CGRect sourceRect,CGRect destinationRect)
{
	CGFloat aspect = AspectScaleFit(sourceRect.size, destinationRect);
	CGSize targetSize = SizeScaleByFactor(sourceRect.size, aspect);
	return RectAroundCenter(RectGetCenter(destinationRect), targetSize);
}

Filling

Filling，如图2-7所示，确保目标空间的每个像素都能对应源图像中的绘图区域。不要与绘图的“填充”操作（其填充具有特定颜色或图案的路径）混淆，这种方法避免了在图2-6中看到的多余像素区域。

为了实现这一点，填充或收缩源矩形以完整地覆盖目的地。它会修剪落在目的地外面的任何元素，无论是顶部和底部，或左边和右边。生成的目标矩形居中，但只有一个维度可以完全显示。

清单2-9计算目标矩形，图2-7显示了结果。在左图中，耳朵和脚将被裁剪。 在右图中，鼻子和尾巴将被裁剪。只有与目标空间宽高比完全匹配的图像才会保持未裁剪状态。Filling trades off cropping against fitting’s letterboxing。

图2-7

图2-7填充目标确保目标矩形被每个像素覆盖。

清单 2-9 通过填充矩形计算目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Calculate scale for filling a destination
CGFloat AspectScaleFill(CGSize sourceSize, CGRect destRect)
{
	CGSize destSize = destRect.size;
	CGFloat scaleW = destSize.width / sourceSize.width;
	CGFloat scaleH = destSize.height / sourceSize.height;
	return MAX(scaleW, scaleH);
}

// Return a rect that fills the destination
CGRect RectByFillingRect(CGRect sourceRect, CGRect destinationRect)
{
	CGFloat aspect = AspectScaleFill(sourceRect.size, destinationRect);
	CGSize targetSize = SizeScaleByFactor(sourceRect.size, aspect);
	return RectAroundCenter(RectGetCenter(destinationRect), targetSize);
}

Squeezing

压缩是调整源图像的宽高比以适应目标内的所有可用空间。所有目标像素都会对应到源矩形的区域中。 如图2-8所示，源图像沿一个维度调整大小以能够容纳进目标矩形内。这里，兔子水平方向被挤压以匹配目标矩形。

与之前的拟合风格不同，压缩您不必执行任何计算。只需将源材质绘制到目标矩形，剩下的工作让Quartz来做。

图2-8

图2-8压缩源矩形忽略其原始宽高比，绘制到目标的所有区域。

本文翻译自《iOS Drawing Practical UIKit Solutions》作者：Erica Sadun，翻译：Cheng Dong。如果觉得本书不错请购买支持正版:亚马逊购买传送门，本书所有源代码可在GitHub上下载。译者虽然力求做到信，达，雅，但是由于时间仓促加之译者水平十分有限，文中难免会出现不正确，不准确，词不达意，难于理解的地方，还望各位批评指正，共同进步，谢谢。转载请注明出处。