iOS dibuja círculos llenos

drawrect cgcontext

Question

No soy un programador de gráficos aquí, así que estoy tratando de tropezar con esto. Estoy tratando de dibujar 9 círculos llenos, cada uno de un color diferente, cada uno con un borde blanco. El marco de UIView es CGRectMake (0,0,60,60). Ver imagen adjunta.

El problema es que estoy obteniendo "puntos planos" en las fronteras de cada lado. A continuación está mi código (de la subclase UIView):

- (void)drawRect:(CGRect)rect
{
CGRect borderRect = CGRectMake(0.0, 0.0, 60.0, 60.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetRGBFillColor(context, colorRed, colorGreen, colorBlue, 1.0);
CGContextSetLineWidth(context, 2.0);
CGContextFillEllipseInRect (context, borderRect);
CGContextStrokeEllipseInRect(context, borderRect);
CGContextFillPath(context);
}

Si cambio a CGRectMake (0,0,56,56) en drawRect, obtengo puntos planos solo en los lados superior e izquierdo, y los lados inferior y derecho se ven bien.

¿Alguien puede sugerirme cómo puedo solucionar esto? Me parece que el límite está siendo recortado por UIView, pero sin saber mucho sobre esto, realmente no sé cómo solucionarlo.

Gracias de antemano por cualquiera de las sugerencias de los expertos en gráficos.

Answer 1

Escribí esto para que puedas dibujar muchos círculos fácilmente.

Agregue el siguiente código a su archivo .m:

- (void) circleFilledWithOutline:(UIView*)circleView fillColor:(UIColor*)fillColor outlineColor:(UIColor*)outlinecolor{
CAShapeLayer *circleLayer = [CAShapeLayer layer];
float width = circleView.frame.size.width;
float height = circleView.frame.size.height;
[circleLayer setBounds:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPosition:CGPointMake(width/2, height/2)];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];
[circleLayer setPath:[path CGPath]];
[circleLayer setFillColor:fillColor.CGColor];
[circleLayer setStrokeColor:outlinecolor.CGColor];
[circleLayer setLineWidth:2.0f];
[[circleView layer] addSublayer:circleLayer];
}

A continuación, agregue el siguiente código a su vista. Cargó y reemplazó "yourView" con cualquier vista en la que desee colocar el círculo. Si desea crear un grupo de círculos, solo agregue algunas vistas pequeñas a la página y repita el código a continuación. El círculo se convertirá en el tamaño de la vista que realice.

[self circleFilledWithOutline:self.yourView fillColor:[UIColor redColor] outlineColor:[UIColor purpleColor]];

Answer 2

Esos círculos están siendo recortados al límite de las vistas que los dibujan. Las vistas deben ser un poco más grandes que los círculos que se dibujarán. Puede imaginar la llamada CGContextStrokeEllipseInRect trazando un círculo de radio 30 y luego pintando un píxel en cada lado de la curva trazada. Bueno en los bordes lejanos vas a tener uno de esos píxeles justo fuera del límite de la vista.

Intente hacer que sus vistas sean algo así como 62x62, o haga que el radio del círculo sea un poco más pequeño para dejar espacio para el trazo grueso en sus vistas de 60x60.

Answer 3

Hay una forma simple de dibujar un círculo de relleno

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))

Answer 4

La respuesta de Trianna Brannon en Swift 3

func circleFilledWithOutline(circleView: UIView, fillColor: UIColor, outlineColor:UIColor) {
let circleLayer = CAShapeLayer()
let width = Double(circleView.bounds.size.width);
let height = Double(circleView.bounds.size.height);
circleLayer.bounds = CGRect(x: 2.0, y: 2.0, width: width-2.0, height: height-2.0)
circleLayer.position = CGPoint(x: width/2, y: height/2);
let rect = CGRect(x: 2.0, y: 2.0, width: width-2.0, height: height-2.0)
let path = UIBezierPath.init(ovalIn: rect)
circleLayer.path = path.cgPath
circleLayer.fillColor = fillColor.cgColor
circleLayer.strokeColor = outlineColor.cgColor
circleLayer.lineWidth = 2.0
circleView.layer.addSublayer(circleLayer)
}

E invocar func a través de:

self.circleFilledWithOutline(circleView: myCircleView, fillColor: UIColor.red, outlineColor: UIColor.blue)

Answer 5

Me gusta la respuesta de @AaronGolden, solo quería agregar:

CGRect borderRect = CGRectInset(rect, 2, 2);

O mejor:

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);