IOS рисовать заполненные кружки

Не графический программист, поэтому я пытаюсь споткнуться об этом. Я пытаюсь нарисовать 9 заполненных кругов, каждый из которых имеет другой цвет, каждый с белой рамкой. Рамка UIView представляет собой CGRectMake (0,0,60,60). См. Прикрепленное изображение.

Проблема в том, что я получаю "плоские точки" на границах с каждой стороны. Ниже приведен мой код (из подкласса 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);
}

Если я перейду на CGRectMake (0,0,56,56) в drawRect, я получаю плоские пятна только на верхней и левой сторонах, а нижняя и правая стороны выглядят отлично.

Может кто подскажет, как я могу это исправить? Мне кажется, что граница обрезается UIView, но, не зная об этом, я действительно не знаю, как это исправить.

Спасибо, заранее, за любые предложения графических экспертов.

Ответ 1

Мне нравится ответ от @AaronGolden, просто хотел добавить:

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

Или, лучше:

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

Ответ 2

Эти круги просто обрезаются до границ, которые их рисуют. Представления должны быть немного больше кругов, которые нужно нарисовать. Вы можете представить, что вызов CGContextStrokeEllipseInRect отслеживает круг радиуса 30, а затем рисует по одному пикселю на каждой стороне трассированной кривой. Ну, на дальних краях у вас будет один из этих пикселей, расположенный за пределами границы.

Попробуйте сделать что-то вроде 62x62 или сделайте радиус круга немного меньше, чтобы оставить место для толстого штриха в ваших 60х60-обзорах.

Ответ 3

Я написал это, чтобы вы могли легко рисовать много кругов.

Добавьте следующий код в ваш .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];
}

Затем добавьте следующий код к вашему представлению, загрузив и заменив "ваш" на любое представление, в которое вы хотите поместить круг. Если вы хотите сделать кучу кружков, просто добавьте небольшие страницы на страницу и повторите код ниже. Круг станет размером вашего представления.

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

Ответ 4

Существует простой способ рисовать круг заполнения

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

Ответ 5

Ответ Trianna Brannon на 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)
}

И вызовите func через:

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