Custom View 그리기

draw(_:)

draw(_:)(drawRect) 함수를 override해서 그림

override func drawRect(regionThatNeedsToBeDrawn: CGRect)// draw(_ :)로 변경됨

override func draw(_ rect: CGRect)

draw(_ :) : 뷰에서 CGRect 직사각형으로 특정된 영역에 대해 뷰를 다시 그리는 등 업데이트 할 때 호출되는 메서드

draw(_ :) 메서드는 UIView의 인스턴스 메서드로, UIView 객체 인스턴스로부터 접근해서 사용하는 메서드. 인자로는 CGRect(CoreGraphics Rect)를 받아서 해당 Rect를 다시 그려주는 업데이트 하는 역할로 사용 됨. 해당 rect의 범위는 업데이트 되는 뷰의 bounds 비율

• 절대 drawRect메소드를 호출하면 안됨
  대신 setNeedsDisplay() 메소드 호출을 통해 다시 그려질 뷰를 알림
  setNeedsDisplayInRect(regionThatNeedsToBeRedrawn: CGRect) : 인자로 받은 직사각형 부분만 그리게 해주는 메소드

---

그리기

drawRect를 실행하는방법

• Core Graphics :
  1. 그릴수있는 Context가 필요 (UIGraphicsGetCurrentContext()사용)
  2. 경로 만들기
  3. 경로를 그리는데 필요한 속성 설정
• UIBezierPath : Core Graphics랑 동일하게 처리하지만 Context를 자동으로 처리

Core Graphics

Core Graphics란 Quarts(쿼츠)라는 그래픽 라이브러리 안에 들어있는 기술을 활용하여 2D 렌더링, 수행 경로 기반 드로잉, 안티 얼리어싱 렌더링, 그라디언트, 이미지, 색상 PDF 문서 등등의 처리를 해주는 라이브러리.
Core Graphics 프레임워크는 쿼츠 드로잉 엔진 기반으로한 2D작업(앞에 CG가 붙은것들) -> 2차원 그래픽을 그릴 수 있는 그래픽 라이브러리

• Quarts : 코어 그래픽스 + 코어 애니메이션으로 구성(하나의 라이브러리가 아님)
• Graphic Context : 쿼츠 API함수 호출로 인자 넘겨받은 그래픽 콘텍스트 필요(UIGraphicsGetCurrentContext()함수 호출로 그래픽 콘텍스트 정보를 얻어 그릴 준비를 함)

에제

import Foundation
import UIKit

@IBDesignable
class Button: UIButton {
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {
            return
        }
        let circleRect = bounds.insetBy(dx: bounds.height * 0.1, dy: bounds.width * 0.1)
        
        //원 그리기
        context.beginPath()
        context.setLineWidth(10)
        context.setStrokeColor(UIColor.systemRed.cgColor)
        context.setFillColor(UIColor.systemGreen.cgColor)
        context.addEllipse(in: circleRect)
        context.drawPath(using: .fillStroke)
        context.closePath()
        
        //체크 표시 그리기
        context.beginPath()
        context.setLineWidth(15)
        context.setLineJoin(.round)
        context.setLineCap(.square)
        context.move(to: CGPoint(x: bounds.width * 0.15, y: bounds.height * 0.5))
        context.addLine(to: CGPoint(x: bounds.width * 0.4, y: bounds.height * 0.8))
        context.addLine(to: CGPoint(x: bounds.width * 0.8, y: bounds.height * 0.3))
        context.drawPath(using: .stroke)
    }
}

• @IBDesignable : 해당 그리려는 요소 클래스에 선언해주면 빌드를 거쳐 시뮬레이터로 확인하지 않아도 실시간으로 스토리보드에서 해당그리기가 구현된 것이 보여지도록 해줌
  -> 스토리보드 상 buildFail 발생시 : 프로젝트 빌드세팅 -> Build Active Architecture only(No) -> Editor -> Refresh All Views
• @IBInspectable : inspector에서 해당 인터페이스 요소의 속성을 변경할 수 있게 함.

UIBezierPath

UIBezierPath는 UIKit에서 그리기에 속해있는 클래스. view에서 렌더링 할 수 있는 직선과 곡선으로 구성된 경로

1. path 객체 만들기

let path = UIBezierPath()

2. UIBezierPath 객체의 관련 드로잉 attribute를 설정

path.lineWidth = 10
path.lineJoinStyle = .round

3. move(to:)메소드를 사용해서 초기 세그먼트(선)의 시작점 설정

path.move(to: CGPoint(x: 100, y:100))

4. 선과 곡선 선분을 추가하여 subpath를 정의(설정한 시작점으로 부터 도착 지점의 좌표를 지정하여 두 좌표를 잇는 선분을 그림)

path.addLine(to: CGPoing(x: 100, y: 200))

5. 선택적으로(Optionally), close를 호출하여 subpath를 닫기. close는 마지막 세그먼트의 끝에서 첫번째 세그먼트의 시작까지 직선 세그먼트을 그림

path.close()

6. stroke() 및 fill() 메소드를 사용하여 현재 크래픽 컨텍스트에서 path를 그려줌

• stroke() : 현재의 그리기 속성을 사용하여 path를 따라 선을 그림
• fill() : 현재의 그리기 속성을 사용하여 path가 둘러싼 영역을 그림

참조
MungGu Story
iOYES
Zedd0202
Zedd0202
himyblog__