post Image
Swift3.0対応 CoreGraphicsでPieを描く

はじめに

Swift3で、グラフなどを描く際に利用できるPieのサンプルを作成しました。
基本的なやり方なので、応用が効くと思います。
単純に円を描くだけなら以下のリンク先で紹介している方法でもできます。
Qiita Swift3.0対応 CoreGraphicsで円を描く

Simulator Screen Shot 2017.01.11 21.09.16.png

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を指定します。
サンプルではStoryboardで設定した色を引数に渡しています。

(3) 開始と終了の角度をラジアンに変換

サンプルではStoryboardで描画の開始角度と終了角度を設定できるようにしています。
開始角度を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


『 Swift 』Article List