如何在iPhone SDK中將方形圖像蒙上圓角圖像？

Question

如何將一個正方形的圖像蒙上圓角的圖像？

Answer 1

您可以使用CoreGraphics中創建的路徑與此代碼片段一個圓角矩形：

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight) 
{ 
    float fw, fh; 
    if (ovalWidth == 0 || ovalHeight == 0) { 
     CGContextAddRect(context, rect); 
     return; 
    } 
    CGContextSaveGState(context); 
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect)); 
    CGContextScaleCTM (context, ovalWidth, ovalHeight); 
    fw = CGRectGetWidth (rect)/ovalWidth; 
    fh = CGRectGetHeight (rect)/ovalHeight; 
    CGContextMoveToPoint(context, fw, fh/2); 
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1); 
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1); 
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1); 
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1); 
    CGContextClosePath(context); 
    CGContextRestoreGState(context); 
} 

然後調用CGContextClip（背景）;將其剪切到矩形路徑。現在，任何完成的圖紙（包括繪製圖像）都將被裁剪爲圓形矩形形狀。

作爲一個例子，假設「圖像」是一個UIImage，並且這是在drawRect：方法：

CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSaveGState(context); 
addRoundedRectToPath(context, self.frame, 10, 10); 
CGContextClip(context); 
[image drawInRect:self.frame]; 
CGContextRestoreGState(context); 

Answer 2

下面是在iPhone 3.0和最多可用一種更簡單的方法。每個基於視圖的對象都有一個關聯的圖層。每一層可以有一個圓角半徑設置，這會給你你想要：

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]]; 
// Get the Layer of any view 
CALayer * layer = [roundedView layer]; 
[layer setMasksToBounds:YES]; 
[layer setCornerRadius:10.0]; 

// You can even add a border 
[layer setBorderWidth:4.0]; 
[layer setBorderColor:[[UIColor blueColor] CGColor]]; 

要使用這些方法，你可能需要添加：

#import <QuartzCore/QuartzCore.h> 

Answer 3

看到這個帖子 - 很簡單的答案

How to set round corners in UI images in iphone

UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]]; 
// Get the Layer of any view 
CALayer * l = [roundedView layer]; 
[l setMasksToBounds:YES]; 
[l setCornerRadius:10.0]; 

Answer 4

這兩種方法都工作，但差異SHO取決於你在哪裏使用它。

對於例如：如果你有顯示與其他標籤等沿圖像的單元格的表視圖，並使用層設置cornerRadius，滾動需要一個很大的打擊。它變得不平穩。

我，當我使用的表格視圖單元格的圖像層，並試圖弄清楚，抽筋的原因才發現的CALayer是罪魁禍首面臨這個問題。

用來做的東西，在drawRect中通過NilObject解釋的第一個解決方案。這就像一個魅力，滾動像絲綢般光滑。

在另一方面，如果你想在喜歡酥料餅視圖等靜態視圖使用此，層做到這一點最簡單的方法。

正如我所說的，這兩種方法很好地工作只是你需要根據你想要用它來決定。

Answer 5

我使用這種方法。

+ (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)size; 
    { 
     UIImage *img = nil; 


     CGRect rect = CGRectMake(0, 0, size.width, size.height); 
     UIGraphicsBeginImageContext(rect.size); 
     CGContextRef context = UIGraphicsGetCurrentContext(); 
     CGContextSetFillColorWithColor(context, 
            color.CGColor); 
     CGContextFillRect(context, rect); 
     img = UIGraphicsGetImageFromCurrentImageContext(); 

     UIGraphicsEndImageContext(); 


     return img; 
    } 

Answer 6

我意識到這是舊聞了，但只是熬下來了一點：

有2個可能的問題在這裏：（1）如何申請圓角一個UIView（如一個UIImageView），它將被顯示在屏幕上，以及（2）我如何屏蔽一個方形圖像（即UIImage）來生成一個圓角的新圖像。

對於（1），最簡單的辦法是使用CoreAnimation並設置view.layer。cornerRadius屬性

