Kręgi wypełnione rysunkiem iOS

Question

Nie jestem programistą graficznym, więc próbuję się przez to potknąć. Próbuję narysować 9 wypełnionych kółek, każdy o innym kolorze, z których każdy ma białą obwódkę. Ramka UIView to CGRectMake (0,0,60,60). Zobacz załączony obraz.

Problem polega na tym, że uzyskuję "płaskie plamki" po obu stronach granicy. Oto mój kod (z podklasy 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); 
} 

Jeśli zmieni się CGRectMake (0,0,56,56) w drawRect, mam tylko płaskie plamy na górnej i lewej stronie, a dno & prawe strony wyglądają dobrze.

Czy ktoś może zasugerować, w jaki sposób mogę to naprawić? Wydaje mi się, że granica jest przycinana przez UIView, ale nie wiedząc zbyt wiele o tym, naprawdę nie wiem jak to naprawić.

Z góry dziękuję za sugestie ekspertów graficznych.

Answer 1

lubię odpowiedź od @AaronGolden, po prostu chciał dodać:

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

Albo lepiej:

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

Answer 2

te kręgi są dopiero się przycięty do granic widoków, które je rysować. Widoki muszą być nieco większe niż te, które należy narysować. Możesz sobie wyobrazić wywołanie CGContextStrokeEllipseInRect, śledząc krąg o promieniu 30, a następnie malując jeden piksel po każdej stronie krzywej. Cóż, na dalekich krawędziach będziesz miał jeden z tych pikseli tuż poza granicami widoku.

Spróbuj ustawić swoje widoki na kształt 62x62, lub zmniejsz nieco promień okręgu, aby pozostawić miejsce na gruby obrys w widoku 60x60.

Answer 3

Napisałem to, aby można było łatwo wyciągnąć wielu kręgach.

Dodaj następujący kod do pliku .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]; 
} 

następnie dodaj następujący kod do widoku zrobił obciążenia i zastąpić „yourView” z dowolnym widoku, który chcesz umieścić koło w przypadku. chcesz utworzyć kilka kręgów, wystarczy dodać kilka małych widoków do strony i powtórzyć poniższy kod. Okrąg stanie się wielkością tworzonego widoku.

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

Answer 4

Jest prosty sposób, aby narysować okrąg wypełnienia

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

Answer 5

odpowiedź Trianna Brannon w sprawie 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) 
} 

i wywołać func poprzez:

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