iOS draw rempli Cercles

Question

Pas un programmeur graphique ici, donc j'essaie de trébucher à travers cela. J'essaie de dessiner 9 cercles pleins, chacun d'une couleur différente, chacun avec une bordure blanche. Le cadre de UIView est CGRectMake (0,0,60,60). Voir l'image ci-jointe.

Le problème est que j'obtiens des "points plats" sur les bordures de chaque côté. Voici mon code (de la sous-classe 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 je change de CGRectMake (0,0,56,56) dans drawRect, je reçois des méplats uniquement sur les côtés supérieur et gauche, et le fond & les bons côtés semblent bien.

Quelqu'un peut-il suggérer comment je pourrais résoudre ce problème? Il me semble que la frontière est coupée par l'UIView, mais je ne sais pas trop comment y remédier. Merci d'avance, pour toutes vos suggestions d'experts graphiques.

Answer 1

J'aime la réponse de @AaronGolden, je voulais juste ajouter:

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

Ou, mieux:

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

Answer 2

Ces cercles sont juste de clipsés aux limites des vues qui les attirent. Les vues doivent être légèrement plus grandes que les cercles à dessiner. Vous pouvez imaginer l'appel CGContextStrokeEllipseInRect en traçant un cercle de rayon 30 puis en peignant un pixel de chaque côté de la courbe tracée. Bien sur les bords lointains, vous allez avoir un de ces pixels juste en dehors de la limite de la vue. Essayez d'obtenir des vues proches de 62x62, ou faites en sorte que le rayon du cercle soit légèrement plus petit pour laisser la place au trait épais dans vos vues 60 x 60.

Answer 3

I Wrote cela pour que vous pouvez dessiner de nombreux cercles facilement.

Ajoutez le code suivant à votre fichier .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]; 
} 

Ajoutez ensuite le code suivant à votre point de vue ne charge et remplacer « yourView » avec une vue que vous souhaitez placer le cercle Si vous. vouloir faire un tas de cercles juste ajouter quelques petites vues à la page et répétez le code ci-dessous. Le cercle deviendra la taille de la vue que vous faites.

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

Answer 4

Il y a une façon simple de dessiner un cercle de remplissage

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

Answer 5

réponse de Trianna Brannon sur 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) 
} 

Et invoquer func via:

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