Paste_Image.png
介绍##
对于图片的裁剪我都放到了一个工具类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的方式返回.
