ios UIBezierPath 연습 1 (원그리기, 호그리기,선그리기)

ios UIBezierPath 연습 1 (원그리기, 호그리기,선그리기)

 

 

 

import UIKit

@IBDesignable
class LineView: UIView {

    //@IBInspectable var lineCount:Int = 10
    
    //5 간격
    var divid = 10.0
    var width = 0.0
    var height = 0.0
    
    override func draw(_ rect: CGRect) {
        
        width = bounds.width
        height = bounds.height
        
        // 300, 300
        print("view width : \(width)")
        print("view height : \(height)")
        
        
        let linePath = UIBezierPath()

        
        //[1] 세로 300 y축 10의 간격으로 몇개를 그릴 수 있을까?
        /// 가로선 그리기
        let lineCnt = height / divid
        print("총 그려질 라인 개수 : \(lineCnt)")

        var yPosition = 0.0
        for _ in 0..<Int(lineCnt){

            linePath.move(to: CGPoint(x: 0, y: yPosition))
            linePath.addLine(to: CGPoint(x: width, y: yPosition))

            yPosition += divid
        }
        
        linePath.lineWidth = 1
        UIColor.green.setStroke()
        linePath.stroke()
        
        
        //[1-2] 세로 연속으로 번호 text 만들기
        var verticalLineNum = 0
        for _ in 0..<Int(lineCnt){
            
            //세로로 좌표를 찍어줄 Text를 동적으로 생성해서 붙인다.
            let textLayer = CATextLayer()
            textLayer.frame = CGRect(origin: CGPoint(x: -15 , y: verticalLineNum - 5), size: CGSize(width: 15, height: 10))
            textLayer.string = "\(verticalLineNum)"
            textLayer.alignmentMode = .center
            textLayer.fontSize = 8.0
            textLayer.font = "Helvetica Nue" as CFTypeRef
            self.layer.addSublayer(textLayer)
            verticalLineNum += 10
        }
        
        
        
        //[2] 세로 300 에 10개의 라인을 그릴려면 몇 간격으로 그려야 할까?
//        let interVal = Int(height) / lineCount
//        print("interVal : \(interVal)")
//
//        var yPosition = 0.0
//
//        for _ in 0..<lineCount{
//
//            linePath.move(to: CGPoint(x: 5, y: yPosition))
//            linePath.addLine(to: CGPoint(x: width - 5, y: yPosition))
//
//            yPosition += Double(interVal)
//        }
//
//        linePath.lineWidth = 1
//        UIColor.green.setStroke()
//        linePath.stroke()
        
        
        
        //[2-1] 세로선 그리기 패스
        let verticalPath = UIBezierPath()
        var xPosition = 0.0
        for _ in 0..<Int(lineCnt){

            verticalPath.move(to: CGPoint(x: xPosition, y: 0))
            verticalPath.addLine(to: CGPoint(x: xPosition, y: height))

            xPosition += divid
        }

        verticalPath.lineWidth = 1
        UIColor.systemRed.setStroke()
        verticalPath.stroke()

        
        //[2-2] 가로로 번호 text 만들기
        var horizontalLineNum = 0
        for _ in 0..<Int(lineCnt){
            
            //가로로 좌표를 찍어줄 Text를 동적으로 생성해서 붙인다.
            let textLayer = CATextLayer()
            textLayer.frame = CGRect(origin: CGPoint(x: horizontalLineNum - 5, y: -25), size: CGSize(width: 10, height: 30))
            textLayer.string = "\(horizontalLineNum)"
            textLayer.fontSize = 8.0
            textLayer.alignmentMode = .left
            textLayer.isWrapped = true
            textLayer.font = "Helvetica Nue" as CFTypeRef
            self.layer.addSublayer(textLayer)
            horizontalLineNum += 10
        }
        
        
        
        //[3-1] 원그리기 1
        let circlePath = UIBezierPath(ovalIn: CGRect(origin: CGPoint(x: 10, y: 10), size: CGSize(width: 50, height: 50)))
        circlePath.lineWidth = 2
        UIColor.yellow.setStroke()
        circlePath.stroke()
        UIColor.blue.setFill()
        circlePath.fill()
        
        
        //[3-2] 원그리기 2
        let circlePath2 = UIBezierPath(ovalIn: CGRect(origin: CGPoint(x: 10, y: 60), size: CGSize(width: 50, height: 50)))
        circlePath2.lineWidth = 2
        UIColor.blue.setStroke()
        circlePath2.stroke()
        UIColor.yellow.setFill()
        circlePath2.fill()
        
        
        
        //[4-1] S 호리병 그리기
        let sLinePath = UIBezierPath()
        
        //step 1. 첫번째 지점을 지정한다.
        sLinePath.move(to: CGPoint(x: rect.midX, y: rect.midY))
        
        //step 2. 마지막 점을 지정한다.
        sLinePath.addLine(to: CGPoint(x: rect.midX + 50, y: rect.midY))
        
        //step 3. (오른쪽 곡선그리기) 마지막 지점까지 지정해주고, 곡선의 위치를 2곳 지정해 준다.
        sLinePath.addCurve(to: CGPoint(x: rect.midX + 50, y: rect.midY + 100),
                           controlPoint1: CGPoint(x: rect.midX + 25, y: rect.midY + 50),
                           controlPoint2: CGPoint(x: rect.midX + 75, y: rect.midY + 70))
        
        //step 4.바닥을 다시 그려준다.
        sLinePath.addLine(to: CGPoint(x: rect.midX, y: rect.midY + 100))
        
        
        //step 5. step 3과 동일하게 작성해준다.
        sLinePath.addCurve(to: CGPoint(x: rect.midX, y: rect.midY),
                           controlPoint1: CGPoint(x: rect.midX - 25, y: rect.midY + 70),
                           controlPoint2: CGPoint(x: rect.midX + 25, y: rect.midY + 50))
        
        
        
        sLinePath.lineWidth = 3
        UIColor.green.setStroke()
        sLinePath.stroke()

        UIColor.blue.setFill()
        sLinePath.fill()
        
        
    }

}

 

 

LineTest.zip

0.03MB