iOS 손가락 슬라이드로 갈매기 모양을 그리십시오.

Question

그리기 캔버스에서 손가락을 드래그하여 쉐브론 패턴 (기본적으로 지그재그 라인)을 그리려합니다. 그래서 라인은 Y 금액을 올린 다음 Y 금액을 반복합니다. 나는이 일을하는 가장 좋은 방법이 궁금합니다. 지금까지 웨이브에서 1 섹션을 생성 한 다음 변경 가능한 경로에 추가 한 다음 새 경로를 표시합니다. 지그재그 방식이 여기에 그려지는 방식으로 작동하는 것이 좋습니다. seamless lite 여기에 제 코드가 있습니다. 분명히 부품이 누락 될 수 있지만 그림이 표시 될 수 있도록 다른 곳에 있습니다.

왼쪽에서 오른쪽으로 손가락을 밀면 특정 거리 값에 도달하면 지그재그 부분이 그려지는 현상이 일어나고 있습니다. 그것은 그림을 깜박이고 사라질 것입니다. 이 시점에서 나는 선들이 그곳에 머물러 있기를 원하기 때문에 내가 선택한 거리에 따라 지그재그 패턴을 계속 추가 할 수 있습니다. 손가락을 계속 움직이면 같은 거리에 도달 한 후 다시 나타나고 그 값을 남긴 직후 사라집니다.

홈페이지 무승부 :

이

- (void)draw 
{ 
CGContextRef context = UIGraphicsGetCurrentContext(); 

// set the line properties 
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor); 
CGContextSetLineWidth(context, self.lineWidth); 
CGContextSetAlpha(context, self.lineAlpha); 

CGContextAddPath(context, [self drawChevronFromOrigin:CGPointMake(self.firstPoint.x, self.firstPoint.y)]); 
CGContextStrokePath(context); 

} 

그리기 지그재그 새로운 경로 반환 :

- (CGMutablePathRef)drawChevronFromOrigin:(CGPoint)origin 
{ 
CGMutablePathRef path = CGPathCreateMutable(); 

CGPathMoveToPoint(path, nil, origin.x, origin.y); 

if (fmodf(self.lastPoint.x - origin.x, 50) == 0) 
{ 
    // Add new chevron wave to specific point 
    CGPathAddPath(path, nil, [self drawChevronWaveToPoint:CGPointMake(self.lastPoint.x, self.lastPoint.y)]); 
} 


return path; 
} 

각 지그재그 그리는 방법을 :

- (CGMutablePathRef)drawChevronWaveToPoint:(CGPoint)point 
{ 
// Creates one wave in the chevron pattern 
CGMutablePathRef chevronWave = CGPathCreateMutable(); 
CGPathMoveToPoint(chevronWave, nil, point.x, point.y); 
CGPathAddLineToPoint(chevronWave, nil, point.x + 25, point.y+25); 
CGPathAddLineToPoint(chevronWave, nil, point.x + 50, point.y-25); 
CGPathAddLineToPoint(chevronWave, nil, point.x + 75, point.y+25); 

return chevronWave; 
} 

Answer 1

내가 것이라고 생각 Core Graphics를 사용하는 것과는 다른 방식으로 접근합니다. 지그재그가 직선으로 뻗어 있다고 가정하면 반복 패턴 이미지가있는보기를 배경으로 만든 다음 손가락이 왼쪽이나 오른쪽으로 움직일 때 그 너비를 변경할 수 있습니다. 각도로도이를 수행 할 수 있습니다.이 경우 변환을 사용하여 뷰를 회전합니다 (여기에 표시되지 않음). 이미지 편집기에서

, 하나의 지그재그를 작성 (또는 내 경우 SQUIGGLE에)

, 그것은 수있는 일을 찾습니다 (I가-저쪽으로 네요을 지그재그로하는 것보다 더 구불 거리는 곡선 좋아하기 때문에 나는 squiggled 선을 그리는됩니다) 이렇게. 왼쪽 가장자리와 오른쪽 가장자리가 똑같아서 반복 될 때 멋진 가장자리가되도록하십시오.

을 다음 코드에서, 당신은 색상 눌러 다음 SQUIGGLE을 그리는 드래그 실제 상호 작용 (은이

UIColor *pattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"squiggle.png"]]; 

같은, 내가 사용을 패턴을 만들 수 있습니다 이런 식으로 만든 팬 제스처 인식기 :

UIPanGestureRecognizer *pan = 
    [[UIPanGestureRecognizer alloc] initWithTarget:self 
              action:@selector(userDidPan:)]; 
[self.view addGestureRecognizer:pan]; 

는 팬 코드를 쉽게하기 위해 나는 팬

@property (nonatomic, weak) UIView *currentSquiggleView; 
@property (nonatomic, assign) CGPoint startLocation; 

팬 제스처 코드는 3 개 부분이 시작된 현재 SQUIGGLE과 포인트에 대한 속성 생성 : 변경과 끝을 시작합니다. 팬이 시작되면, 이미지와 높이가 같지만 너비가없는 새로운 구겨짐보기를 만들고 손가락 위치에 놓습니다. 손가락이 움직이면서 냄비가 바뀌면 현재의 물결 모양의 너비를 업데이트하여 자랍니다. 왼쪽으로 패닝하면 음의 너비가 생길 수 있으며,이 경우 뷰가 움직여야합니다. 마지막으로 냄비가 끝나면, 나는 더 이상 수정할 수 없도록 현재의 삐걱 소리를 0으로 설정합니다.

- (void)userDidPan:(UIPanGestureRecognizer *)pan 
{ 
    switch (pan.state) { 
     case UIGestureRecognizerStateBegan: { 
      // Create a new squiggle 
      UIColor *pattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"squiggle.png"]]; 

      CGPoint panLocation = [pan locationInView:self.view]; 

      CGRect startRect = CGRectMake(panLocation.x, 
              panLocation.y, 
              0, // no width to begin with 
              24); // my squiggle image is 24px high 
      UIView *squiggle = [[UIView alloc] initWithFrame:startRect]; 
      squiggle.backgroundColor = pattern; 
      [self.view addSubview:squiggle]; 

      self.startLocation = panLocation; 
      self.currentSquiggleView = squiggle; 

     } break; 

     case UIGestureRecognizerStateChanged: { 
      // Change the width of the squiggle 
      CGRect previousFrame = self.currentSquiggleView.frame; 

      CGPoint panMovement = [pan translationInView:self.view]; 

      // when panning to the right, increase the width. 
      // when panning to the left, increase the width and move the view to the left 
      CGRect newFrame = previousFrame; 
      newFrame.size.width = fabs(panMovement.x); 
      if (panMovement.x < 0) { 
       newFrame.origin.x = self.startLocation.x + panMovement.x; 
      } 

      // standardize the rect before assigning since a left pan could give a negative width 
      self.currentSquiggleView.frame = CGRectStandardize(newFrame); 

     } break; 

     case UIGestureRecognizerStateEnded: { 
      // Stop referencing this squiggle so that we don't modify it anymore 
      self.currentSquiggleView = nil; 
     } break; 

     default: 
      break; 
    } 
} 

을 그리고 구불 구불 한 결과는 다음과 같습니다 : 전체 팬 코드는 다음과 같습니다