[iOS Animation]-CALayer 视觉效果-拉伸过滤_html/css_WEB-ITnose

拉伸过滤

最后我们再来谈谈minificationFilter和magnificationFilter属性。总得来讲，当我们视图显示一个图片的时候，都应该正确地显示这个图片（意即：以正确的比例和正确的1：1像素显示在屏幕上）。原因如下：

能够显示最好的画质，像素既没有被压缩也没有被拉伸。 能更好的使用内存，因为这就是所有你要存储的东西。 最好的性能表现，CPU不需要为此额外的计算。

不过有时候，显示一个非真实大小的图片确实是我们需要的效果。比如说一个头像或是图片的缩略图，再比如说一个可以被拖拽和伸缩的大图。这些情况下，为同一图片的不同大小存储不同的图片显得又不切实际。

当图片需要显示不同的大小的时候，有一种叫做拉伸过滤的算法就起到作用了。它作用于原图的像素上并根据需要生成新的像素显示在屏幕上。

事实上，重绘图片大小也没有一个统一的通用算法。这取决于需要拉伸的内容，放大或是缩小的需求等这些因素。CALayer为此提供了三种拉伸过滤方法，他们是：

kCAFilterLinear kCAFilterNearest kCAFilterTrilinear

minification（缩小图片）和magnification（放大图片）默认的过滤器都是kCAFilterLinear，这个过滤器采用双线性滤波算法，它在大多数情况下都表现良好。双线性滤波算法通过对多个像素取样最终生成新的值，得到一个平滑的表现不错的拉伸。但是当放大倍数比较大的时候图片就模糊不清了。

kCAFilterTrilinear和kCAFilterLinear非常相似，大部分情况下二者都看不出来有什么差别。但是，较双线性滤波算法而言，三线性滤波算法存储了多个大小情况下的图片（也叫多重贴图），并三维取样，同时结合大图和小图的存储进而得到最后的结果。

这个方法的好处在于算法能够从一系列已经接近于最终大小的图片中得到想要的结果，也就是说不要对很多像素同步取样。这不仅提高了性能，也避免了小概率因舍入错误引起的取样失灵的问题

图4.14 对于大图来说，双线性滤波和三线性滤波表现得更出色

kCAFilterNearest是一种比较武断的方法。从名字不难看出，这个算法（也叫最近过滤）就是取样最近的单像素点而不管其他的颜色。这样做非常快，也不会使图片模糊。但是，最明显的效果就是，会使得压缩图片更糟，图片放大之后也显得块状或是马赛克严重。

图4.15 对于没有斜线的小图来说，最近过滤算法要好很多

总的来说，对于比较小的图或者是差异特别明显，极少斜线的大图，最近过滤算法会保留这种差异明显的特质以呈现更好的结果。但是对于大多数的图尤其是有很多斜线或是曲线轮廓的图片来说，最近过滤算法会导致更差的结果。换句话说，线性过滤保留了形状，最近过滤则保留了像素的差异。

让我们来实验一下。我们对第三章的时钟项目改动一下，用LCD风格的数字方式显示。我们用简单的像素字体（一种用像素构成字符的字体，而非矢量图形）创造数字显示方式，用图片存储起来，而且用第二章介绍过的拼合技术来显示（如图4.16）。

图4.16 一个简单的运用拼合技术显示的LCD数字风格的像素字体

我们在Interface Builder中放置了六个视图，小时、分钟、秒钟各两个，图4.17显示了这六个视图是如何在Interface Builder中放置的。如果每个都用一个淡出的outlets对象就会显得太多了，所以我们就用了一个IBOutletCollection对象把他们和控制器联系起来，这样我们就可以以数组的方式访问视图了。清单4.6是代码实现。

清单4.6 显示一个LCD风格的时钟

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

