iOS 는 간단 한 핸드 드로잉 응용 인 스 턴 스 를 어떻게 개발 하 는 지 상세 하 게 설명 합 니 다.

간단 한 iOS 핸드 드로잉 애플 리 케 이 션 을 개발 하고,
수집 점,모양 그리 기,모양 착색,사용자 에 게 보 여주 면 끝 인 것 같 습 니 다.
프레임 은 Quartz2D 입 니 다.
1,수집 점
우선 인터페이스 UIView 가 필요 합 니 다.이 인터페이스 로 사용자 의 제스처 를 감청 하고 수집 점 이 필요 합 니 다.

사용자 손가락 누 르 기

location(in,터치 이벤트 에서 화판 에 있 는 좌 표를 얻 을 수 있 습 니 다.

var lastPoint = CGPoint.zero


override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
 guard let touch = touches.first else {
 return
 }
 // ...
 lastPoint = touch.location(in: view)
 }

사용자 손가락 이동

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
  // ...
 }

사용자 손가락 들 기

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
  // ...
 }
 

2.모양 을 그립 니 다.모양 에 착색 을 줍 니 다.
그림 컨 텍스트 UIGraphics GetCurrent Context 를 엽 니 다.
채집 포인트 연결 사용 하기
사용자 가 손 으로 그린 것 은 연속 적 인 곡선 이 아니 라 여러 개의 선분 을 연결 한 것 이다.

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }
 // ...
 //   
 context.move(to: fromPoint)
 context.addLine(to: toPoint)
 
 context.setLineCap(.round)
 context.setBlendMode(.normal)
 context.setLineWidth(brushWidth)
 context.setStrokeColor(color.cgColor)
 
 context.strokePath()
 // ...
 
 UIGraphicsEndImageContext()
 }

3.사용자 에 게 보 여주 기
첫 번 째 로 사용 하 는 UIView 는 UIImageView 입 니 다.

그림 을 그 리 는 것 은 작은 부분 을 그 리 는 것 이다.그림 을 꺼 내 서 UIImageView 에 부여 하면 우 리 는 볼 수 있다

.

연속 으로 그 리 는 것 은 작은 단락 을 그리고 그 려 진 그림 을 꺼 내 서 UIImageView 에 부여 하고 변수 로 최신 그림 저장

이어서 그림 을 그립 니 다.먼저 아까 의 그림 변 수 를 한 번 그리고 한 소절 을 그립 니 다.그 려 진 그림 을 꺼 내 서 UIImageView 에 부여 하고 변수 로 최신 그림 을 저장 합 니 다.

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }
 tempImageView.image?.draw(in: view.bounds)
 
 //    ...
 
 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
 
 UIGraphicsEndImageContext()
}

4,화필 설정
붓 의 색깔 과 굵기 를 고치다

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }
 
 // ...
 
 context.setBlendMode(.normal)
 
 //    
 context.setLineWidth(brushWidth)
 //    
 context.setStrokeColor(color.cgColor)
 // ...
}

붓 을 지우개 로 바꾸다

방법 1.붓 의 색 을 화판 의 색 으로 바 꾸 면 지우개

가 된다.

방법 2,

붓 의 색깔 을 투명 하 게 하고,
그림 상하 문장의 혼 색 모드 를 바꾸다
지우개 가 됐어 요.

  switch type {
  case .pencil, .none:
   context.setBlendMode(.color)
  case .eraser:
   context.setLineWidth(15)
   context.setStrokeColor(UIColor.clear.cgColor)
   context.setBlendMode(.clear)
  }

5,후속
더 많은 기능:
텍스트 입력 기능 추가,
텍스트 상자 컨트롤 이 필요 합 니 다 UITextField,UITextView
텍스트 상자 컨트롤 은 일반적으로 드래그 할 수 있 습 니 다.
텍스트 상 자 를 캔버스 위 에 놓 고 캔버스 를 끌 어 내 는 데 문제 가 있 습 니 다.
이 럴 때 경계 검 사 를 해 야 돼 요.
성능 최적화:
일반 성능 최적화,인쇄 함수 의 실행 시간
캔버스 의 크기 가 1366 X 7700(iPad Pro+UIScrollView)일 때 캔버스 가 매우 크다.
모두 한 번 그리 고 그림 을 꺼 내 면 성능 소모 가 많 습 니 다.

 tempImageView.image?.draw(in: view.bounds)
 // ...
 
 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

한 번 그리 기,약 0.07 초,

 let t = Date()
 self.drawingImage()
 if #available(iOS 13.0, *) {
  let span = t.distance(to: Date())
  print(span)
 }

우 리 는 60 의 FPS 를 기대 하 는데,각 프레임 의 계산 시간 은 0.016 이기 때문에,이 방법 을 자주 호출 하여,심하게 걸 렸 다.
이전 방법 은 점 하나,점 하나 그리 기 입 니 다.
이동 해서 한 번 그립 니 다.

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
 guard let touch = touches.first else {
  return
 }
 swiped = true
 let currentPoint = touch.location(in: view)
 drawLine(from: lastPoint, to: currentPoint)
 lastPoint = currentPoint
 }

한 단락 의 선 을 그 으 면 func touches Moved()는 보통 30~60 회 촉발 할 수 있 고 수집 한 점 이 비교적 많 으 며 선 이 부 드 럽 습 니 다.
이 소모 성능 방법 을 자주 호출 합 니 다.
6 회 시전 가능,1 단 그리 기 6 개 점 만 채집 가능,정상 손 속도,다각형 하나만 그리 기
이렇게 최적화 할 수 있 습 니 다.점 의 수집 과 그리 기 분리.
타 이 머 를 사용 하여 0.15 초 간격 으로 한 번 씩 그립 니 다.
원래 수집 점 은 CGPoint 였 는데 지금 수집 점 은[CGPoint]입 니 다.

원래 한 번 그리 기 전의 image 를 한 줄 로 연결 하여 이미지 변 수 를 업데이트 하고 보 여 줍 니 다.

n 개의 점,n 번 전체 화판 그리 기

현재 이전 이미 지 를 한 번 그리고 여러 개의 선 을 연결 하여 이미지 변 수 를 업데이트 하고 보 여 줍 니 다.

n 개 점,전체 화판 1 회 그리 기
성능 을 소모 하 는 방법 은 적 게 호출 하면 된다.

 tempImageView.image?.draw(in: view.bounds)
 // ...
 
 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

앞의 4 시 코드,github 참조
후속 정리 필요,tbd
총결산
iOS 가 간단 한 핸드 드로잉 애플 리 케 이 션 을 어떻게 개발 하 는 지 에 관 한 글 은 여기까지 입 니 다.더 많은 iOS 개발 핸드 드로잉 애플 리 케 이 션 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!