Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Let'Swift 2022 PencilKit과 Point in Polygon 알고리즘을 활용한 올가미 툴 개발기
Similar a Let'Swift 2022 PencilKit과 Point in Polygon 알고리즘을 활용한 올가미 툴 개발기 (20)
Let'Swift 2022 PencilKit과 Point in Polygon 알고리즘을 활용한 올가미 툴 개발기
- 1. 이해석 PencilKit과 Point in Polygon 알고리즘을 활용한 올가미 툴 개발기 콴다(매스프레소)
- 2. 목차 1.올가미 툴이란? 2.PencilKit 알아보기 3.어떻게 구현 했나요? 4.마무리
- 3. 올가미 툴이란?
- 5. QANDA
- 7. PencilKit Framework iOS 13+ iPadOS 13+ macOS 10.15+ (macOS Catalina) iOS 14+ iPadOS 14+ macOS 11.0+ (macOS Big Sur)
- 13. QANDA
- 18. PKLassoTool 👎 PKStroke 이외에도 사용자가 PKCanvasView 위에 올린 이미지 / 텍스트 (UIView)에도 올가미의 기능을 적용해야 함 UI/ 기능 확장의 어려움
- 19. 올가미 기능 PKStroke 뿐만 아니라 PKCanvasView 위에 올린 이미지 또는 텍스트 뷰를 잡을 수 있어야 함 올가미가 아이템들을 잡은 상태에서 아이템들의 위치를 이동시킬 수 있어야함
- 20. 어떻게 구현했나요?
- 21. 올가미 안에 어떤 아이템이 포함 되었는지 포함되지 않았는지 어떻게 알 수 있을까?
- 22. 다각형 안에 어떤 점들이 포함 되었는지 포 함되지 않았는지 어떻게 알 수 있을까?
- 23. Point in Polygon Problem https://en.wikipedia.org/wiki/Point_in_polygon 평면에서 주어진 점이 다각형의 내부 혹은 외부에 있는지를 판별하는 문제
- 24. Ray casting algorithm https://en.wikipedia.org/wiki/Point_in_polygon O(N) 시간 복잡도 crossing number 알고리즘 혹은 even-odd rule 알고리즘이라고 함
- 26. 1. 반직선과 변의 교점의 개수가 짝수면 외부에 있는 점, 홀수면 내부에 있는 점 2. 변 위에 있는 점은 내부에 있는 점 3. 반직선이 꼭짓점을 지날때 위쪽과 아래쪽 변 중 한 개만 교차한다고 판단함 4. 반직선이 변과 평행한 경우는 고려하지 않음
- 27. 1. 반직선과 변의 교점의 개수가 짝수면 외부에 있는 점, 홀수면 내부에 있는 점 2. 변 위에 있는 점은 내부에 있는 점 3. 반직선이 꼭짓점을 지날때 위쪽과 아래쪽 변 중 한 개만 교차한다고 판단함 4. 반직선이 변과 평행한 경우는 고려하지 않음
- 28. 1. 반직선과 변의 교점의 개수가 짝수면 외부에 있는 점, 홀수면 내부에 있는 점 2. 변 위에 있는 점은 내부에 있는 점 3. 반직선이 꼭짓점을 지날때 위쪽과 아래쪽 변 중 한 개만 교차한다고 판단함 4. 반직선이 변과 평행한 경우는 고려하지 않음
- 29. 1. 반직선과 변의 교점의 개수가 짝수면 외부에 있는 점, 홀수면 내부에 있는 점 2. 변 위에 있는 점은 내부에 있는 점 3. 반직선이 꼭짓점을 지날때 위쪽과 아래쪽 변 중 한 개만 교차한다고 판단함 4. 반직선이 변과 평행한 경우는 고려하지 않음
- 30. 1. 반직선과 변의 교점의 개수가 짝수면 외부에 있는 점, 홀수면 내부에 있는 점 2. 변 위에 있는 점은 내부에 있는 점 3. 반직선이 꼭짓점을 지날때 위쪽과 아래쪽 변 중 한 개만 교차한다고 판단함 4. 반직선이 변과 평행한 경우는 고려하지 않음
- 31. PKStroke
- 32. PKStroke 을 점으로 표현할 수 없을까?
- 33. WWDC20: inspect, modify, and construct PencilKit drawings
- 34. UIView 는 어떻게 잡을 수 있을까?
- 36. UIImageView
- 37. 더 정밀하게 잡을 수 없을까?
- 39. UIImageView
- 40. UIImageView
- 41. 기준점을 원점으로 보냄 원점을 기준으로 Transform 원위치로 다시 이동 1 2 3
- 42. (xr, yr) (xr, yr) 1 2 3
- 43. import UIKit extension UIView { var frameBeforeTransformed: CGRect { let previousTransform = transform transform = .identity let frame = frame transform = previousTransform return frame } func transformedEdges(cases: [CGRectEdgeType] = CGRectEdgeType.allCases) -> [CGPoint] { let result = cases.map { edgeType -> CGPoint in let point = frameBeforeTransformed.point(type: edgeType) let movedPoint = pointBeforeTransformed(point) let transformedPoint = movedPoint.applying(transform) return pointAfterTransformed(transformedPoint) } return result } func pointBeforeTransformed(_ point: CGPoint) -> CGPoint { return .init(x: point.x - center.x, y: point.y - center.y); } func pointAfterTransformed(_ point: CGPoint) -> CGPoint { return .init(x: point.x + center.x, y: point.y + center.y); } } import UIKit enum CGRectEdgeType: CaseIterable { case leftTop case leftBottom case rightTop case rightBottom } extension CGRect { func point(type: CGRectEdgeType) -> CGPoint { switch type { case .leftTop: return CGPoint(x: minX, y: minY) case .leftBottom: return CGPoint(x: minX, y: maxY) case .rightTop: return CGPoint(x: maxX, y: minY) case .rightBottom: return CGPoint(x: maxX, y: maxY) } } } 1 2 3
- 44. UIImageView
- 45. Accelerate 고성능 & 낮은 에너지 소비에 최적화된 수학/이미지 계산 라이브러리
- 47. func linearInterpolation(point1: CGPoint, point2: CGPoint) -> [CGPoint] { let (start, end) = point2.x < point1.x ? (point2, point1) : (point1, point2) let (startX, endX) = (Float(start.x), Float(end.x)) let (startY, endY) = (Float(start.y), Float(end.y)) let (deltaX, deltaY) = (abs(endX - startX), abs(endY - startY)) let maxDelta = max(deltaX, deltaY) let (indices, stride, n) = ([0, maxDelta], vDSP_Stride(1), vDSP_Length(maxDelta)) var xPoints = [Float](repeating: 0, count: Int(n)) var yPoints = [Float](repeating: 0, count: Int(n)) var values = [startX, endX] vDSP_vgenp( values, stride, indices, stride, &xPoints, stride, n, vDSP_Length(values.count) ) values = [startY, endY] vDSP_vgenp( values, stride, indices, stride, &yPoints, stride, n, vDSP_Length(values.count) ) return zip(xPoints, yPoints).map { CGPoint(x: CGFloat($0), y: CGFloat($1)) } }
- 48. UIImageView
- 49. Edge case를 찾아보자
- 50. Case1
- 51. Case2
- 52. Case3
- 53. Case3
- 54. Case3
- 55. 올가미로 잡은 아이템을 어떻게 옮길 수 있을까?
- 56. UIView를 옮기는 건 쉬운데… PKStroke은 어떻게 옮길 수 있을까?
- 57. UIPanGestureRecognizer Logic Began 올가미로 잡은 PKStroke을 PKDrawing에서 분리 Changed Ended 올가미로 잡은 PKStroke에 transform 적용 transform 된 PKStroke 생성
- 58. import PencilKit extension PKStroke { func createNewStroke(with transform: CGAffineTransform) -> PKStroke { let dx = transform.tx let dy = transform.ty let resultPoint: [PKStrokePoint] = path.map { p in return PKStrokePoint( location: CGPoint(x: (p.location.x + dx), y: (p.location.y + dy)), timeOffset: p.timeOffset, size: p.size, opacity: p.opacity, force: p.force, azimuth: p.azimuth, altitude: p.altitude ) } let resultPath = PKStrokePath(controlPoints: resultPoint, creationDate: Date()) var resultStroke = PKStroke(ink: PKInk(ink.inkType, color: ink.color), path: resultPath, transform: .identity) if let mask = mask { mask.apply(transform) resultStroke.mask = mask } return resultStroke } }
- 59. 올가미로 잡은 PKStroke에 transform 적용 transform 된 PKStroke 생성 UIPanGestureRecognizer Logic Began 올가미로 잡은 PKStroke을 PKDrawing에서 분리 Changed Ended 새로운 PKStroke을 PKCanvasView의 PKDrawing에 반영
- 60. QANDA
- 61. UIPanGestureRecognizer Logic Began 올가미로 잡은 PKStroke에 transform 적용 transform 된 PKStroke 생성 올가미로 잡은 PKStroke을 PKDrawing에서 분리 ⚠ 랜더링 병목 발생! 새로운 PKStroke을 PKCanvasView의 PKDrawing에 반영 Changed Ended
- 62. UIPanGestureRecognizer Logic Began 올가미로 잡은 PKStroke을 PKDrawing에서 분리 분리한 PKStroke로 새로운 PKDrawing을 생성 새로운 PKDrawing을 이미지로 변환 / 이미지 뷰 생성 (Snapshot)
- 63. PKDrawing: image(from: CGRect, scale: CGFloat)
- 64. UIPanGestureRecognizer Logic Began 올가미로 잡은 PKStroke을 PKDrawing에서 분리 Changed 분리한 PKStroke로 새로운 PKDrawing을 생성 새로운 PKDrawing을 이미지로 변환 / 이미지 뷰 생성 (Snapshot) 이미지 뷰를 transform 시킴 transform 된 PKStroke 생성 이미지 뷰 제거 새로운 PKStroke을 PKCansvasView의 PKDrawing에 반영 Ended
- 66. dragging ? UIPanGestureRecognizer Began Changed Ended true false reset lasso points append lasso point draw bezier path append lasso point draw bezier path append lasso point draw bezier path captured? false reset lasso points detach captured strokes Ray casting algorithm move uiviews move image view (strokes) attach captured strokes detach image view Ray casting algorithm attach image view
- 67. attach image view false detach captured strokes move uiviews move image view (strokes) attach captured strokes detach image view dragging ? UIPanGestureRecognizer Began Changed Ended true reset lasso points append lasso point draw bezier path append lasso point draw bezier path captured? false reset lasso points Ray casting algorithm Ray casting algorithm append lasso point draw bezier path
- 68. append lasso point draw bezier path Ray casting algorithm true reset lasso points append lasso point draw bezier path append lasso point draw bezier path captured? false reset lasso points false detach captured strokes move uiviews move image view (strokes) attach captured strokes detach image view dragging ? UIPanGestureRecognizer Began Changed Ended Ray casting algorithm attach image view
- 69. QANDA
- 71. WWDC Introducing PencilKit https://developer.apple.com/videos/play/wwdc2019/221/ What’s new in PencilKit https://developer.apple.com/videos/play/wwdc2020/10107/ Inspect,modify,and construct PencilKit drawings https://developer.apple.com/videos/play/wwdc2020/10148
- 72. 콴다 기술 블로그 iOS PencilKit을 활용한 Drawing 노트 개발기 https://blog.mathpresso.com/ios-pencilkit을-활용한-drawing-노트-개발기- d50019d42041
- 73. 이해석 감사합니다 콴다(매스프레소) Special Thanks 신연화 님 / QANDA iOS 팀 / 이정엽, 정초이