[Swift] UIBezierPathを使って円弧を描画する

エンジニアの渡邉です。 アプリ開発でUIBezierPathを使って円弧を描画する機会があったので、 備忘録も…

エンジニアの渡邉です。

アプリ開発でUIBezierPathを使って円弧を描画する機会があったので、
備忘録も兼ねてブログに書こうと思います。

まずはXcodeでプロジェクトを新規作成します。

今回はViewControllerのviewDidLoadで円弧を書いていきます。
今回は上半分の円を書いていきます。
>> ViewController.swift

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 円形の中が透明になっているのがわかり易いように背景をグレーに設定
        self.view.backgroundColor = UIColor.gray
        
        let shapeLayer = CAShapeLayer.init();
        let shapeFrame = CGRect.init(x: 50, y: 50, width: 100, height: 100)
        shapeLayer.frame = shapeFrame
        
        /* --- 円弧を描画 --- */
        // 輪郭の色
        shapeLayer.strokeColor = UIColor.blue.cgColor
        // 円の中の色
        shapeLayer.fillColor = UIColor.clear.cgColor
        // 輪郭の太さ
        shapeLayer.lineWidth = 2.5
        
        // スタートとエンドの位置を計算
        let startAngle: CGFloat = CGFloat(Double.pi * 2.0 * 180.0 / 360.0)
        let endAngle: CGFloat = CGFloat(Double.pi * 2.0 * 0.0 / 360.0)
        
        // 円弧を描画
        shapeLayer.path = UIBezierPath.init(arcCenter: CGPoint.init(x: shapeFrame.size.width / 2.0, y: shapeFrame.size.height / 2.0),
                                            radius: shapeFrame.size.width / 2.0,
                                            startAngle: startAngle,
                                            endAngle: endAngle,
                                            clockwise: true).cgPath
        
        self.view.layer.addSublayer(shapeLayer)

    }

startAngleとendAngleの求め方ですが、
3時の方向が0度になるので、
直径×円周率×描画したい角度/360度で求めることができます。
clockwiseはtrueだと時計回り、falseだと反時計回りになります。

ビルドしてみます。

想定通りに表示されました。

startAngleとendAngleの求め方がわからずに中々実装に苦戦しましたが、
色々な値や角度を入れて試してみて求め方がわかったので、
次回からはすんなり実装できそうです。