Lissage un coup arrondi dans Core Graphics

Question

Je crée mes propres UITableViewCells avec un fond dégradé. J'ai toute la logique et le dessin ont travaillé, mais une chose que je veux fixer est le « chunkiness » autour des coins de ma cellule personnalisée:

texte alt http://grab.by/27SM

Si vous effectuez un zoom sur les coins, vous pouvez voir ce dont je parle. Voici le code I une utilisation pour générer la cellule:

CGContextRef c = UIGraphicsGetCurrentContext();
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef myGradient = nil;
CGFloat components[8] = TABLE_CELL_BACKGROUND;
CGContextSetStrokeColorWithColor(c, [[UAColor colorWithWhite:0.7 alpha:1] CGColor]);
CGContextSetLineWidth(c, 2);
CGContextSetAllowsAntialiasing(c, YES);
CGContextSetShouldAntialias(c, YES);
CGFloat minx = CGRectGetMinX(rect) , midx = CGRectGetMidX(rect), maxx = CGRectGetMaxX(rect) ;
CGFloat miny = CGRectGetMinY(rect) , maxy = CGRectGetMaxY(rect) ;

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, minx, miny);
CGPathAddArcToPoint(path, NULL, minx, maxy, midx, maxy, kDefaultMargin);
CGPathAddArcToPoint(path, NULL, maxx, maxy, maxx, miny, kDefaultMargin);
CGPathAddLineToPoint(path, NULL, maxx, miny);
CGPathAddLineToPoint(path, NULL, minx, miny);
CGPathCloseSubpath(path);

// Fill and stroke the path
CGContextSaveGState(c);
CGContextAddPath(c, path);
CGContextClip(c);

CGFloat locations[2] = { 0.0, 1.0 };
CGFloat mycomponents[8] = TABLE_CELL_BACKGROUND;
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents(myColorspace, mycomponents, locations, 2);
CGContextDrawLinearGradient(c, myGradient, CGPointMake(minx,miny), CGPointMake(minx,maxy), 0);

CGContextRestoreGState(c);  
CGContextAddPath(c, path);
CGContextStrokePath(c);

Que puis-je faire pour lisser les bords tout en conservant une épaisseur de bord uniforme dans toutes les cellules?

Answer 1

Votre largeur de ligne est réglé à 2 points. Ce qui se passe est que votre code est le calcul de votre rect englobante sans comprendre la largeur de la ligne. Le résultat est que pour chaque segment de droite de votre forme, seule la moitié de la largeur de la course est visible. Sur l'arc, la largeur de course est visible.

Voici le segment correspondant de code à partir de mon application, Funversation, pour dessiner les cartes à jouer avec des coins arrondis semblables à ce que vous avez.

CGRect rect = [self bounds];
rect.size.width -= lineWidth;
rect.size.height -= lineWidth;
rect.origin.x += lineWidth / 2.0;
rect.origin.y += lineWidth / 2.0;

Ajoutez à cela avant votre calcul pour Minx, MIDX, Maxx, etc., et les coups de forme doivent être uniformes.

Answer 2

L'autre façon de faire la course cohérente serait de déplacer le addPath et StrokePath appelle au-dessus de l'appel qui est RestoreGState, accident vasculaire cérébral en clipser.

Pour une course vraiment 2 points à l'échelle de cette solution, il suffit de double la ligne largeur que vous avez mis dans l'état graphique (à savoir, définissez à 4 pt), étant donné que la moitié de celui-ci sera coupée sur.