@interface ViewController ()   @property (nonatomic, strong) IBOutletCollection(UIView) NSArray *digitViews; @property (nonatomic, weak) NSTimer *timer; ?? @end   @implementation ViewController   - (void)viewDidLoad {   [super viewDidLoad]; //get spritesheet image   UIImage *digits = [UIImage imageNamed:@"Digits.png"];     //set up digit views   for (UIView *view in self.digitViews) {     //set contents     view.layer.contents = (__bridge id)digits.CGImage;     view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1.0);     view.layer.contentsGravity = kCAGravityResizeAspect;   }     //start timer   self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(tick) userInfo:nil repeats:YES];     //set initial clock time   [self tick]; }   - (void)setDigit:(NSInteger)digit forView:(UIView *)view {   //adjust contentsRect to select correct digit   view.layer.contentsRect = CGRectMake(digit * 0.1, 0, 0.1, 1.0); }   - (void)tick {   //convert time to hours, minutes and seconds   NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier: NSGregorianCalendar];   NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;   ?   NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];     //set hours   [self setDigit:components.hour / 10 forView:self.digitViews[0]];   [self setDigit:components.hour % 10 forView:self.digitViews[1]];     //set minutes   [self setDigit:components.minute / 10 forView:self.digitViews[2]];   [self setDigit:components.minute % 10 forView:self.digitViews[3]];     //set seconds   [self setDigit:components.second / 10 forView:self.digitViews[4]];   [self setDigit:components.second % 10 forView:self.digitViews[5]]; } @end

如图4.18，这样做的确起了效果，但是图片看起来模糊了。看起来默认的kCAFilterLinear选项让我们失望了。

图4.18 一个模糊的时钟，由默认的kCAFilterLinear引起

为了能像图4.19中那样，我们需要在for循环中加入如下代码：

1	view.layer.magnificationFilter = kCAFilterNearest;

图4.19 设置了最近过滤之后的清晰显示

组透明

UIView有一个叫做alpha的属性来确定视图的透明度。CALayer有一个等同的属性叫做opacity，这两个属性都是影响子层级的。也就是说，如果你给一个图层设置了opacity属性，那它的子图层都会受此影响。

iOS常见的做法是把一个空间的alpha值设置为0.5（50%）以使其看上去呈现为不可用状态。对于独立的视图来说还不错，但是当一个控件有子视图的时候就有点奇怪了，图4.20展示了一个内嵌了UILabel的自定义UIButton；左边是一个不透明的按钮，右边是50%透明度的相同按钮。我们可以注意到，里面的标签的轮廓跟按钮的背景很不搭调。

图4.20 右边的渐隐按钮中，里面的标签清晰可见

这是由透明度的混合叠加造成的，当你显示一个50%透明度的图层时，图层的每个像素都会一般显示自己的颜色，另一半显示图层下面的颜色。这是正常的透明度的表现。但是如果图层包含一个同样显示50%透明的子图层时，你所看到的视图，50%来自子视图，25%来了图层本身的颜色，另外的25%则来自背景色。

在我们的示例中，按钮和表情都是白色背景。虽然他们都是50%的可见度，但是合起来的可见度是75%，所以标签所在的区域看上去就没有周围的部分那么透明。所以看上去子视图就高亮了，使得这个显示效果都糟透了。

理想状况下，当你设置了一个图层的透明度，你希望它包含的整个图层树像一个整体一样的透明效果。你可以通过设置Info.plist文件中的UIViewGroupOpacity为YES来达到这个效果，但是这个设置会影响到这个应用，整个app可能会受到不良影响。如果UIViewGroupOpacity并未设置，iOS 6和以前的版本会默认为NO（也许以后的版本会有一些改变）。

另一个方法就是，你可以设置CALayer的一个叫做shouldRasterize属性（见清单4.7）来实现组透明的效果，如果它被设置为YES，在应用透明度之前，图层及其子图层都会被整合成一个整体的图片，这样就没有透明度混合的问题了（如图4.21）。

为了启用shouldRasterize属性，我们设置了图层的rasterizationScale属性。默认情况下，所有图层拉伸都是1.0， 所以如果你使用了shouldRasterize属性，你就要确保你设置了rasterizationScale属性去匹配屏幕，以防止出现Retina屏幕像素化的问题。

当shouldRasterize和UIViewGroupOpacity一起的时候，性能问题就出现了（我们在第12章『速度』和第15章『图层性能』将做出介绍），但是性能碰撞都本地化了（译者注：这句话需要再翻译）。

清单4.7 使用shouldRasterize属性解决组透明问题

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

@interface ViewController () @property (nonatomic, weak) IBOutlet UIView *containerView; @end   @implementation ViewController   - (UIButton *)customButton {   //create button   CGRect frame = CGRectMake(0, 0, 150, 50);   UIButton *button = [[UIButton alloc] initWithFrame:frame];   button.backgroundColor = [UIColor whiteColor];   button.layer.cornerRadius = 10;     //add label   frame = CGRectMake(20, 10, 110, 30);   UILabel *label = [[UILabel alloc] initWithFrame:frame];   label.text = @"Hello World";   label.textAlignment = NSTextAlignmentCenter;   [button addSubview:label];   return button; }   - (void)viewDidLoad {   [super viewDidLoad];     //create opaque button   UIButton *button1 = [self customButton];   button1.center = CGPointMake(50, 150);   [self.containerView addSubview:button1];     //create translucent button   UIButton *button2 = [self customButton];   ?   button2.center = CGPointMake(250, 150);   button2.alpha = 0.5;   [self.containerView addSubview:button2];     //enable rasterization for the translucent button   button2.layer.shouldRasterize = YES;   button2.layer.rasterizationScale = [UIScreen mainScreen].scale; } @end

图4.21 修正后的图

总结

这一章介绍了一些可以通过代码应用到图层上的视觉效果，比如圆角，阴影和蒙板。我们也了解了拉伸过滤器和组透明。