Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
evenluo committed Mar 12, 2014
1 parent 08711ee commit 2bf762c
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions 4-视觉效果/4-视觉效果.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,38 @@ iOS的另一个常见特性呢,就是阴影。阴影往往可以达到图层
我们已经知道图层阴影并不总是方的,而是从图层内容的形状继承而来。这看上去不错,但是实时计算阴影也是一个非常消耗资源的,尤其是图层有多个子图层,每个图层还有一个有透明效果的寄宿图的时候。
如果你事先知道你的阴影形状会是什么样子的,你可以通过指定一个`shadowPath`来提高性能。`shadowPath`是一个`CGPathRef`类型(一个指向`CGPath`的指针)。`CGPath`是一个Core Graphics对象,用来指定任意的一个矢量图形。我们可以通过这个属性单独于图层形状之外指定阴影的形状。
图4.11 展示了同一寄宿图的不同阴影设定。如你所见,我们使用的图形很简单,但是它的阴影可以是你想要的任何形状。列表4.4是代码实现。
![图4.11](./4.11.png)
图4.11 用`shadowPath`指定任意阴影形状
列表4.4 创建简单的阴影形状
```objective-c
@interface ViewController ()@property (nonatomic, weak) IBOutlet UIView *layerView1;@property (nonatomic, weak) IBOutlet UIView *layerView2; @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];//enable layer shadowsself.layerView1.layer.shadowOpacity = 0.5f; self.layerView2.layer.shadowOpacity = 0.5f;//create a square shadowCGMutablePathRef squarePath = CGPathCreateMutable(); CGPathAddRect(squarePath, NULL, self.layerView1.bounds); self.layerView1.layer.shadowPath = squarePath; CGPathRelease(squarePath);//create a circular shadow
CGMutablePathRef circlePath = CGPathCreateMutable(); CGPathAddEllipseInRect(circlePath, NULL, self.layerView2.bounds); self.layerView2.layer.shadowPath = circlePath; CGPathRelease(circlePath);}@end
```

如果是一个举行或是圆,用`CGPath`会相当简单明了。但是如果是更加复杂一点的图形,`UIBezierPath`类会更合适,它是一个由UIKit提供的在CGPath基础上的Objective-C包装类。

##图层蒙板

通过`masksToBounds`属性,我们可以沿边界裁剪图形;通过`cornerRadius`属性,我们还可以设定一个圆角。但是有时候你希望展现的内容不是在一个矩形或圆角矩形。比如,你想展示一个有星形框架的图片,又或者想让一些古卷文字慢慢渐变成背景色,而不是一个突兀的边界。

使用一个32位有alpha通道的png图片通常是创建一个无矩形视图最方便的方法,你可以给它指定一个透明蒙板来实现。但是这个方法不能让你以编码的方式动态地生成蒙板,也不能让子图层或子视图裁剪成同样的形状。
CALayer有一个属性叫做`mask`可以解决这个问题。这个属性本身就是个CALayer类型,有和其他图层一样的绘制和布局属性。它类似于一个子图层,相对于父图层(即拥有该属性的图层)布局,但是它却不是一个普通的子图层。不同于那些绘制在父图层中的子图层,`mask`图层定义了父图层的部分可见区域。
`mask`图层的`Color`属性是无关紧要的,真正重要的是图层的轮廓。`mask`属性就像是一个饼干切割机,`mask`图层实心的部分会被保留下来,其他的则会被抛弃。(如图4.12)
如果`mask`图层比父图层要小,只有在`mask`图层里面的内容才是它关心的,除此以外的一切都会被隐藏起来。
![图4.12](./4.12.png)
图4.12 把图片和蒙板图层作用在一起的效果
我们将代码演示一下这个过程,创建一个简单的项目,通过图层的`mask`属性来作用于图片之上。为了简便一些,我们用Interface Builder来创建一个包含UIImageView的图片图层。这样我们就只要代码实现蒙板图层了。列表4.5是最终的代码,图4.13是运行后的结果。
列表4.5 应用蒙板图层
```objective-c
@interface ViewController ()@property (nonatomic, weak) IBOutlet UIImageView *imageView; @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];//create mask layerCALayer *maskLayer = [CALayer layer];maskLayer.frame = self.layerView.bounds;UIImage *maskImage = [UIImage imageNamed:@"Cone.png"]; maskLayer.contents = (__bridge id)maskImage.CGImage;//apply mask to image layer
self.imageView.layer.mask = maskLayer; }@end```
![图4.13](./4.13.png)图4.13 使用了`mask`之后的UIImageView
##拉伸过滤器

Expand Down
Binary file added 4-视觉效果/4.11.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.12.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 4-视觉效果/4.13.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2bf762c

Please sign in to comment.