UIGraphics를 사용한 간단한 스케치 어플

오늘은 코어 그래픽스를 사용해서 아이패드로 많이 사용하는 스케치 어플을 만들어 보려고 한다.
iOS에서는 코어 그래픽스라는 그래픽 라이브러리를 사용하여 뷰에 그림을 그릴 수 있다.

위와 같은 간단한 뷰를 오토 레이아웃을 잡아서 스토리보드로 만들어준다.

@IBOutlet var imgView: UIImageView!

이미지 뷰를 IBOutlet으로 ViewController에 선언한다.

 

@IBAction func clearImageView(_ sender: UIButton) {
	imgView.image = nil
}

클리어 버튼도 위와 같이 이미지 뷰에 그려져 있는 콘텐츠를 지우는 IBAction을 선언해준다.

 

var lastPoint: CGPoint!
var lineSize: CGFloat = 2.0
var lineColor = UIColor.purple.cgColor

선을 그린 마지막 포인트, 선의 굵기, 선 색깔을 변수로 선언해준다.

그다음에 터치를 하면 그림이 그려져야 하기 때문에 touchesBegan, touchesMoved, touchesEnded를 모두 선언해주어야 한다.

 

// 터치가 시작될 때 호출
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
  let touch = touches.first! as UITouch
  lastPoint = touch.location(in: imgView)
}

터치가 시작될 때 호출되는 touchesBegan에는 해당 터치 이벤트를 touch라는 상수에 저장하고, 마지막 포인트를 터치가 발생한 imgView 안의 위치로 저장한다.

 

// 터치된 손가락이 움직였을 때 호출
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
  UIGraphicsBeginImageContext(imgView.frame.size)
  UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)
  UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
  UIGraphicsGetCurrentContext()?.setLineWidth(lineSize)

  let touch = touches.first! as UITouch
  let currentPoint = touch.location(in: imgView)

  imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

  UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
  UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currentPoint.x, y: currentPoint.y))
  UIGraphicsGetCurrentContext()?.strokePath()

  imgView.image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()

  lastPoint = currentPoint
}

touchesMoved는 터치된 손가락이 움직였을 때 호출된다.
imageView의 프레임 크기와 동일하게 콘텍스트를 시작하고, 라인 컬러와 사이즈 끝 모양 라운드 처리를 해준다.
그 후에 마지막 포인트부터 현재 이벤트가 호출되고있는 포인트까지 손가락의 터치를 따라서 라인을 그려준 후 콘텍스트를 끝낸다.

// 화면에서 손가락을 떼었을 때 호출
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
  UIGraphicsBeginImageContext(imgView.frame.size)
  UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)
  UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
  UIGraphicsGetCurrentContext()?.setLineWidth(lineSize)

  imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

  UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
  UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
  UIGraphicsGetCurrentContext()?.strokePath()

  imgView.image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
}

touchesEnded는 화면에서 손가락을 떼었을 때 호출된다.
touchesMoved와 다른 점은 마지막 포인트로 addLine을 해준다는 점이다.

override func motionEnded(_ motion: UIEvent.EventSubtype, with event: UIEvent?) {
  if motion == .motionShake {
    imgView.image = nil
  }
}

마지막으로 휴대폰을 흔들었을 때 (shake) 이미지가 지워지는 함수도 선언해주면 간단한 스케치 앱 구현이 끝난다.

아래는 작동 결과이다.