iOS 그리기 서클

Question

그래픽 프로그래머가 아니기 때문에이 문제를 비틀 거리려고합니다. 저는 각각 9 개의 채워진 동그라미를 그리려고합니다, 각각 다른 색, 흰색 테두리가 있습니다. UIView의 프레임은 CGRectMake (0,0,60,60)입니다. 첨부 된 이미지를 참조하십시오.

문제는 각면의 테두리에 "평면 반점"이 생기는 것입니다. 내가의 drawRect에서 CGRectMake (0,0,56,56)로 변경하는 경우

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

, 나는 단지 위쪽 및 왼쪽 측면에 편평한 반점을 얻고, 바닥 : 다음은 내합니다 (UIView의 하위 클래스에서) 코드 & 오른쪽면이 좋게 보입니다.

아무도 내가 이것을 고칠 수있는 방법을 제안 할 수 있습니까? 국경이 UIView에 의해 클리핑되고 있지만 이것에 대해 많이 알지 못하는 것 같아요. 실제로 어떻게 수정해야할지 모르겠군요.

그래픽 전문가의 제안에 감사드립니다.

Answer 1

난 그냥 추가 싶었 @AaronGolden에서 답을 좋아한다 :

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

또는 더 나은 : 당신은 쉽게 많은 원을 그릴 수 있도록

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

Answer 2

그 원은 단지 그들을 그리는 뷰의 경계에 클리핑 얻고있다. 뷰는 그려지는 원보다 약간 커야합니다. CGContextStrokeEllipseInRect 호출이 반지름 30의 원을 따라 상상 한 다음 추적 된 커브의 각면에 하나의 픽셀을 칠하는 것을 상상할 수 있습니다. 먼 가장자리에는보기 경계 바로 바깥에있는 픽셀 중 하나가 있습니다.

보기를 62x62와 같이 만들거나 원형 반경을 약간 더 작게하여 60x60 크기의 두꺼운 선을위한 공간을 남겨 둡니다.

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

그런 다음보기 한 부하에 다음 코드를 추가하고 당신이 원을 배치하려는 볼 수있는 "yourView을"대체 당신이 경우. 한 무리의 동그라미를 만들고 싶다면 페이지에 작은보기를 추가하고 아래 코드를 반복하십시오. 원은 사용자가 보는 크기입니다.

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

Answer 4

채우기 원

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

Answer 5

Trianna 브래넌의 스위프트 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)