소개

Swift3.0에서 CoreGraphics를 사용한 예제가 적었기 때문에 간단한 샘플을 만들었습니다.
채우는 원과 그 위에 겹치는 테두리 원을 그립니다.

채우기 원 그리기

CircleView.swift

private func drawFillCircle(rect: CGRect) {
        // コンテキストの取得(1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        // 色の設定(2)
        context.setFillColor(self.fillColor.cgColor)

        // 円を塗りつぶしで描く(3)
        // 円は引数のCGRectに内接する
        context.fillEllipse(in: rect)
    }

(1) 컨텍스트 취득

컨텍스트를 가져옵니다.

(2) 그리기 색 설정

채우기 색상을 설정하려면 "setFillColor"를 사용하십시오.
인수는 CGColor를 지정합니다.
샘플에서는 스토리보드에서 설정한 색상을 인수에 전달합니다.

(3) 채우기 원의 그리기

채우기 원은 "fillEllipse"로 그릴 수 있습니다.
인수에 지정된 CGRect에 내접하는 원이 그려집니다.

테두리 원 그리기

CircleView.swift

private func drawStrokeCircle(rect: CGRect) {
        // コンテキストの取得(1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

        // 色の設定(2)
        context.setStrokeColor(self.strokeColor.cgColor)

        // 枠線の幅の設定(3)
        context.setLineWidth(CGFloat(self.strokeWidth))

        // 円を線で描く(4)
        // 円は引数のCGRectに内接するが50%がはみ出す
        context.strokeEllipse(in: rect)
    }

(1) 컨텍스트 취득

컨텍스트를 가져옵니다.

(2) 그리기 색 설정

테두리의 색상을 설정하려면 "setStrokeColor"를 사용하십시오.
인수는 CGColor를 지정합니다.
샘플에서는 스토리보드에서 설정한 색상을 인수에 전달합니다.

(3) 테두리의 폭 설정

테두리의 너비를 지정합니다.
샘플에서는 스토리보드에서 설정한 숫자를 인수에 전달합니다.

(4) 테두리의 원 그리기

테두리의 원은 "strokeEllipse"로 그릴 수 있습니다.
인수에 지정된 CGRect에 내접하는 원이 그려지지만 선 너비의 절반이 바깥쪽으로 튀어 나옵니다. 채우기 원과 동일한 CGRect 값을 지정하면 테두리 원이 더 커지므로주의가 필요합니다.

원을 겹쳐서 그리기

CircleView.swift

override func draw(_ rect: CGRect) {
        // Viewに内接する円を塗りつぶしで描く(1)
        self.drawFillCircle(rect: rect)

        // 線の50%がViewの外に出るので内接するために調整したCGRectを用意する(2)
        let strokeRectSizeAdjustment = CGFloat(self.strokeWidth)
        let strokeRectSize = CGSize(width: rect.width - strokeRectSizeAdjustment, height: rect.height - strokeRectSizeAdjustment)
        let strokeRectPointAdjustment = strokeRectSizeAdjustment/2
        let strokeRectPoint = CGPoint(x: rect.origin.x + strokeRectPointAdjustment, y: rect.origin.y + strokeRectPointAdjustment)
        let strokeRect = CGRect(origin: strokeRectPoint, size: strokeRectSize)

        // Viewに内接する円を線で描く(3)
        self.drawStrokeCircle(rect: strokeRect)
    }

(1) 채우기 원의 그리기

먼저 그린 도형이 아래로 됩니다.
테두리의 원을 위로 하고 싶으므로, 채우는 원을 먼저 그립니다.

(2) 테두리 원이 내접하는 CGRect 설정

위에서 설명한 바와 같이 테두리의 너비의 절반이 CGRect에 내접된 원의 바깥쪽으로 튀어 나오므로이를 고려하여 채우는 원과 같은 크기가되도록 테두리 원의 CGRect를 설정합니다. 하고 있습니다.

(3) 테두리의 원 그리기

(2)에서 설정한 CGRect를 건네주어, 채우기의 원과 같은 크기가 되는 테두리의 원을 묘화하고 있습니다.

샘플

Github에 샘플로 만든 프로젝트를 넣었습니다.
CircleView