[iOS] 그림 그리기

오늘은 그림 그리기에 대해서 알아보겠습니다.

 

먼저 그림을 그리기 위해 UIImageView를 추가합니다.

@IBOutlet weak var imgView: UIImageView!

 

직전에 터치하거나 이동한 위치(lastPoint), 선의 두께(lineSize), 선의 색상(lineColor)을 구성하는 변수를 선언합니다.

var lastPoint: CGPoint!
var linsSize: CGFloat = 5.0
var lineColor = UIColor.label.cgColor

터치 이벤트를 하기전에 실행할 내용을 touchesBegan 메소드에서 구현합니다.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 현재 발생한 터치 이벤트를 가지고 옴
    let touch = touches.first! as UITouch
    // 터치된 위치를 lastPoint에 할당
    lastPoint = touch.location(in: imgView)
}

 

터치 이벤트를 하고 있는 도중 실행할 내용을 touchesMoved 메소드에서 구현합니다.

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 현재 발생한 터치 이벤트를 가지고 옴
    let touch = touches.first! as UITouch
    // 터치된 좌표를 currPoint로 가지고 옴
    let currPoint = touch.location(in: imgView)

    let renderer = UIGraphicsImageRenderer(size: imgView.frame.size)

    imgView.image = renderer.image(actions: { rendererContext in
        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))
        rendererContext.cgContext.setLineWidth(linsSize)
        rendererContext.cgContext.setLineCap(.round)
        rendererContext.cgContext.move(to: lastPoint)
        rendererContext.cgContext.addLine(to: currPoint)
        rendererContext.cgContext.strokePath()
        rendererContext.cgContext.setStrokeColor(lineColor)
    })

    // 현재 터치된 위치를 lastPoint라는 변수에 할당
    lastPoint = currPoint
}

 

 

전체소스

class ViewController: UIViewController {

    @IBOutlet weak var imgView: UIImageView!
    
    var lastPoint: CGPoint!
    var linsSize: CGFloat = 5.0
    var lineColor = UIColor.label.cgColor
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first! as UITouch
        lastPoint = touch.location(in: imgView)
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first! as UITouch
        let currPoint = touch.location(in: imgView)
        
        let renderer = UIGraphicsImageRenderer(size: imgView.frame.size)
        
        imgView.image = renderer.image(actions: { rendererContext in
            imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))
            rendererContext.cgContext.setLineWidth(linsSize)
            rendererContext.cgContext.setLineCap(.round)
            rendererContext.cgContext.move(to: lastPoint)
            rendererContext.cgContext.addLine(to: currPoint)
            rendererContext.cgContext.strokePath()
            rendererContext.cgContext.setStrokeColor(lineColor)
        })
        
        lastPoint = currPoint
    }
}

실행화면