IPhone программно обрезает квадратное изображение, чтобы появиться как круг
Я пытаюсь создать образ для пользовательского стиля UIButton, используя изображение из рулона камеры на iPhone. Кнопка имеет круглый фон и эффективно отображается в виде круга. Теперь мне нужно изображение, чтобы пойти в середине кнопки, которая также появляется вокруг.
Как вырезать квадрат UIImage, чтобы он выглядел круглым с прозрачностью вне круглой области?
Если задействована маскировка, мне нужно предварительно визуализировать маску или я могу создать ее программно (например: круг)?
Спасибо!
Ответы
Ответ 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;
}
Ответ 2
Я никогда не делал ничего подобного, но попробуйте использовать QuartzCore
framework и его свойство cornerRadius
. Пример:
#import <QuartzCore/QuartzCore.h>
//some other code ...
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
imgView.layer.cornerRadius = 10.0f;
немного поиграйте с ним, и вы получите то, что хотите.
Надеюсь, что это поможет
Ответ 3
Я начал изучать это через пару недель назад. Я попробовал все предложения здесь, ни один из них не работал хорошо. В большой традиции RTFM я пошел и прочитал документацию Apple по Quartz 2D Programming и придумал это. Пожалуйста, попробуйте и дайте мне знать, как вы идете.
Код можно было бы довольно легко изменить, чтобы обрезать до elipse или любую другую форму, определенную путем.
Убедитесь, что вы включили 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];
}
Ответ 4
Вот быстрый способ создания закругленных углов на квадратном 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;
Ответ 5
Категория UIImage для маскировки изображения с кругом:
UIImage *originalImage = [UIImage imageNamed:@"myimage.png"];
UImage *myRoundedImage = [UIImage roundedImageWithImage:originalImage];
Получите здесь.
Ответ 6
{
imageView.layer.cornerRadius = imageView.frame.size.height /2;
imageView.layer.masksToBounds = YES;
imageView.layer.borderWidth = 0;
}
Ответ 7
У меня есть другое решение:
- (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.
Ответ 8
Лично я создаю прозрачное изображение круга с непрозрачными углами для наложения фотографии. Это решение подходит только тогда, когда вы размещаете изображение в одном месте в пользовательском интерфейсе и предполагаете, что непрозрачные углы будут смешаться с фоном.
Ответ 9
Ниже приведен ответ, приведенный в Как обрезать 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];
Ответ 10
Просто используйте
_profilePictureImgView.layer.cornerRadius = 32.0f;
_profilePictureImgView.layer.masksToBounds = YES;