web-dev-qa-db-fra.com

iOS dessine des cercles remplis

Pas un programmeur graphique ici, donc j'essaie de trébucher à travers cela. J'essaie de dessiner 9 cercles remplis, chacun d'une couleur différente, chacun avec une bordure blanche. La trame de l'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 passe à CGRectMake (0,0,56,56) dans drawRect, j'obtiens des points plats uniquement sur les côtés supérieur et gauche, et les côtés inférieur et droit 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 ne sachant pas grand-chose à ce sujet, je ne sais vraiment pas comment y remédier.

Merci d'avance pour vos suggestions d'experts graphiques.

enter image description here

iosdrawrectcgcontext
34
RegularExpression

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);
38
Wain

Ces cercles sont juste coupés aux limites des vues qui les dessinent. Les vues doivent être légèrement plus grandes que les cercles à dessiner. Vous pouvez imaginer l'appel CGContextStrokeEllipseInRect traçant un cercle de rayon 30, puis peignant un pixel de chaque côté de la courbe tracée. Eh bien, sur les bords éloignés, vous allez avoir l'un de ces pixels juste à l'extérieur de la limite de la vue.

Essayez de rendre vos vues quelque chose comme 62x62, ou réduisez légèrement le rayon du cercle pour laisser de la place au trait épais dans vos vues 60x60.

17
Aaron Golden

J'ai écrit ceci pour que vous puissiez dessiner facilement de nombreux cercles.

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

Ensuite, ajoutez le code suivant à votre vue qui s'est chargé et remplacez "votre vue" par toute vue dans laquelle vous souhaitez placer le cercle. Si vous souhaitez créer un groupe de cercles, ajoutez simplement 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]];
7
Trianna Brannon

Il existe un moyen simple de dessiner un cercle de remplissage

CGContextFillEllipseInRect(context, CGRectMake(x,y,width,height))
6
王怡飞

Réponse de Trianna Brannon sur Swift

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 appelez func via:

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