随笔-生活工作点滴

CALayer一些功能介绍

2019-07-09  本文已影响1人  霸_霸霸

1. contentsCenter

介绍:contentsCenter不是个点,而是个CGRect,默认的是(0, 0, 1, 1),功能就是拉伸图片的部分内容,

创建一个小火箭

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *image = [UIImage imageNamed:@"火箭"];
    _rocketView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
    self.rocketView.center = CGPointMake(self.view.center.x, 300);
    [self.view addSubview:self.rocketView];
    self.rocketView.layer.contents = (__bridge id _Nullable)(image.CGImage);
}

如下图


小火箭.png

我将火箭图层的高度增加100,宽度不变;再设置火箭的contentsCenter属性,就能实现部分拉伸效果:

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *image = [UIImage imageNamed:@"火箭"];
    //高度增加100
    _rocketView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height + 100)];
    self.rocketView.center = CGPointMake(self.view.center.x, 300);
    [self.view addSubview:self.rocketView];
    self.rocketView.layer.contents = (__bridge id _Nullable)(image.CGImage);
    //设置中间部分拉伸
    self.rocketView.layer.contentsCenter = CGRectMake(0.25, 0.25, 0.5, 0.5);
}
拉伸.png

我们发现,小火箭的四角没有发生拉伸,中间部分有拉伸效果。
参考链接

2. 给小火箭增加阴影

我们经常给一些控件增加阴影,这个小火箭是镂空的,我们可以通过layer给它添加合身的阴影,而不是像给控件添加阴影那样,只能在周围添加阴影。

    //1. 设定阴影颜色
    self.rocketView.layer.shadowColor = [UIColor blackColor].CGColor;
    //2. 设定阴影的偏移量
    self.rocketView.layer.shadowOffset = CGSizeMake(10, 10);
    //3. 设定阴影的透明度,这个必须要设定,默认是0,不设定就看不到阴影
    self.rocketView.layer.shadowOpacity = 0.8;
阴影.png

如果想要阴影的“毛玻璃”效果更好,可以设置shadowRadius

self.rocketView.layer.shadowRadius = 6;
给阴影增加毛玻璃效果.png

与上面相比,效果很明显。

3. 遮罩mask

如果有一张图片,你只想展示部分内容,或者你想给某个事物增加一些纹路,但是非常复杂,无法绘制,那就可以使用mask


mask.png
    UIImageView *iv = [[UIImageView alloc]initWithFrame:CGRectMake(50, 100, 200, 200)];
    [self.view addSubview:iv];
    iv.image = [UIImage imageNamed:@"纹路"];
    
    UIImage *image = [UIImage imageNamed:@"火箭"];
    CALayer *maskLayer = [CALayer layer];
    [maskLayer setFrame:iv.bounds];
    maskLayer.contents = (__bridge id _Nullable)(image.CGImage);
    iv.layer.mask = maskLayer;
纹路.png
上一篇下一篇

猜你喜欢

热点阅读