iOS UIImage拉伸，CALayer蒙版整理

导语：

最近项目里要实现一个类似微信发送图片的效果，涉及到图片拉伸、遮罩(蒙版)的使用，随手整理如下。

一，效果预览

imageView.png

二，实现方式

这里实现方式有很多种，下面只列出两种方式，其他的大家自行脑洞😄

使用蒙版图片， 代码如下

- (void)viewDidLoad {
    [super viewDidLoad];
    CGFloat contentWidth = CGRectGetWidth(self.view.frame);
    CGFloat contentHeight = CGRectGetHeight(self.view.frame);
    
    CGFloat imageViewWidth = contentWidth * 0.75f;
    CGFloat imageViewHeight = contentHeight / 2.f;
    
    //显示的图片
    UIImage* contentImage = [UIImage imageNamed:@"image.jpg"];
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((contentWidth-imageViewWidth)/2.0f, (contentHeight - imageViewHeight)/2.0f, imageViewWidth, imageViewHeight)];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.image = contentImage;
    [self.view addSubview:imageView];
    
    //遮罩图片
    UIImage *maskImage = [UIImage imageNamed:@"mask_image"];
    
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contents = (__bridge id)maskImage.CGImage;
    maskLayer.frame = CGRectMake(0, 0, CGRectGetWidth(imageView.frame), CGRectGetHeight(imageView.frame));
    maskLayer.contentsScale = maskImage.scale;
    maskLayer.contentsGravity = kCAGravityResize;
    maskLayer.contentsCenter = CGRectMake(0.2963, 0.625, 0.4074, 0.25);
    
    //给UIImageView的layer设置遮罩
    imageView.layer.mask = maskLayer;
}

这里有两个重点

• CALayer contentGravity,此属性对应UIView中的contentMode属性，设置为kCAGravityResize 表明拉伸
• CALayer contentsCenter代表可拉伸的矩形范围（0 - 1.0f百分比）
  详细内容可以参考这里

---

另一个方法：使用CAShapeLayer与贝塞尔曲线生成maskLayer

• CAShapeLayer需要绘制的路径，那么我们先分析一下路径，如图所示：

使用CAShapeLayer路径分析.png

有了分析结果我们就可以开始码代码啦😝，多余的部分没有写出来

- (void)createMaskLayer:(UIImageView *)imageView{
    
    CGFloat viewWidth = CGRectGetWidth(imageView.frame);
    CGFloat viewHeight = CGRectGetHeight(imageView.frame);
    
    CGFloat rightSpace = 10.0f; //point3距X轴imageView右侧距离
    CGFloat topSpace = 15.0f;   //point3距Y轴imageView顶部距离
    CGFloat radiusSpace = 5.0f; //圆半径
    
    //path点
    CGPoint point1 = CGPointMake(radiusSpace, 0);
    CGPoint point2 = CGPointMake(viewWidth - rightSpace - radiusSpace, 0);
    //顺时针1/4圆弧
    CGPoint radiusCenter1 = CGPointMake(point2.x, point2.y + radiusSpace);
    CGPoint point3 = CGPointMake(viewWidth - rightSpace, topSpace);
    CGPoint point4 = CGPointMake(viewWidth, topSpace + 5.0f);
    CGPoint point5 = CGPointMake(viewWidth - rightSpace, topSpace + 10.f);
    CGPoint point6 = CGPointMake(viewWidth - rightSpace, viewHeight - radiusSpace);
    //顺时针1/4圆弧
    CGPoint radiusCenter2 = CGPointMake(point6.x - radiusSpace, point6.y);
    CGPoint point7 = CGPointMake(radiusSpace, viewHeight);
    //顺时针1/4圆弧
    CGPoint radiusCenter3 = CGPointMake(point7.x, point7.y - radiusSpace);
    CGPoint point8 = CGPointMake(0, radiusSpace);
    //顺时针1/4圆弧
    CGPoint radiusCenter4 = CGPointMake(point8.x + radiusSpace, point8.y);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:point1];
    [path addLineToPoint:point2];
    [path addArcWithCenter:radiusCenter1 radius:radiusSpace startAngle:(270/180.0f)*M_PI endAngle:0 clockwise:YES];
    [path addLineToPoint:point3];
    [path addLineToPoint:point4];
    [path addLineToPoint:point5];
    [path addLineToPoint:point6];
    [path addArcWithCenter:radiusCenter2 radius:radiusSpace startAngle:0 endAngle:(90/180.0f)*M_PI clockwise:YES];
    [path addLineToPoint:point7];
    [path addArcWithCenter:radiusCenter3 radius:radiusSpace startAngle:(90/180.0f)*M_PI endAngle:M_PI clockwise:YES];
    [path addLineToPoint:point8];
    [path addArcWithCenter:radiusCenter4 radius:radiusSpace startAngle:M_PI endAngle:(270/180.0f)*M_PI clockwise:YES];
    [path closePath];
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = path.CGPath;
    
    imageView.layer.mask = maskLayer;
}```
效果图

![使用CAShapeLayer.png](http://upload-images.jianshu.io/upload_images/3096441-9978dfaff9c5a725.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

使用CAShapeLayer的有优点是灵活，可以在开发中任意改变遮罩形状，当然如果有现成的遮罩图片自然是实现起来最简便的方法。

---
**其他的方式，大家可以直接回复😉**