ios - Dibuja un uiimage de círculo simple

core-graphics circle

Question

Intento hacer un UIImage 20x20 con un simple círculo azul. Intento con esta función, pero el resultado es un círculo azul en un cuadrado negro. ¿Cómo elimino el cuadrado negro alrededor del círculo?

Función:

+ (UIImage *)blueCircle {
static UIImage *blueCircle = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
UIGraphicsBeginImageContextWithOptions(CGSizeMake(20.f, 20.f), YES, 0.0f);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGRect rect = CGRectMake(0, 0, 20, 20);
CGContextSetFillColorWithColor(ctx, [UIColor cyanColor].CGColor);
CGContextFillEllipseInRect(ctx, rect);
CGContextRestoreGState(ctx);
blueCircle = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
});
return blueCircle;
}

resultado actual:

Answer 1

¡Gracias por las preguntas y respuestas! Swift código de la siguiente manera:

extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(diameter, diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()
CGContextSaveGState(ctx)
let rect = CGRectMake(0, 0, diameter, diameter)
CGContextSetFillColorWithColor(ctx, color.CGColor)
CGContextFillEllipseInRect(ctx, rect)
CGContextRestoreGState(ctx)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img
}
}

La versión Swift 3 proporcionada por Schemetrical:

extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSize(width: diameter, height: diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: 0, y: 0, width: diameter, height: diameter)
ctx.setFillColor(color.cgColor)
ctx.fillEllipse(in: rect)
ctx.restoreGState()
let img = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
}

Answer 2

Muestra Xamarin.iOS:

 public static UIImage CircleImage(nfloat diameter, UIColor color, bool opaque = false)
{
var rect = new CGRect(0, 0, diameter, diameter);
UIGraphics.BeginImageContextWithOptions(rect.Size, opaque, 0);
var ctx = UIGraphics.GetCurrentContext();
ctx.SaveState();
ctx.SetFillColor(color.CGColor);
ctx.FillEllipseInRect(rect);
ctx.RestoreState();
var img = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return img;
}

Answer 3

Necesita incluir un canal alfa en su mapa de bits: UIGraphicsBeginImageContextWithOptions(..., NO, ...) si desea ver qué hay detrás de las esquinas.

Answer 4

Prueba esto

UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);

Answer 5

Swift 3 y 4:

extension UIImage {
class func circle(diameter: CGFloat, color: UIColor) -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSize(width: diameter, height: diameter), false, 0)
let ctx = UIGraphicsGetCurrentContext()!
ctx.saveGState()
let rect = CGRect(x: 0, y: 0, width: diameter, height: diameter)
ctx.setFillColor(color.cgColor)
ctx.fillEllipse(in: rect)
ctx.restoreGState()
let img = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return img
}
}

La autocorrección rápida es piadosa. Gracias a Valentin.

Answer 6

Un inicializador personalizado para crear un círculo personalizado:

extension UIImage { convenience init?(diameter: CGFloat, color: UIColor) { let size = CGSize(width: diameter, height: diameter) UIGraphicsBeginImageContextWithOptions(size, false, 0) guard let contex = UIGraphicsGetCurrentContext() else { return nil } contex.saveGState() let rect = CGRect(origin: .zero, size: size) contex.setFillColor(color.cgColor) contex.fillEllipse(in: rect) contex.restoreGState() guard let image = UIGraphicsGetImageFromCurrentImageContext(), let cgImage = image.cgImage else { return nil } UIGraphicsEndImageContext() self.init(cgImage: cgImage) } }