Mastering the Matrix

앱이 정말 선명하게 보입니다. 첫번째 튜토리얼에서 생성한 counter view는 마신 잔수를 가리키는 표시를 추가하여, 개선시킬수 있습니다.

이제 CG 함수에 대한 연습을 조금 했으므로, 회전시키고, 변형 시켜 drawing context에 사용합니다.

이 마커는 가운데에서부터 방사됩니다.

컨텍스트로 그리는것 뿐만아니라, 회전, 크기 조정(scaling), 컨텍스트의 변환 행렬 해석 등을 다룰수 있습니다.

먼저, 이것은 혼란스러울수 있지만, 연습후에 이해할수 있습니다. 변환 순서가 중요하므로 먼저 수행할 작업에 대해 다이어 그램으로 간략하게 설명합니다.

다음 다이어 그램은 컨텍스트를 회전하고 그후 컨텍스트의 중앙에서 사각형을 그리는 결과입니다.

검은 사각형은 회전 컨텍스트 이전에 그려졌고, 그후 녹색, 그후 빨강색을 그립니다. 두가지 주의 사항으로:

• 컨텍스트는 왼쪽상단(0.0)에서 회전 됩니다.
• 사각형은 여전히 컨텍스트의 중심에 그려지지만, 컨텍스트는 회전된 후 입니다.

Counter view의 마커를 그럴때, 컨텍스트를 먼저 바꾸고(translate) 그후 회전 합니다.

이 다이어그램에서 사각형 마커는 컨텍스트의 왼쪽 상단에 있습니다. 파란색 선은 변환된 컨텍스트(translated context)의 윤곽을 보여주고 그후 컨텍스트는 회전하고(빨간 대쉬선) 그리고 다시 변환(translated)됩니다.

빨간 사각형 마커가 컨텍스트에 마지막으로 그려졌을때, 뷰에 다른 각도에서 나타납니다.(it’ll appear in the view at an angle)

컨텍스트가 빨간색 마커를 그리기 위해 컨텍스트가 회전하고 변환된 후에, 녹색 마커를 그리기 위해 컨텍스트가 변환되고 회전 될수 있기 때문에 중앙으로 재 조정(reset) 되는게 필요합니다.

그래프 뷰에서 잘린 경로와 함께 저장했었던 컨텍스트 상태 처럼 마커를 그리는 각 시간 마다 변형 행렬을 사용하여 상태를 저장하고 복원합니다.

CounterView.swift로 이동하여 draw(_:)의 끝에 다음 코드를 추가하여 카운터에 마커를 추가합니다.

//Counter View markers
let context = UIGraphicsGetCurrentContext()!
  
//1 - save original state
context.saveGState()
outlineColor.setFill()
    
let markerWidth: CGFloat = 5.0
let markerSize: CGFloat = 10.0

//2 - the marker rectangle positioned at the top left
let markerPath = UIBezierPath(rect: CGRect(x: -markerWidth / 2, y: 0, width: markerWidth, height: markerSize))

//3 - move top left of context to the previous center position  
context.translateBy(x: rect.width / 2, y: rect.height / 2)
    
for i in 1...Constants.numberOfGlasses {
  //4 - save the centred context
  context.saveGState()
  //5 - calculate the rotation angle
  let angle = arcLengthPerGlass * CGFloat(i) + startAngle - .pi / 2
  //rotate and translate
  context.rotate(by: angle)
  context.translateBy(x: 0, y: rect.height / 2 - markerSize)
   
  //6 - fill the marker rectangle
  markerPath.fill()
  //7 - restore the centred context for the next rotate
  context.restoreGState()
}

//8 - restore the original state in case of more painting
context.restoreGState()

여기 무엇을 했는지에 대한 내용입니다.

1. 컨텍스트의 행렬을 다루기 이전에, 행렬의 원래 상태를 저장합니다.
2. 경로의 위치와 모양을 정의 합니다 – 하지만 아직 그리지 않습니다.
3. 컨텍스트의 원래 중심에서 회전이 발생하도록 컨텍스트를 이동합니다.(이전 다이어그램의 파란색 선)
4. 각 마커를 위해 중심이 있는 컨텍스트의 상태를 저장합니다.
5. 이전에 계산된 각각의 각도를 사용하여, 각 마커의 각도를 결정하고, 컨텍스를 회전및 변환 합니다.
6. 회전, 변환된 컨텍스트의 왼쪽 상단에 사각형 마커를 그립니다.
7. 중앙이 있는 컨텍스트의 상태로 복원합니다.
8. 회전하거나 변환되지 않은 컨텍스트의 원래 상태를 복원합니다.

이제 애플리케이션을 빌드하고 실행합니다.