iOS 개발 : 대화 형 그래프

Question

위의 이미지를 참조하십시오. 빨간색 원은 사용자의 감동 동작을 나타냅니다. 따라서 사용자가 첫 번째 원이 (왼쪽으로) 만진 경우 왼쪽으로 비뚤어진 그래프가 있어야합니다. 사용자가 가운데에서 터치 한 경우, 정규 분포 그래프입니다. 사용자가 올바른 부분을 터치하면 그래프가 오른쪽으로 기울어 져야합니다.

저는 iOS 개발에 익숙하지 않으며 이러한 기능을 어떻게 달성 할 수 있는지 궁금합니다. 적합한 라이브러리, 프레임 워크, 문서에 대한 권장 사항은 크게 감사하겠습니다.

Answer 1

이제 알맞은 구성 요소를 살펴 보겠습니다. 사용자의 터치, 당신은 UIPanGestureRecognizer 또는 UITapGestureRecognizer 유사한 것을 사용 수있는 곳

1. 알고.

이 곡선을 그리려면, 일반적인 기술을 추가하는 것입니다 CAShapeLayer :

CAShapeLayer *shapeLayer = [CAShapeLayer layer]; 
shapeLayer.strokeColor = [UIColor blueColor].CGColor; 
shapeLayer.fillColor = [UIColor clearColor].CGColor; 
shapeLayer.lineWidth = 4.0; 
[self.view.layer addSublayer:shapeLayer]; 

당신은 그 CAShapeLayer의 path을 설정할 수 있고, 때마다 당신이 path에게, 뷰에 곡선이 변경됩니다 변화. 해당 경로를 자주 변경하면 (예 : 사용자의 손가락이 움직일 때마다 호출되는 UIPanGestureRecognizer을 사용하는 경우) 효과적으로 곡선 변경에 애니메이션 효과를 적용 할 수 있습니다.

3. 따라서 path은 어떻게 만듭니 까? 글쎄, 당신은 단지 UIBezierPath

   UIBezierPath *path = [UIBezierPath bezierPath]; 
   [path moveToPoint:...]; 
   
   // build the path as a series of curves 
   // 
   // [path addCurveToPoint:... 
   //   controlPoint1:... 
   //   controlPoint2:...]; 
   
   // or a series of lines that are so numerous that it looks like a nice curve 
   // 
   // for (NSInteger x = 0; x <= view.bounds.size.width; x++) { 
   //  [path addLineToPoint:...]; 
   // } 
   
   shapeLayer.path = path.CGPath; 
   

   그래서, 유일한 문제는 곡선이 정규 분포 될 필요가 있는지, 또는 당신은 단지 사용자가 터치 로컬 최대 부드러운 곡선을 그립니다 뭔가를할지 여부를 만들 수 있습니다.

   특정 곡선을 수학적으로 정확하게 표현하려면 (예 : 중심에있는 경우 정규 분포입니다.) 곡선을 표현하는 방정식을 제시해야합니다. 사용자 탭). 그런 다음 addLineToPoint을 사용하여 UIBezierPath을 사용하여 전체 점을 플롯하여 곡선을 그립니다.

   가까운 곳에 보이는 것이 필요한 경우, 두 개의 베 지어 경로 (addCurveToPoint:controlPoint1:controlPoint2:으로 생성)로 근사 할 수 있습니다.

우리는 이것을 쓰지 않을 것이지만 이는 솔루션의 기본 구성 요소입니다. 나는 이것을 한 번에 하나씩 취해 각각에 대해 조금씩 연구하고 시도한 다음 수정하는 것이 좋습니다. 작게 시작해서 거기에서 지어 라.