iOSでカーブを描く – swift

環境

  • 2017/12/10
  • swift
  • swift4
  • swift3
  • xcode9
  • xcode
  • CAShapeLayer

説明

CALayer並びにCAShapeLayerを用いて直線のカーブを表現してみたいと思います。下記のコードを試してみてください。始点と終点を指定してpiを使ってサークルのカーブを表現します。もし、これらを用いたアニメーションを使いたければ、下記のコードをUIViewに追加してください

//
//  ViewController.swift
//  test
//
//  Created by ryosuke-hujisawa on 2017/12/06.
//  Copyright © 2017年 ryosuke-hujisawa. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.



        let pi = CGFloat(Float.pi)
        let start:CGFloat = 0.0
        let end :CGFloat = pi

        // circlecurve
        let path: UIBezierPath = UIBezierPath();
        path.addArc(
            withCenter: CGPoint(x:self.view.frame.width/4, y:self.view.frame.height/4),
            radius: 300,
            startAngle: start,
            endAngle: end,
            clockwise: true
        )
        let layer = CAShapeLayer()
        layer.fillColor = UIColor.clear.cgColor
        layer.strokeColor = UIColor.orange.cgColor
        layer.path = path.cgPath
        self.view.layer.addSublayer(layer)


    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

実行

スクリーンショット 2017-12-10 15.45.11.png

参考

角丸(cornerRadius)のUIImageViewにボーダー(border)をつけるExtension

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

ホーム