UIImage圆angular

我尝试在UIImage上获得圆angular,到目前为止我读到的最简单的方法是使用蒙板图像。 为此,我使用了TheElements iPhone示例中的代码和我find的一些图片大小调整代码。 我的问题是,resizedImage总是零,我不觉得错误…

- (UIImage *)imageByScalingProportionallyToSize:(CGSize)targetSize { CGSize imageSize = [self size]; float width = imageSize.width; float height = imageSize.height; // scaleFactor will be the fraction that we'll // use to adjust the size. For example, if we shrink // an image by half, scaleFactor will be 0.5. the // scaledWidth and scaledHeight will be the original, // multiplied by the scaleFactor. // // IMPORTANT: the "targetHeight" is the size of the space // we're drawing into. The "scaledHeight" is the height that // the image actually is drawn at, once we take into // account the ideal of maintaining proportions float scaleFactor = 0.0; float scaledWidth = targetSize.width; float scaledHeight = targetSize.height; CGPoint thumbnailPoint = CGPointMake(0,0); // since not all images are square, we want to scale // proportionately. To do this, we find the longest // edge and use that as a guide. if ( CGSizeEqualToSize(imageSize, targetSize) == NO ) { // use the longeset edge as a guide. if the // image is wider than tall, we'll figure out // the scale factor by dividing it by the // intended width. Otherwise, we'll use the // height. float widthFactor = targetSize.width / width; float heightFactor = targetSize.height / height; if ( widthFactor < heightFactor ) scaleFactor = widthFactor; else scaleFactor = heightFactor; // ex: 500 * 0.5 = 250 (newWidth) scaledWidth = width * scaleFactor; scaledHeight = height * scaleFactor; // center the thumbnail in the frame. if // wider than tall, we need to adjust the // vertical drawing point (y axis) if ( widthFactor < heightFactor ) thumbnailPoint.y = (targetSize.height - scaledHeight) * 0.5; else if ( widthFactor > heightFactor ) thumbnailPoint.x = (targetSize.width - scaledWidth) * 0.5; } CGContextRef mainViewContentContext; CGColorSpaceRef colorSpace; colorSpace = CGColorSpaceCreateDeviceRGB(); // create a bitmap graphics context the size of the image mainViewContentContext = CGBitmapContextCreate (NULL, targetSize.width, targetSize.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); // free the rgb colorspace CGColorSpaceRelease(colorSpace); if (mainViewContentContext==NULL) return NULL; //CGContextSetFillColorWithColor(mainViewContentContext, [[UIColor whiteColor] CGColor]); //CGContextFillRect(mainViewContentContext, CGRectMake(0, 0, targetSize.width, targetSize.height)); CGContextDrawImage(mainViewContentContext, CGRectMake(thumbnailPoint.x, thumbnailPoint.y, scaledWidth, scaledHeight), self.CGImage); // Create CGImageRef of the main view bitmap content, and then // release that bitmap context CGImageRef mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext); CGContextRelease(mainViewContentContext); CGImageRef maskImage = [[UIImage imageNamed:@"Mask.png"] CGImage]; CGImageRef resizedImage = CGImageCreateWithMask(mainViewContentBitmapContext, maskImage); CGImageRelease(mainViewContentBitmapContext); // convert the finished resized image to a UIImage UIImage *theImage = [UIImage imageWithCGImage:resizedImage]; // image is retained by the property setting above, so we can // release the original CGImageRelease(resizedImage); // return the image return theImage; } 

如果您使用UIImageView来显示图像,则可以简单地执行以下操作:

 imageView.layer.cornerRadius = 5.0; imageView.layer.masksToBounds = YES; 

并添加一个边框:

 imageView.layer.borderColor = [UIColor lightGrayColor].CGColor; imageView.layer.borderWidth = 1.0; 

我相信你将不得不导入<QuartzCore/QuartzCore.h>并链接到上面的代码工作。

这些线路如何…

 // Get your image somehow UIImage *image = [UIImage imageNamed:@"image.jpg"]; // Begin a new image that will be the new image with the rounded corners // (here with the size of an UIImageView) UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0); // Add a clip before drawing anything, in the shape of an rounded rect [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:10.0] addClip]; // Draw your image [image drawInRect:imageView.bounds]; // Get the image, here setting the UIImageView image imageView.image = UIGraphicsGetImageFromCurrentImageContext(); // Lets forget about that we were drawing UIGraphicsEndImageContext(); 

我用swate创build了一个UIImage -extension,基于@ epatel的很好的答案:

 extension UIImage{ var roundedImage: UIImage { let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size) UIGraphicsBeginImageContextWithOptions(self.size, false, 1) UIBezierPath( roundedRect: rect, cornerRadius: self.size.height ).addClip() self.drawInRect(rect) return UIGraphicsGetImageFromCurrentImageContext() } } 

