ios UIBezierPath 연습 2 (파이차트 그리기)

ios UIBezierPath 연습 2 (파이차트 그리기)

 

 기본개념: 반지름이 1이라면 원주의 길이는 2π 가 된다. 반지름이 1인 원의 원주의 길이는 2π이라는 말은 즉, 360도는 2π이다. 180도의 원주의 길이는 π가된다.

 

 각도를 라디안으로 변경하는 공식

 도 * 3.14 / 180

 

 자주 사용하는 공식

 30도 = π/6

 45도 = π/4

 60도 = π/3

 

 270도 = 4.71238898038469

 

 90도(.pi / 2) = = 1.570796326794897

            

 360(2π) = 6.283185307179586

 

 

import UIKit

@IBDesignable
class CircleView: UIView {


    override func draw(_ rect: CGRect) {
            
        /// 파이차트 만들기
        self.makePiChart(rect)
    }
    
    
    /// 파이 차트 만들기
    func makePiChart(_ rect: CGRect) {
        
        let values:[CGFloat] = [10,20,30,40]
        let total = values.reduce(0, +)
        let colors = [UIColor.blue , UIColor.yellow , UIColor.darkGray , UIColor.green]
        
        /// 시작, 끝 라디안
        var startAngle:CGFloat = -(.pi / 2)
        var endAngle : CGFloat = 0.0
        
        let margin = 10.0
        let centerPoint = CGPoint(x: rect.midX, y: rect.midY)
        let radius = rect.width / 2 - margin
        
        var totalAngle = 0.0
        values.enumerated().forEach { (index, value) in
            endAngle = (value / total) * (.pi * 2)
            print("(value / total) : \((value / total))")
            print("끝 라디안 : \(endAngle)\n")
            totalAngle += endAngle
            let path = UIBezierPath()
            path.move(to: centerPoint)
            path.addArc(withCenter: centerPoint, radius: radius, startAngle: startAngle, endAngle: startAngle + endAngle, clockwise: true)
            
            colors[index].setFill()
            path.fill()
            startAngle += endAngle
            
            UIColor.white.setStroke()
            path.lineWidth = 5.0
            path.close()
            path.stroke()
        }
        
        ///*totalAngle: 6.283185307179586 ,
        ///*360도 (2π) = 6.283185307179586(라디안)/
        print("총 라디안 : \(totalAngle)")
        

    }
    
    
    /// 호만들기
    func makeARC(_ rect: CGRect) {
        
        let margin = 10.0
        let centerPoint = CGPoint(x: rect.midX, y: rect.midY)
        let radius = rect.width / 2 - margin
        
        let path = UIBezierPath()
        
        path.move(to: centerPoint)
        path.addArc(withCenter: centerPoint, radius: radius, startAngle: (90 * Double.pi) / 180, endAngle: (180 * Double.pi) / 180, clockwise: true)
        
        path.lineWidth = 3.0
        UIColor.yellow.setStroke()
        
        UIColor.green.setFill()
        path.fill()
        
        path.close()
        path.stroke()
    }
    
    
    
    /// 원만들기
    func makeCircle(_ rect: CGRect){
        
        let margin = 10.0
        let centerPoint = CGPoint(x: rect.midX, y: rect.midY)
        let radius = rect.width / 2 - margin
        let centerCirclePath = UIBezierPath(arcCenter: centerPoint, radius: radius, startAngle: 0, endAngle: 2 * Double.pi, clockwise: true)
        UIColor.blue.setFill()
        centerCirclePath.fill()
    }

    

}

 

참고

 https://katarnios.tistory.com/20

 https://gorani95.tistory.com/257

 https://iamcho2.github.io/2021/06/29/BezierPath

 (코스응용 예제)