// Because we're using CoreAnimation, we must include QuartzCore.h 
// and link QuartzCore.framework in a build phases 
#import <QuartzCore/QuartzCore.h> 

// start with an image 
UIImage * fooImage = [UIImage imageNamed:@"foo.png"]; 
// put it in a UIImageView 
UIView * view = [UIImageView alloc] initWithImage:fooImage]; 
// round its corners. This mask now applies to the view's layer's *background* 
view.layer.cornerRadius = 10.f 
// enable masksToBounds, so the mask applies to its foreground, the image 
view.layer.masksToBounds = YES; 

對於（2），最好的辦法是使用UIKit的圖形操作：

// start with an image 
UIImage * fooImage = [UIImage imageNamed:@"foo.png"]; 
CGRect imageRect = CGRectMake(0, 0, fooImage.size.width, fooImage.size.height); 
// set the implicit graphics context ("canvas") to a bitmap context for images 
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0); 
// create a bezier path defining rounded corners 
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:10.f]; 
// use this path for clipping in the implicit context 
[path addClip]; 
// draw the image into the implicit context 
[fooImage drawInRect:imageRect]; 
// save the clipped image from the implicit context into an image 
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext(); 
// cleanup 
UIGraphicsEndImageContext(); 

有什麼棘手的約的問題（2），你可能會認爲你可以做整個操作使用CoreAnimation中的view.layer.mask屬性。但是你不能這樣做，因爲CALayer renderInContext:方法（用於從掩蔽層生成UIImage）似乎忽略掩碼。更糟糕的是，renderInContext:的文檔沒有提到這一點，只是暗示了OSX 10.5的行爲。

一些進一步的上下文：上述（2）的方法是使用UIKit的更多基本的CoreGraphics功能的包裝。您可以直接使用CoreGraphics調用來做同樣的事情 - 這就是選擇的答案正在做的事情 - 但是然後您需要從曲線和線條手動構建圓角矩形貝塞爾路徑，並且還需要補償CoreGraphics使用繪製與UIKit相關的座標系。

Answer 7

很簡單。 self.profileImageView.layer.cornerRadius = self.profileImageView.frame.size.width/2; self.profileImageView.clipsToBounds = YES;

對於每個視圖，都有一個捆綁的圖層屬性。所以上面的第一行是設置圖層對象的角半徑（即CALayer類的一個實例）。要從平方圖像製作圓形圖像，半徑設置爲UIImageView寬度的一半。例如，如果平方圖像的寬度是100像素。半徑設置爲50像素。其次，你必須將clipsToBounds屬性設置爲YES才能使圖層正常工作。

Answer 8

大廈關閉的algal，這裏有一些方法是很好的放在一個UIImage的類別：

- (UIImage *) roundedCornerImageWithRadius:(CGFloat)radius 
{ 
    CGRect imageRect = CGRectMake(0, 0, self.size.width, self.size.height); 
    UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0); //scale 0 yields better results 

    //create a bezier path defining rounded corners and use it for clippping 
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:radius]; 
    [path addClip]; 

    // draw the image into the implicit context 
    [self drawInRect:imageRect]; 

    // get image and cleanup 
    UIImage *roundedCornerImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return roundedCornerImage; 
} 

+ (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size andCornerRadius:(CGFloat)radius 
{ 
    UIImage *image = nil; 
    if (size.width == 0 || size.height == 0) { 
     size = CGSizeMake(1.0, 1.0); 
    } 
    CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height); 
    UIGraphicsBeginImageContextWithOptions(rect.size,NO,0.0); //yields sharper results than UIGraphicsBeginImageContext(rect.size) 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    if (context) 
    { 
     CGContextSetFillColorWithColor(context, [color CGColor]); 
     if (radius > 0.0) { 
      //create a bezier path defining rounded corners and use it for clippping 
      UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius]; 
      [path addClip]; 
      CGContextAddPath(context, path.CGPath); 
     } 
     CGContextFillRect(context, rect); 
     image = UIGraphicsGetImageFromCurrentImageContext(); 
     UIGraphicsEndImageContext(); 
    } 
    return image; 
}