[Swift] 원호를 그리는 방법

6647 단어 SwiftSwift4
Swift 로 호를 그리고 싶을 때, UIBezierPath 를 사용합니다.



1. UIView 클래스 만들기



PathDraw.swift

import UIKit

class PathDraw: UIView {
    override func draw(_ rect: CGRect) {
        // 円弧
        let arc = UIBezierPath(arcCenter: CGPoint(x: 150, y: 150), // 円弧の中心
                               radius: 90, // 半径
                               startAngle: CGFloat(Double.pi) * 2 * 10.0 / 360.0, // 開始角度
                               endAngle: CGFloat(Double.pi) * 2 * 350.0 / 360.0, // 終了角度
                               clockwise: true) // trueだと時計回り, falseだと反時計回り
        // 色の指定
        let color = UIColor.white
        color.setStroke()
        // 線幅の指定
        arc.lineWidth = 10
        // パスの角を丸くする
        arc.lineCapStyle = .round
        // 描画する
        arc.stroke()
    }
}

startAngle 및 endAngle을 찾는 방법



3시 방향이 0도가 된다.
직경×원주율×묘화하고 싶은 각도/360도로 구할 수 있다.
샘플 코드는 10 °에서 시작하여 350 °까지 그립니다.

2. ViewController에서 1.에서 만든 PathDraw를 호출합니다.



ViewController.swift
import UIKit

class ViewController: UIViewController {

    // 背景のviewをstoryBoardで生成。
    @IBOutlet weak var arcBackgroundView: UIView!

    // PathDraw のインスタンスを生成する。
    var pathDrawView = PathDraw()

    override func viewDidLoad() {
        super.viewDidLoad()
        // 描画したいサイズを指定します。
        pathDrawView = PathDraw(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        // 背景を透明にする。デフォルトは黒色。
        pathDrawView.isOpaque = false

        // arcBackgroundView に追加
        arcBackgroundView.addSubview(pathDrawView)
    }
}

(참고)


  • Apple 공식 참조 UIBezierPath
  • [Swift] UIBezierPath를 사용하여 호를 그립니다.
  • [iPhone] iOS 앱에서 도형을 그리려면 UIBezierPath 사용
  • 【Swift】120°는 무엇 라디안? (각도에서 호도 계산)
  • 좋은 웹페이지 즐겨찾기