iOS dibujar círculos llenos

No es 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 del UIView es CGRectMake (0,0,60,60). Ver imagen adjunta.

El problema es que estoy recibiendo "puntos planos" en los bordes de cada lado. El siguiente es 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 en la parte inferior & los lados derechos se ven bien.

¿Alguien puede sugerir cómo puedo arreglar esto? Me parece que la frontera está siendo recortada por el UIView, pero sin saber mucho sobre esto, realmente no sé cómo arreglarlo.

Gracias, de antemano, por las sugerencias de cualquiera de ustedes expertos gráficos.

introduzca la descripción de la imagen aquí

Author: RegularExpression, 2013-06-11
Source

5 answers

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

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

O, mejor: 

CGFloat lineWidth = 2;
CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);
 38
Author: Wain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-11 07:09:08

Esos círculos están siendo recortados a los límites de las vistas que los dibujan. Las vistas deben ser ligeramente más grandes que los círculos a dibujar. Puede imaginar la llamada CGContextStrokeEllipseInRect trazando un círculo de radio 30 y luego pintando un píxel a 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 como 62x62, o haga que el radio del círculo sea ligeramente más pequeño para dejar espacio para el trazo grueso en tus vistas de 60x60.

 17
Author: Aaron Golden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-11 07:03:18

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

Luego Agregue el siguiente código a su vista did load y reemplace "yourView" con cualquier vista en la que desee colocar el círculo. Si desea hacer un montón de círculos, simplemente 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 hagas. 

[self circleFilledWithOutline:self.yourView fillColor:[UIColor redColor] outlineColor:[UIColor purpleColor]];
 7
Author: Trianna Brannon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-27 00:07:17

Hay una manera sencilla de dibujar un círculo de relleno 

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))
 6
Author: 王怡飞,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-25 03:40:37

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 vía: 

self.circleFilledWithOutline(circleView: myCircleView, fillColor: UIColor.red, outlineColor: UIColor.blue)
 3
Author: user7205499,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-24 13:32:21