發(fā)紅包看圖片的效果在下只是提供了一個笨笨的思路,藝高膽大之人可能更喜歡直接把想要的畫上去,也希望有這樣的demo分享出來,不同階段的人思路不同而已.(ios9sdk.)
說一下實現(xiàn)思路,以及遇到的問題:
思路:加載顯示一張圖片,注意imageView的寬高比,最終要與image的寬高比一致.然后用UIVisualEffectView實現(xiàn)毛玻璃效果.然后獲得隨機的frame,按此范圍在原始圖片上裁出對應(yīng)范圍的圖片,最后用圓形imageViewSmall顯示到毛玻璃上,這樣看上去就是摳出一個洞的效果,就在下觀察微信的圓形imageView邊緣有漸變效果,這個我思考需要畫上去了,所以沒有做這個效果,相應(yīng)知識不太熟練.
注意問題:裁照片的時候發(fā)現(xiàn)了問題,UIImage 與UIView的坐標系是不一樣的,之前記得官方文檔里有說y軸方向是相反的,在現(xiàn)在sdk沒出現(xiàn),主要是UIView的point是邏輯像素,UIImage的pixel是真正的像素點,所以這里要按縮放比例轉(zhuǎn)換,而且發(fā)現(xiàn)網(wǎng)上的好多方法的轉(zhuǎn)換已經(jīng)不適用現(xiàn)在的sdk了.
github:https://github.com/daaiwusheng/weChatLookImageOfRedBag/tree/master
代碼不多直接貼出來:
#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,weak)UIImageView * imageViewOriginal;
@property(nonatomic,strong)UIImage * imageOriginal;
@property(nonatomic,weak)UIVisualEffectView * effectView;
@end
@implementation ViewController
- (void)viewDidLoad {? ?
?[super viewDidLoad];? ?
?//1.加載圖片,顯示毛玻璃效果 ?
?[self showBlurImageView];? ?
?//2.隨機獲得圓形圖片view,? ?
?[self getRandomCircleImageView];? ? ??
? }
-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event
{
[self getRandomCircleImageView];
}
-(void)getRandomCircleImageView
{
//1.獲取在imageViewOriginal的frame內(nèi)的隨機rect
CGRect randomRect = [self getRandomRectInside:self.imageViewOriginal.frame? maxWidth:80 minWidth:30];
UIImage * imageCliped = [self getNeedImageFrom:self.imageOriginal cropRect:randomRect];
UIImageView * imageViewSmall = [UIImageView new];
imageViewSmall.frame = randomRect;
[imageViewSmall setImage:imageCliped];
[self.effectView.contentView addSubview:imageViewSmall];
imageViewSmall.clipsToBounds = YES;
imageViewSmall.layer.masksToBounds = YES;
imageViewSmall.layer.cornerRadius = imageViewSmall.frame.size.width*0.5;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[imageViewSmall removeFromSuperview];
});
}
-(UIImage *)getNeedImageFrom:(UIImage*)image cropRect:(CGRect)rect
{
CGSize cropSize = rect.size;
CGFloat widthScale = image.size.width/self.imageViewOriginal.bounds.size.width;
CGFloat heightScale = image.size.height/self.imageViewOriginal.bounds.size.height;
cropSize = CGSizeMake(rect.size.width*widthScale, rect.size.height*heightScale);
CGPoint? pointCrop = CGPointMake(rect.origin.x*widthScale, rect.origin.y*heightScale);
rect = CGRectMake(pointCrop.x, pointCrop.y, cropSize.width, cropSize.height);
CGImageRef subImage = CGImageCreateWithImageInRect(image.CGImage, rect);
UIImage *croppedImage = [UIImage imageWithCGImage:subImage];
CGImageRelease(subImage);
return croppedImage;
}
-(void)showBlurImageView
{
//1.設(shè)置imageView的寬高比為圖片image的寬高比,避免圖片走樣
//? ? UIImage * imageOriginal = [UIImage imageNamed:@"wangyu.jpg"];
NSString *path = [NSString stringWithFormat:@"%@/%@.jpg", [[NSBundle mainBundle] resourcePath], @"wangyu"];
UIImage * imageOriginal = [UIImage imageWithContentsOfFile:path];
self.imageOriginal = imageOriginal;
CGFloat valueOfScale = imageOriginal.size.height/imageOriginal.size.width;
UIImageView * imageViewOriginal = [UIImageView new];
self.imageViewOriginal = imageViewOriginal;
CGFloat imagViewOriginalWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat imagViewOriginalHeight = imagViewOriginalWidth*valueOfScale;
imageViewOriginal.frame = CGRectMake(0, 40, imagViewOriginalWidth, imagViewOriginalHeight);
[imageViewOriginal setImage:imageOriginal];
[self.view addSubview:imageViewOriginal];
//2.UIVisualEffectView 毛玻璃效果
UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView * effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
//? ? effectView.alpha = 1.0;
self.effectView = effectView;
effectView.frame = imageViewOriginal.bounds;
[imageViewOriginal addSubview:effectView];
}
-(CGRect)getRandomRectInside:(CGRect)rectFather maxWidth:(CGFloat)maxWidth minWidth:(CGFloat)minWidth
{
CGFloat randomWidth = [self randomBetween:30 And:80];
CGFloat randomX =[self randomBetween:20 And:rectFather.size.width-randomWidth-20];
CGFloat randomY =[self randomBetween:20 And:rectFather.size.height-randomWidth-20];
CGRect randomRect = CGRectMake(randomX, randomY, randomWidth, randomWidth);
NSLog(@"%@",[NSValue valueWithCGRect:randomRect]);
return randomRect;
}
//隨機返回某個區(qū)間范圍內(nèi)的值
- (CGFloat) randomBetween:(CGFloat)smallerNumber And:(CGFloat)largerNumber
{
//設(shè)置精確的位數(shù)
int precision = 100;
//先取得他們之間的差值
CGFloat subtraction = largerNumber - smallerNumber;
//取絕對值
subtraction = ABS(subtraction);
//乘以精度的位數(shù)
subtraction *= precision;
//在差值間隨機
CGFloat randomNumber = arc4random() % ((int)subtraction+1);
//隨機的結(jié)果除以精度的位數(shù)
randomNumber /= precision;
//將隨機的值加到較小的值上
CGFloat result = MIN(smallerNumber, largerNumber) + randomNumber;
//返回結(jié)果
return result;
}
@end
