CodeV

3.9-创建拉伸的图像

发表于

可调整大小的图形可用于在调整以拟合视图的情况下创建图像边缘不缩放或不调整大小的图像。 它们保留图像详细信息，确保只调整图像中间的部分大小。图3-9显示了拉伸图像的示例。它作为按钮的背景，其中间范围可以增大或缩小，取决于分配给按钮的文本。为了确保只调整中间的部分大小，一组cap insets指定了边界。这些caps确保中心区域（大的紫色区域）可以增长和收缩，而不影响圆角和边线的装饰。

图3-9

图3-9您可以创建用于按钮的可拉伸图像。

要了解cap insets的工作原理，请将图3-9与图3-10进行比较。图3-10显示了分配给同一个按钮的相同图像，但没有设置cap insets。其边缘和圆角与按钮图像的其余部分一起拉伸，产生了视觉上令人困惑的结果。图3-9中的干净的表示形式变成了图3-10中的图形混乱的表现形式。

图3-10

图3-10没有设置cap insets，按钮按比例拉伸图像的所有部分。

代码清单3-10显示了按钮图像的代码。它构建一个40×40的图像上下文，在该上下文中绘制两个圆角矩形，并使用纯色填充背景。它检索这个基本的图像，但在返回之前，代码清单3-10调用了resizableImageWithCapInsets:. 此方法将创建使用这些cap insets的图像的新版本。这一行使得您在图3-9中看到的按钮与图3-10中看到的按钮之间有了区别。

虽然iOS 7推出了无边框，修剪掉的按钮，但是在这个列表中演示的自定义按钮设计仍然在第三方应用程序中发挥作用。这在苹果自己的WWDC会议上有强调，演示中包括许多skeumorphic的例子。在第7章中，您将会阅读到更多关于按钮效果的信息，包括光泽，纹理和其他非Ive增强的功能。自定义按钮的寿命并没有终结，他们只是需要比以前更多的思考。

Note

性能是在可能的情况下使用可伸展图像的另一个令人信服的理由。它们在GPU上完成拉伸操作，提供了手动拉伸的性能提升。模式颜色也是如此，你将在本章后面阅读到。填充图案颜色比手动将该模式绘制到上下文中执行更快。

列表3-10图像和拉伸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
CGSize targetSize = CGSizeMake(40, 40);
UIGraphicsBeginImageContextWithOptions(targetSize, NO, 0.0);

// Create the outer rounded rectangle
CGRect targetRect = SizeMakeRect(targetSize);
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:targetRect cornerRadius:12];

// Fill and stroke it
[bgColor setFill];
[path fill];
[path strokeInside:2];

// Create the inner rounded rectangle
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRoundedRect:CGRectInset(targetRect, 4, 4) cornerRadius:8];

// Stroke it
[innerPath strokeInside:1];

// Retrieve the initial image
UIImage *baseImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Create a resizable version, with respect to
// the primary corner radius
UIImage *image = [baseImage resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];
return image;

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