iOS 微信尖角图片

介绍##

对于图片的裁剪我都放到了一个工具类WYArrowImageTool中,里面代码有具体的详解.直接拷贝以下代码到项目中可用.

WYArrowImageTool.h

@interface WYArrowImageTool : NSObject

///  返回一张尖角图片, 尖角朝右
///
///  @param image     图片
///  @param imageSize 尖角图片大小
///
///  @return 尖角朝右的图片
+ (UIImage *)arrowRightImage:(UIImage *)image size:(CGSize)imageSize;

///  返回一张尖角图片, 尖角朝左
///
///  @param image     图片
///  @param imageSize 尖角图片大小
///
///  @return 尖角朝左的图片
+ (UIImage *)arrowLeftImage:(UIImage *)image size:(CGSize)imageSize;

@end

WYArrowImageTool.m

#import "WYArrowImageTool.h"

#define kArrowWidth 6       // 尖角宽度
#define kArrowMarginTop 13  // 尖角距离顶部距离
#define kArrowHeight 10     // 尖角高度

@implementation WYArrowImageTool

///  返回一张尖角图片, 尖角朝右
///
///  @param image     图片
///  @param imageSize 尖角图片大小
///
///  @return 尖角朝右的图片
+ (UIImage *)arrowRightImage:(UIImage *)image size:(CGSize)imageSize {
    //1.创建图片上下文
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
    //2.获取图片上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    //3.创建路径
    CGFloat imageW = imageSize.width;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, imageSize.width - kArrowWidth, imageSize.height) cornerRadius:6];
    
    [path moveToPoint:CGPointMake(imageW - kArrowWidth, 0)];
    [path addLineToPoint:CGPointMake(imageW - kArrowWidth, kArrowMarginTop)];
    [path addLineToPoint:CGPointMake(imageW, kArrowMarginTop + 0.5 * kArrowHeight)];
    [path addLineToPoint:CGPointMake(imageW - kArrowWidth, kArrowMarginTop + kArrowHeight)];
    [path closePath];
    //4.把路径添加到上下文中
    CGContextAddPath(contextRef, path.CGPath);
    
    //5.裁剪上下文
    CGContextEOClip(contextRef);
    
    //6.把图片画到上下文中
    [image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
    
    //7.从上下文中取出图片
    UIImage *arrowImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //8.卸磨杀驴
    UIGraphicsEndImageContext();
    
    return arrowImage;
}

///  返回一张尖角图片, 尖角朝左
///
///  @param image     图片
///  @param imageSize 尖角图片大小
///
///  @return 尖角朝左的图片
+ (UIImage *)arrowLeftImage:(UIImage *)image size:(CGSize)imageSize {
    //1.创建图片上下文
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
    //2.获取图片上下文
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    
    //3.创建路径
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(kArrowWidth, 0, imageSize.width - kArrowWidth, imageSize.height) cornerRadius:6];
    
    [path moveToPoint:CGPointMake(kArrowWidth, 0)];
    [path addLineToPoint:CGPointMake(kArrowWidth, kArrowMarginTop)];
    [path addLineToPoint:CGPointMake(0, kArrowMarginTop + 0.5 * kArrowHeight)];
    [path addLineToPoint:CGPointMake(kArrowWidth, kArrowMarginTop + kArrowHeight)];
    [path closePath];
    //4.把路径添加到上下文中
    CGContextAddPath(contextRef, path.CGPath);
    
    //5.裁剪上下文
    CGContextEOClip(contextRef);
    
    //6.把图片画到上下文中
    [image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
    
    //7.从上下文中取出图片
    UIImage *arrowImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //8.卸磨杀驴
    UIGraphicsEndImageContext();
    
    return arrowImage;
}

@end

例子 效果就是最上面的图片效果

#import "ViewController.h"
#import "WYArrowImageTool.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupUI];
}

- (void)setupUI {
    UIImage *image = [UIImage imageNamed:@"ball"];

    // 左尖角
    UIImageView *leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 100, 90, 160)];
    leftImageView.image = [WYArrowImageTool arrowLeftImage:image size:leftImageView.bounds.size];
    [self.view addSubview:leftImageView];
    
    // 右尖角
    UIImage *arrowRightImage = [WYArrowImageTool arrowRightImage:image size:CGSizeMake(90, 160)];
    UIImageView *rightImageView = [[UIImageView alloc] initWithImage:arrowRightImage];
    rightImageView.frame = CGRectOffset(leftImageView.frame, 130, 0);
    [self.view addSubview:rightImageView];
}

@end

Demo:https://github.com/wangyansnow/WYWechatImage/tree/master/WechatImageDemo

注意##

为了方便阅读使用,我在这里对图片的处理都是同步方法,如果大量的调用可能会阻塞主线程,可以自行修改一下,把图片的处理放到子线程中,在得到图片后再在主线程中通过block的方式返回.