標(biāo)簽:
一捍靠、目的:實(shí)現(xiàn)一個(gè)帶有立體感效果的圖像
二沐旨、效果圖:
三、組成介紹:
1榨婆、一個(gè)UIImageView?(用來顯示照片的)
2磁携、CALayer ??(用來顯示背景的陰影效果)
3、手勢(shì) ×挤纭(點(diǎn)擊照片有反應(yīng)谊迄,可以添加一些查看頭像以及改頭像的效果)
四、代碼如下:
1//添加一個(gè)圓形圖片烟央,帶內(nèi)邊框
2UIImageView *headImage=[[UIImageView alloc]initWithFrame:CGRectMake(100,100,100,100)];
3[headImage setBackgroundColor:[UIColor blueColor]];
4headImage.layer.cornerRadius=50;
//設(shè)置圓形效果是根據(jù)這個(gè)imageVeiw的寬度來設(shè)定的
5headImage.image=[UIImage imageNamed:@"image.png"];
6headImage.contentMode=UIViewContentModeScaleAspectFill;
7headImage.clipsToBounds=YES;
//這里必須設(shè)置將圖片剪切成圓形统诺,而陰影效果是在園外的,所以不可以在這個(gè)ImageView添加陰影8headImage.layer.borderWidth=3;
//雖然不可以添加陰影效果吊档,但是可以添加一個(gè)內(nèi)邊框效果篙议,感覺蠻好看的9headImage.layer.borderColor=[UIColor colorWithRed:1.0green:1.0blue:1.0alpha:0.6].CGColor;
//設(shè)置顏色和透明度10[self.view addSubview:headImage];
11//添加背景
12CALayer *layer=[[CALayer alloc]init];
13layer.position=headImage.layer.position;
//這里是個(gè)人喜好這么寫
14layer.bounds=headImage.bounds;
15layer.cornerRadius=headImage.layer.cornerRadius;
16layer.backgroundColor=[UIColor blackColor].CGColor;//這里必須設(shè)置layer層的背景顏色,默認(rèn)應(yīng)該是透明的怠硼,導(dǎo)致設(shè)置的陰影顏色無法顯示出來
17layer.shadowColor=[UIColor grayColor].CGColor; //設(shè)置陰影的顏色18layer.shadowRadius=5; //設(shè)置陰影的寬度19layer.shadowOffset=CGSizeMake(2,2); //設(shè)置偏移20layer.shadowOpacity=1;
21[self.view.layer addSublayer:layer];
22[self.view bringSubviewToFront:headImage];
23//添加手勢(shì)
24UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickedTheImage)];//響應(yīng)方法沒寫25headImage.userInteractionEnabled=YES;///必須設(shè)置用戶交互鬼贱,手勢(shì)才有用26[headImage addGestureRecognizer:tap];
五、總結(jié)和注意事項(xiàng)
1.給imageView添加了圖片并且設(shè)置了clipsToBounds后不可顯示外部的陰影效果了香璃,因?yàn)殛幱靶Ч褪窃谕獠吭O(shè)置的这难,一經(jīng)剪切就沒有了,所以要再加一個(gè)CALayer來顯示這個(gè)陰影效果葡秒。
2.給imgeView添加圖片時(shí)要設(shè)置clipsToBounds=Y(jié)ES姻乓;這樣才可以將圖片設(shè)置為圓形;
3.imageView的邊界效果是
headImage.layer.borderWidth=3;
headImage.layer.borderColor=[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.6].CGColor;
4.要在CALayer層顯示陰影效果眯牧,必須設(shè)置CALayer的背景顏色
5.添加CALayer層之后要將ImageView設(shè)置到最前端
6.手勢(shì)添加后要設(shè)置手勢(shì)的交互蹋岩,不然不能響應(yīng)
headImage.userInteractionEnabled=YES;
- (IBAction)minus:(id)sender {
self.radius = @([self.radius floatValue]+10.0f);
[self redrawImage];
}
- (IBAction)plus:(id)sender {
self.radius = @([self.radius floatValue]-10.0f);
[self redrawImage];
}
-(void)redrawImage
{
//set the original image first
[_imageView setImage:[UIImage imageNamed:@"your image goes here"]];
CGFloat size = [self.radius floatValue];
CGContextRef context = CGBitmapContextCreate(NULL, self.view.bounds.size.width, self.view.bounds.size.height, 8, 4 * self.view.bounds.size.width, CGColorSpaceCreateDeviceRGB(), kCGImageAlphaPremultipliedFirst);
CGContextAddArc(context, 320/2, 460/2, size, 0, 2*M_PI, 0);
CGContextClosePath(context);
CGContextClip(context);
CGContextDrawImage(context, self.view.bounds, _imageView.image.CGImage);
CGImageRef imageMasked = CGBitmapContextCreateImage(context);
CGContextRelease(context);
UIImage *newImage = [UIImage imageWithCGImage:imageMasked];
CGImageRelease(imageMasked);
[_imageView setImage:newImage];
UIGraphicsEndImageContext();
}