在故事板中testing:

故事板

问题是使用CGImageCreateWithMask返回一个全黑的图像。 我find的解决scheme是使用CGContextClipToMask来代替:

 CGContextRef mainViewContentContext; CGColorSpaceRef colorSpace; colorSpace = CGColorSpaceCreateDeviceRGB(); // create a bitmap graphics context the size of the image mainViewContentContext = CGBitmapContextCreate (NULL, targetSize.width, targetSize.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast); // free the rgb colorspace CGColorSpaceRelease(colorSpace); if (mainViewContentContext==NULL) return NULL; CGImageRef maskImage = [[UIImage imageNamed:@"mask.png"] CGImage]; CGContextClipToMask(mainViewContentContext, CGRectMake(0, 0, targetSize.width, targetSize.height), maskImage); CGContextDrawImage(mainViewContentContext, CGRectMake(thumbnailPoint.x, thumbnailPoint.y, scaledWidth, scaledHeight), self.CGImage); // Create CGImageRef of the main view bitmap content, and then // release that bitmap context CGImageRef mainViewContentBitmapContext = CGBitmapContextCreateImage(mainViewContentContext); CGContextRelease(mainViewContentContext); // convert the finished resized image to a UIImage UIImage *theImage = [UIImage imageWithCGImage:mainViewContentBitmapContext]; // image is retained by the property setting above, so we can // release the original CGImageRelease(mainViewContentBitmapContext); // return the image return theImage; 

除了缩放之外,你实际上并没有做任何事情。 你需要做的是通过用CGPath剪辑来“掩盖”图像的angular落。 例如 –

  - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextBeginTransparencyLayerWithRect(context, self.frame, NULL); CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0); CGFloat roundRadius = (radius) ? radius : 12.0; CGFloat minx = CGRectGetMinX(self.frame), midx = CGRectGetMidX(self.frame), maxx = CGRectGetMaxX(self.frame); CGFloat miny = CGRectGetMinY(self.frame), midy = CGRectGetMidY(self.frame), maxy = CGRectGetMaxY(self.frame); // draw the arcs, handle paths CGContextMoveToPoint(context, minx, midy); CGContextAddArcToPoint(context, minx, miny, midx, miny, roundRadius); CGContextAddArcToPoint(context, maxx, miny, maxx, midy, roundRadius); CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, roundRadius); CGContextAddArcToPoint(context, minx, maxy, minx, midy, roundRadius); CGContextClosePath(context); CGContextDrawPath(context, kCGPathFill); CGContextEndTransparencyLayer(context); } 

我build议查看石英2D编程指南或其他一些样品。

 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); } + (UIImage *)imageWithRoundCorner:(UIImage*)img andCornerSize:(CGSize)size { UIImage * newImage = nil; if( nil != img) { @autoreleasepool { int w = img.size.width; int h = img.size.height; CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGContextRef context = CGBitmapContextCreate(NULL, w, h, 8, 4 * w, colorSpace, kCGImageAlphaPremultipliedFirst); CGContextBeginPath(context); CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height); addRoundedRectToPath(context, rect, size.width, size.height); CGContextClosePath(context); CGContextClip(context); CGContextDrawImage(context, CGRectMake(0, 0, w, h), img.CGImage); CGImageRef imageMasked = CGBitmapContextCreateImage(context); CGContextRelease(context); CGColorSpaceRelease(colorSpace); [img release]; newImage = [[UIImage imageWithCGImage:imageMasked] retain]; CGImageRelease(imageMasked); } } return newImage; } 

