展示效果:
請問:實現(xiàn)的步驟是什么?
第一步，需求:需要把一張普通的圖片可以裁剪成圓形顯示,.請問:圖片裁減的思路是什么?
l1>在上下文中繪制一個要裁剪的圖形.
l2>調(diào)用void
CGContextClip(CGContextRef c)進行裁剪.裁剪的意思就是告訴系統(tǒng),將來只有在被裁剪出的區(qū)域內(nèi)繪制的圖形才會顯示.
l3>在裁剪好的上下文中再把圖片繪制上去.直接調(diào)用UIImage對象的繪圖方法即可!注意:繪制圖片的時候,必須繪制到已經(jīng)裁剪出的圖形位置,否則不顯示.
第二步，實現(xiàn)圖片正方形裁剪,以圓形進行顯示,最終生成一張新的圖片.并保存到沙盒中.請問:實現(xiàn)的步驟是什么?
l1>先加載原圖.
l2>創(chuàng)建(開啟)一個和原圖一樣大小的“位圖上下文”
l3>獲取剛才開啟的圖形上下文
l4>執(zhí)行裁剪操作
l4.1>向上下文中繪制一個圓
l4.2>把路徑添加到上下文中
l4.3>執(zhí)行裁剪操作
l5>把圖片繪制到上下文中
l6>從上下文中獲取裁剪好的圖片對象
l6.2>關(guān)閉位圖上下文
l7>將新生成的圖片上下文裁剪成正方形
l7.1>計算出要裁剪的矩形區(qū)域
l7.2>將點轉(zhuǎn)換成像素
l7.3>調(diào)用CGImage對應(yīng)的方法執(zhí)行裁剪
l7.4>釋放CGImage對象
l8>把圖片保存到沙盒中
l8.1>獲取沙盒路徑
l8.2>將UIImage轉(zhuǎn)換為一個NSData對象
l8.3>把圖片二進制數(shù)據(jù)寫入到沙盒文件中
第三步物蝙，再裁剪一個外層帶圓環(huán)的圖片.
l1>先加載原圖.
l2>創(chuàng)建(開啟)一個和原圖一樣大小的“位圖上下文”
l3>獲取剛才開啟的圖形上下文
l4>先繪制一個圓環(huán),然后渲染
l5>將路徑添加到上下文中并進行渲染
l6>再繪制一個要裁剪的圓
l7>從上下文中獲取圖片
l8>關(guān)閉上下文
l9>將上下文裁剪成正方形
l10>調(diào)用CGImage對應(yīng)的方法執(zhí)行裁剪
l10.1>釋放CGImage對象
l11>將圖片保存到沙盒中
//第一步代碼實現(xiàn)
------------------------------ HMDrawingView.m------------------------------
- (void)drawRect:(CGRect)rect {
// 1.加載要裁剪的圖片
UIImage*image = [UIImageimageNamed:@"me"];
// 2.獲取上下文
CGContextRefctx =UIGraphicsGetCurrentContext();
// 3.在上下文中繪制一個要裁剪的圖形
UIBezierPath*pathCircle = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
CGContextAddPath(ctx, pathCircle.CGPath);
// 4.執(zhí)行裁剪
CGContextClip(ctx);
// 5.把圖片繪制到上下文中
[imagedrawAtPoint:CGPointZero];
}
//第二步代碼實現(xiàn)
------------------------------ ViewController.m------------------------------
//點擊了裁剪圖片按鈕
- (IBAction)didClickButton {
// 1.先加載原圖
UIImage*img = [UIImageimageNamed:@"header"];
// 2.創(chuàng)建(開啟)一個和原圖一樣大小的"位圖上下文"
//參數(shù)1 ->圖形上下文的大小(單位是點)參數(shù)2 ->是否不透明參數(shù)3 ->一個點表示幾個像素
UIGraphicsBeginImageContextWithOptions(img.size,NO,0.0);
// 3.獲取剛才開啟的圖形上下文
CGContextRefctx =UIGraphicsGetCurrentContext();
// 4.執(zhí)行裁剪操作
// 4.1向上下文中繪制一個圓
CGPointcenterP =CGPointMake(img.size.width*0.5, img.size.height*0.5);
CGFloatradius =MIN(img.size.width*0.5, img.size.height*0.5);
UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:centerPradius:radiusstartAngle:0endAngle:M_PI*2clockwise:YES];
// 4.2把路徑添加到上下文中
CGContextAddPath(ctx, path.CGPath);
// 4.3執(zhí)行裁剪操作
CGContextClip(ctx);
// 5.把圖片繪制到上下文中
[imgdrawAtPoint:CGPointZero];
// 6.從上下文中獲取裁剪好的圖片對象
UIImage*imgCliped =UIGraphicsGetImageFromCurrentImageContext();
// 6.2關(guān)閉位圖上下文
UIGraphicsEndImageContext();
// 7.將新生成的圖片上下文裁剪成正方形
// 7.1計算出要裁剪的矩形區(qū)域
CGFloatclipX = (img.size.width- (radius *2)) *0.5;
CGFloatclipY = (img.size.height- (radius *2)) *0.5;
CGFloatclipW = radius *2;
CGFloatclipH = clipW;
// 7.2將點轉(zhuǎn)換成像素
CGFloatscale = [UIScreenmainScreen].scale;
clipX = clipX *scale;
clipY *= scale;
clipW *= scale;
clipH *= scale;
CGRectclipedRect =CGRectMake(clipX, clipY, clipW,clipH);
// 7.3調(diào)用CGImage對應(yīng)的方法執(zhí)行裁剪
CGImageRefcgImageCliped =CGImageCreateWithImageInRect(imgCliped.CGImage, clipedRect);
//把CGImage轉(zhuǎn)換成UIImage對象
imgCliped = [UIImageimageWithCGImage:cgImageCliped];
// 7.4釋放CGImage對象
CGImageRelease(cgImageCliped);
// 8.把圖片保存到沙盒中
// 8.1獲取沙盒路徑
NSString*fileName = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES)lastObject]stringByAppendingPathComponent:@"cliped.png"];
// 8.2把UIImage轉(zhuǎn)換為一個NSData對象
NSData*imgData =UIImagePNGRepresentation(imgCliped);
// 8.3把圖片二進制數(shù)據(jù)寫入到沙盒文件中
[imgDatawriteToFile:fileNameatomically:YES];
NSLog(@"%@", fileName);
}
//第三步代碼實現(xiàn)
------------------------------ ViewController.m------------------------------
//裁剪一個帶圓環(huán)的圖片
- (IBAction)didClickButton {
// 1.加載原圖
UIImage*img = [UIImageimageNamed:@"dst2"];
// 2.創(chuàng)建一個和原圖一樣大小的位圖上下文
UIGraphicsBeginImageContextWithOptions(img.size,NO,0.0);
// 3.獲取上下文
CGContextRefctx =UIGraphicsGetCurrentContext();
// 4.先繪制一個圓環(huán),然后渲染
//線寬
CGFloatlineWidth =10;
CGPointcenterP =CGPointMake(img.size.width*0.5, img.size.height*0.5);
CGFloatradius =MIN(img.size.width*0.5, img.size.height*0.5) - lineWidth *0.5;
UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:centerPradius:radiusstartAngle:0endAngle:M_PI*2clockwise:YES];
CGContextSetLineWidth(ctx, lineWidth);
[[UIColorredColor]set];
// 5.將路徑添加到上下文中并進行渲染
CGContextAddPath(ctx, path.CGPath);
CGContextDrawPath(ctx,kCGPathStroke);
// 6.再繪制一個要裁剪的圓
// 6.1創(chuàng)建一個圓路徑
UIBezierPath*pathCircleClip = [UIBezierPathbezierPathWithArcCenter:centerPradius:radiusstartAngle:0endAngle:M_PI*2clockwise:YES];
// 6.2把路徑添加到上下文中
CGContextAddPath(ctx, pathCircleClip.CGPath);
// 6.3執(zhí)行裁剪
CGContextClip(ctx);
// 6.4把圖片繪制到上下文中
[imgdrawAtPoint:CGPointZero];
// 7.從上下文中獲取圖片
UIImage*imageCliped =UIGraphicsGetImageFromCurrentImageContext();
// 8.關(guān)閉上下文
UIGraphicsEndImageContext();
// 9.將上下文裁剪成正方形
CGFloatclipX = (img.size.width- ((radius +
(lineWidth *0.5)) *2)) *0.5;
CGFloatclipY = (img.size.height- ((radius +
(lineWidth *0.5)) *2)) *0.5;
CGFloatclipW = (radius +
(lineWidth *0.5)) *2;
CGFloatclipH = clipW;
// 9.2把點轉(zhuǎn)換成像素
CGFloatscale = [UIScreenmainScreen].scale;
clipX *= scale;
clipY *= scale;
clipW *= scale;
clipH *= scale;
CGRectclipedRect =CGRectMake(clipX, clipY, clipW,clipH);
// 10.調(diào)用CGImage對應(yīng)的方法執(zhí)行裁剪
CGImageRefcgImageCliped =CGImageCreateWithImageInRect(imageCliped.CGImage, clipedRect);
imageCliped = [UIImageimageWithCGImage:cgImageCliped];
// 10.1釋放CGImage對象
CGImageRelease(cgImageCliped);
// 11.將圖片保存到沙盒中
// 11.1獲取沙盒路徑
NSString*fileName = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES)lastObject]stringByAppendingPathComponent:@"loop_cliped03.png"];
// 11.2把UIImage轉(zhuǎn)換為一個NSData對象
NSData*imageData =UIImagePNGRepresentation(imageCliped);
// 11.3將圖片二進制數(shù)據(jù)寫入到文件中
[imageDatawriteToFile:fileNameatomically:YES];
NSLog(@"%@",fileName);
}
