Swift3.0 대응 CoreGraphics로 Pie 그리기

소개



Swift3에서 그래프 등을 그릴 때 사용할 수 있는 Pie 샘플을 만들었습니다.
기본적인 방법이므로 응용이 효과가 있다고 생각합니다.
단순히 원을 그리는 것만이라면 아래의 링크처에서 소개하고 있는 방법으로도 할 수 있습니다.
Qiita Swift3.0 대응 CoreGraphics로 원 그리기



Pie 그리기



PieView.swift
private func drawPie(rect: CGRect) {
        // コンテキストを取得(1)
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }

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

        // パイの中心位置
        let center = CGPoint(x: rect.width * 0.5, y: rect.height * 0.5)

        // パイの半径
        let radius = min(rect.width, rect.height) * 0.5

        // 開始と終了の角度をラジアンに変換(3)
        let startRadian = CGFloat((self.startAngle - 90) * .pi/180)
        let endRadian = CGFloat((self.endAngle - 90) * .pi/180)

        // パイの形を描画(4)
        context.move(to: center)
        context.addArc(center: center, radius: radius, startAngle: startRadian, endAngle: endRadian, clockwise: false)
        context.fillPath()
    }

(1) 컨텍스트 취득



컨텍스트를 가져옵니다.

(2) 그리기 색 설정



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

(3) 시작과 끝의 각도를 라디안으로 변환



샘플에서는 스토리보드에서 그리기 시작 각도와 끝 각도를 설정할 수 있습니다.
시작 각도를 0도, 종료 각도를 300도로 하고 있습니다.
(4)에서 설명합니다 Pie를 그리는 메소드의 인수에는 개시 각도와 종료 각도의 라디안을 건네주게 되어 있으므로, 여기서 변환합니다.
-90도 하고 있는 것은 그리는 방향을 시계 방향으로 하기 위해서입니다.

(4) Pie 그리기



"context.move(to: center)"에서 Pie의 중심으로 그리기 위치를 이동합니다.
"context.addArc"의 인수는 왼쪽에서 Pie의 중심점, 반경, 시작 각도 (라디안), 종료 각도 (라디안)에서 "clockwise"는 true이면 시계 방향으로, false이면 반 시계 방향으로 그립니다. . 샘플에서는 false로 하고 있습니다만, true로 하면 위의 이미지의 Pie의 빠진 부분을 묘화합니다.
"context.fillPath()"로 그립니다.

이 메소드 "drawPie"를 UIView의 "draw"메소드로 실행하면 그릴 수 있습니다.

샘플



Github에 샘플 프로젝트를 올렸습니다.
참고가 되면 생각합니다.

Github PieView

좋은 웹페이지 즐겨찾기