iPhone以編程方式裁剪方形圖像以顯示爲圓形

Question

我正嘗試使用iPhone上的相機膠捲圖像爲自定義樣式UIButton創建圖像。該按鈕具有圓形背景，並且有效地顯示爲圓形。現在我需要一個圖像在按鈕的中間，也出現一圈。

如何在圓形區域之外切割方形UIImage以顯示透明度？

如果涉及遮罩，我需要預先渲染一個遮罩還是可以通過編程創建一個遮罩（例如：一個圓圈）？

謝謝！

Answer 1

是的，你可以使用CoreGraphics來動態繪製遮罩。 然後您可以創建蒙版圖像。

舉例掩蔽：

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage 
{ 
    CGImageRef maskRef = maskImage.CGImage; 
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), 
             CGImageGetHeight(maskRef), 
             CGImageGetBitsPerComponent(maskRef), 
             CGImageGetBitsPerPixel(maskRef), 
             CGImageGetBytesPerRow(maskRef), 
             CGImageGetDataProvider(maskRef), NULL, false); 

    CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask); 
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef]; 
    CGImageRelease(maskedImageRef); 
    CGImageRelease(mask); 
    return maskedImage; 
} 

Answer 2

就我個人而言，我會創建一個帶有不透明角的透明圓形圖像來覆蓋照片。此解決方案僅適用於將圖像放在UI上的一個位置，並假定不透明的角落將與背景混合。

Answer 3

我從來沒有做過這樣的事情，但請嘗試使用QuartzCore框架和cornerRadius財產。例如：

#import <QuartzCore/QuartzCore.h> 
//some other code ... 
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; 
imgView.layer.cornerRadius = 10.0f; 

玩弄它有點，你會得到你想要的。

希望它可以幫助

Answer 4

以下是我在How to crop UIImage on oval shape or circle shape?給使圖像圈的答案。它爲我..

Download the Support archive file

#import "UIImage+RoundedCorner.h" 
#import "UIImage+Resize.h" 

繼用來調整圖像大小，並轉換到圓半徑

UIImage *mask = [UIImage imageNamed:@"mask.jpg"]; 

mask = [mask resizedImage:CGSizeMake(47, 47) interpolationQuality:kCGInterpolationHigh ]; 
mask = [mask roundedCornerImage:23.5 borderSize:1]; 

Answer 5

線，我開始尋找到這幾個星期回來。我在這裏嘗試了所有的建議，但都沒有效果。在RTFM的偉大傳統中，我去閱讀了關於Quartz 2D Programming的Apple文檔，並提出了這個問題。請嘗試一下，讓我知道你的方式。

該代碼可以相當容易地修改爲裁剪爲橢圓或由路徑定義的任何其他形狀。

確保您的項目中包含Quartz 2D。

#include <math.h> 

+ (UIImage*)circularScaleNCrop:(UIImage*)image: (CGRect) rect{ 
    // This function returns a newImage, based on image, that has been: 
    // - scaled to fit in (CGRect) rect 
    // - and cropped within a circle of radius: rectWidth/2 

    //Create the bitmap graphics context 
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(rect.size.width, rect.size.height), NO, 0.0); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    //Get the width and heights 
    CGFloat imageWidth = image.size.width; 
    CGFloat imageHeight = image.size.height; 
    CGFloat rectWidth = rect.size.width; 
    CGFloat rectHeight = rect.size.height; 

    //Calculate the scale factor 
    CGFloat scaleFactorX = rectWidth/imageWidth; 
    CGFloat scaleFactorY = rectHeight/imageHeight; 

    //Calculate the centre of the circle 
    CGFloat imageCentreX = rectWidth/2; 
    CGFloat imageCentreY = rectHeight/2; 

    // Create and CLIP to a CIRCULAR Path 
    // (This could be replaced with any closed path if you want a different shaped clip) 
    CGFloat radius = rectWidth/2; 
    CGContextBeginPath (context); 
    CGContextAddArc (context, imageCentreX, imageCentreY, radius, 0, 2*M_PI, 0); 
    CGContextClosePath (context); 
    CGContextClip (context); 

    //Set the SCALE factor for the graphics context 
    //All future draw calls will be scaled by this factor 
    CGContextScaleCTM (context, scaleFactorX, scaleFactorY);  

    // Draw the IMAGE 
    CGRect myRect = CGRectMake(0, 0, imageWidth, imageHeight); 
    [image drawInRect:myRect]; 

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return newImage; 
} 

在您的UIView類中包含以下代碼，用您自己的圖像名稱替換「monk2.png」。

- (void)drawRect:(CGRect)rect 
{ 

    UIImage *originalImage = [UIImage imageNamed:[NSString stringWithFormat:@"monk2.png"]]; 
    CGFloat oImageWidth = originalImage.size.width; 
    CGFloat oImageHeight = originalImage.size.height; 
    // Draw the original image at the origin 
    CGRect oRect = CGRectMake(0, 0, oImageWidth, oImageHeight); 
    [originalImage drawInRect:oRect]; 

    // Set the newRect to half the size of the original image 
    CGRect newRect = CGRectMake(0, 0, oImageWidth/2, oImageHeight/2); 
    UIImage *newImage = [self circularScaleNCrop:originalImage :newRect]; 

    CGFloat nImageWidth = newImage.size.width; 
    CGFloat nImageHeight = newImage.size.height; 

    //Draw the scaled and cropped image 
    CGRect thisRect = CGRectMake(oImageWidth+10, 0, nImageWidth, nImageHeight); 
    [newImage drawInRect:thisRect]; 

} 

Answer 6

我有另一種解決方案：

- (UIImage *)roundedImageWithRect:(CGRect)rect radius:(CGFloat)radius 
{ 
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0); 
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, rect.size.width, rect.size.height) cornerRadius:radius]; 

CGFloat imageRatio = self.size.width/self.size.height; 
CGSize imageSize = CGSizeMake(rect.size.height * imageRatio, rect.size.height); 
CGRect imageRect = CGRectMake(0, 0, imageSize.width, imageSize.height); 

[path addClip]; 
[self drawInRect:imageRect]; 

UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

return image; 

} 

這種變體的性能要比直接設置cornerRadius更好。

Answer 7

UIImage的類別，以掩蓋圖像與圈：

UIImage *originalImage = [UIImage imageNamed:@"myimage.png"]; 
UImage *myRoundedImage = [UIImage roundedImageWithImage:originalImage]; 

得到它here。

Answer 8

以下是在正方形ImageView上創建圓角的快速方法，使其看起來像一個完美的圓形。基本上，你應用的角半徑等於寬度的1/2（方形圖像上的寬度==高度）。

#import <QuartzCore/QuartzCore.h> //you need QuartzCore 
... 

float width = imageView.bounds.size.width; // we can also use the frame property instead of bounds since we just care about the Size and don't care about position 
imageView.layer.cornerRadius = width/2; 

Answer 9

{ 
    imageView.layer.cornerRadius = imageView.frame.size.height /2; 
    imageView.layer.masksToBounds = YES; 
    imageView.layer.borderWidth = 0; 
} 

Answer 10

只需使用

_profilePictureImgView.layer.cornerRadius = 32.0f; 
_profilePictureImgView.layer.masksToBounds = YES;