11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Swift3.0対応 CoreGraphicsでPieを描く

Last updated at Posted at 2017-01-11

#はじめに
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

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?