Glätten eines abgerundeten Schlaganfalls in Kerngrafiken

Question

Ich erstelle meine eigenen UitableViewCells mit einem Gradientenhintergrund. Ich habe die ganze Logik und Zeichnung geklappt, aber eine Sache, die ich beheben möchte, ist die "Chunkiness" in den Ecken meiner benutzerdefinierten Zelle:

ALT Text http://grab.by/27SM

Wenn Sie in den Ecken zoomen, können Sie sehen, wovon ich spreche. Hier ist der Code I A, um die Zelle zu generieren:

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

Was kann ich tun, um die Kanten zu glätten und gleichzeitig eine konsistente Kantendicke über alle Zellen zu halten?

Answer 1

Ihre Linienbreite ist auf 2 Punkte eingestellt. Was passiert, ist, dass Ihr Code Ihr Begrenzungsschutz berechnet, ohne die Breite der Linie zu verstehen. Das Ergebnis ist, dass für jedes geraden Segment Ihrer Form nur die Hälfte der Breite des Schlaganfalls sichtbar ist. Auf dem Bogen ist die volle Hubbreite sichtbar.

Hier ist das relevante Codesegment aus meiner App, Funversation, um die Spielkarten mit abgerundeten Ecken zu zeichnen, ähnlich wie Sie, was Sie haben.

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

Fügen Sie dies vor Ihrer Berechnung für Minx, MIDX, Maxx usw. hinzu und die Striche für Ihre Form sollten einheitlich sein.

Answer 2

Die andere Möglichkeit, den Schlaganfall konsistent zu machen, besteht darin, den AddPath- und StrokePath -Aufruf über dem Anruf restoregstate zu bewegen - dh Schlaganfall, während er abgeschnitten ist.

Für einen wirklich 2-pt-breiten Schlag mit dieser Lösung verdoppeln Sie einfach die Linienbreite, die Sie in den Grafikzustand einfügen (dh sie auf 4 pt einstellen), da die Hälfte davon abgeschnitten wird.