iPhone以编程方式裁剪正方形图像以显示为圆形

我正在尝试使用iPhone上的相机胶卷的图像来创build自定义样式的UIButton图像。 该button具有圆形背景,并有效地显示为一个圆圈。 现在我需要一个图像在button的中间,也出现一轮。

如何在圆形区域之外切割方形UIImage以显示透明度?

如果涉及到遮罩,我需要预先渲染一个蒙版还是可以通过编程创build一个(例如:一个圆圈)?

谢谢!

是的,您可以使用CoreGraphicsdynamic绘制遮罩。 然后你可以创build蒙面的图像。

掩蔽示例:

 - (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; } 

我从来没有做过这样的事情,但尝试使用QuartzCore框架和它的cornerRadius属性。 例:

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

玩一下,你会得到你想要的。

希望能帮助到你

几个星期前我开始研究这个问题。 我在这里尝试了所有的build议,没有一个能够很好地工作。 在RTFM的伟大传统中,我去阅读苹果关于Quartz 2D Programming的文档,并提出了这个问题。 请尝试一下,让我知道你走了。

代码可以相当容易地修改为裁剪到一个椭圆,或由path定义的任何其他形状。

确保你的项目中包含了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类中包含以下代码,用您自己的图像名称replace“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]; } 

以下是在正方形ImageView上创build圆angular的快速方法,使其看起来像一个完美的圆形。 基本上你应用的angular半径等于宽度的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; 
 { imageView.layer.cornerRadius = imageView.frame.size.height /2; imageView.layer.masksToBounds = YES; imageView.layer.borderWidth = 0; } 

UIImage类别用圆圈遮罩图像:

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

在这里得到它。

我有另一个解决scheme:

 - (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更好。

就个人而言,我会创build一个透明的圆形图像与不透明的angular落覆盖照片。 此解决scheme仅适用于将图像放在UI上的一个位置,并假定不透明的angular落将与背景混合。

以下是我在如何裁剪椭圆形或圆形UIImage中给出的答案? 使图像成为圆圈。 这个对我有用..

下载支持档案文件

 #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]; 

只是使用

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