嗨,大家试试这个代码,

 + (UIImage *)roundedRectImageFromImage:(UIImage *)image withRadious:(CGFloat)radious { if(radious == 0.0f) return image; if( image != nil) { CGFloat imageWidth = image.size.width; CGFloat imageHeight = image.size.height; CGRect rect = CGRectMake(0.0f, 0.0f, imageWidth, imageHeight); UIWindow *window = [[[UIApplication sharedApplication] windows] objectAtIndex:0]; const CGFloat scale = window.screen.scale; UIGraphicsBeginImageContextWithOptions(rect.size, NO, scale); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextBeginPath(context); CGContextSaveGState(context); CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect)); CGContextScaleCTM (context, radious, radious); CGFloat rectWidth = CGRectGetWidth (rect)/radious; CGFloat rectHeight = CGRectGetHeight (rect)/radious; CGContextMoveToPoint(context, rectWidth, rectHeight/2.0f); CGContextAddArcToPoint(context, rectWidth, rectHeight, rectWidth/2.0f, rectHeight, radious); CGContextAddArcToPoint(context, 0.0f, rectHeight, 0.0f, rectHeight/2.0f, radious); CGContextAddArcToPoint(context, 0.0f, 0.0f, rectWidth/2.0f, 0.0f, radious); CGContextAddArcToPoint(context, rectWidth, 0.0f, rectWidth, rectHeight/2.0f, radious); CGContextRestoreGState(context); CGContextClosePath(context); CGContextClip(context); [image drawInRect:CGRectMake(0.0f, 0.0f, imageWidth, imageHeight)]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; } return nil; } 

干杯!

它与裁剪工作的原因,而不是掩饰,似乎是色彩空间。

Apple文档如下。

面具一个面具。 如果蒙版是一个图像,它必须在DeviceGray颜色空间中,不能有一个alpha分量,并且本身不能被图像蒙板或蒙版颜色蒙上。 如果蒙版与图像参数指定的图像大小不同,则Quartz会缩放蒙版以适合图像。

看到这里……国际海事组织,除非你绝对需要在代码中做,只是覆盖顶部的图像。

东西沿线…

 - (void)drawRect:(CGRect)rect { // Drawing code [backgroundImage drawInRect:rect]; [buttonOverlay drawInRect:rect]; } 

对于创build圆angular图像,我们可以使用quartzcore。

首先如何添加QuartzCore框架?

 Click project -Targets ->project ->BuildPhase ->Link Binary with Libraries ->Then click + symbol finally select from list and add it 

要不然

 Click project -Targets ->Targets ->general ->Linked Frameworks and Libraries ->Then click + symbol finally select from list and add the QuartzCore framework 

现在导入

 #import <QuartzCore/QuartzCore.h> 

在你的ViewController

然后在viewDidLoad方法中

 self.yourImageView.layer.cornerRadius = 5.0; self.yourImageView.layer.borderWidth = 1.0f; self.yourImageView.layer.borderColor = [UIColor blackColor].CGColor; self.yourImageView.layer.masksToBounds = YES; 

使用图像尺寸时,创build圆形图像非常容易。

 cell.messageImage.layer.cornerRadius = image.size.width / 2 cell.messageImage.layer.masksToBounds = true 

找出最好,最简单的方法如下(没有答案):

 UIImageView *imageView; imageView.layer.cornerRadius = imageView.frame.size.width/2.0f; imageView.layer.masksToBounds = TRUE; 

非常简单,做到了这一点。