이동 가능한 이미지 뷰를 통한 화면 표시

Question

현재 사용자가 사진을 찍거나 자신의 라이브러리에서 선택하는 응용 프로그램이 있습니다.

다음 컨트롤러에는 선택/찍은 이미지가 표시됩니다.

내가 지금하고 싶은 것은 이미지보기 상단에 어떤 종류의보기를 보여줍니다. 보기는 반투명 가장자리 모서리와 아래에 이미지를 표시하는 원을 가지고 (transulcent). 기본적으로 이미지의 일부로 선택됩니다.

그러면 사용자가 이동 가능해야하므로보기가 화면에 표시되는 방식을 저장해야합니다.

가장 좋은 방법은 무엇입니까?

이동할 수있는 오버레이보기가 필요합니다. 원은 항상 고정 된 크기가 될 것이고 내부는 아래의 이미지 뷰를 보여 주며 외부는 0.5 투명도이므로 이미지를 볼 수는 있지만 완전히 볼 수는 없습니다. 그런 다음 이동 한 원의 위치를 ​​저장 하시겠습니까?

---- ----- EDIT

I이 생성 한 화상 예이다.

UIImageView (아래쪽 레이어)로 사진이있는보기가 있습니다. 이 위에 (위의 그림과 같은)보기를 추가하려고합니다. 위 그림은 실제로 제안 된 PNG입니다. 그러나이 오버레이는 움직일 수 있습니다. 원은 투명 (0)이므로 아래의 사진을 완전히 볼 수 있습니다. 바깥 부분 (회색)은 부분적으로 투명합니다 (0.5). 그래서 완전하게는 볼 수 없습니다.

사진의 특정 지점을 표시하기 위해 평면도 (원형 부분)가 사진에서 움직입니다. 이 예제에서 원이 움직이면 측면 (회색)이 화면에서 끝납니다. 따라서보기를 움직이는 것을 고려한 거대한 이미지를 만들어야합니다. 이것이 최선의 방법은 아닙니다.

EDIT 2 ---- 이제 하나의 UIImageView가 photoView (다른 UIImageView) 위에 있습니다. 오버레이는 화면 중간에 원이있는 스크린의 4 배입니다. 항목이 내가 실행하는 제스처 인식기가 이동

:

있는 UIImageView 위의에서 현재

-(void)handlePan:(UIPanGestureRecognizer *)gesture { 
    NSLog(@"Pan Gesture"); 
    gesture.view.center = [gesture locationInView:self.view]; 
    } 

가 중간 지점에서 이동, 원 보이는 것입니다 그런 식으로 때 이동합니다 손가락 움직임.

모두 훌륭하지만 handlePan 메서드에 제안 된 답변을 구현하는 방법은 무엇입니까? 그래서 중간 지점이 너무 가깝지 않은지 확인해야합니다. 이상적으로 원이 화면에서 완전히 (또는 대부분) 벗어나는 것처럼 보이지 않도록 화면 주위에 50여 마진을 넣으시겠습니까?

Answer 1

난 당신이 운동을 수행하는 방법을 알고있는 질문에서 이해 오버레이의 의미는 내가 할 수있는 것입니다. 이미지 뷰를 사용하여 경계가 보이지 않는지 확인하십시오.

의가있는 UIImageView가

UIImageView *imageOverlayView; 

나는 그것을 볼 수있는 방법이 될 것입니다

UIImageView *photoImageView; 

그리고 투명 및 반투명 영역으로 오버레이를 호출 할 것이라고 가정 해 봅시다, 당신은 3 개 다른 이미지를 필요 imageOverlayView, 실행중인 기기에 따라 - iPad의 경우 1, iPhone 5의 경우 1, 기타 iPhone의 경우 1입니다. 해당 이미지의 폭이 같아야한다 (화면 폭 - 원의 반지름) * 2, 높이 그래서

CGFloat circleRadius; //this would be the radius of translucent circle 

가 제대로 오버레이의 프레임을 설정해야하는 경우 :

CGRect imageFrame = photoImageView.frame; 
imageOverlayView.frame = CGRectMake(circleRadius - imageFrame.size.width/2, circleRadius - imageFrame.size.height/2, (imageFrame.size.width - circleRadius)*2, (imageFrame.size.height - circleRadius)*2); //origin is set to the middle of the image. 

당신은 결코 좋겠 회색 영역의 가장자리를 참조하십시오. 움직임을 구현하기위한 MZimmerman6의 대답은 훌륭하지만, 기본 이미지의 테두리를 벗어나지 않도록 원을 차단해야합니다. 당신이 너무 멀리하지 않을 경우 확인하여 팬 제스처 인식기와

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 
    UITouch *touch = [touches anyObject]; 
    CGPoint new = [touch locationInView:imageOverlayView]; 
    delX = new.x - prevPoint.x; 
    delY = new.y - prevPoint.y; 
    CGRect overFrame = imageOverlayView.frame; 
    overFrame.origin.x += delX; 
    if (overFrame.origin.x < -imageFrame.size.width) { 
     overFrame.origin.x = -imageFrame.size.width; 
    } 
    else if (overFrame.origin.x > 0) { 
     overFrame.origin.x = 0; 
    } 
    overFrame.origin.y += delY; 
    if (overFrame.origin.y < -imageFrame.size.height) { 
     overFrame.origin.y = -imageFrame.size.height; 
    } 
    else if (overFrame.origin.y > 0) { 
     overFrame.origin.y = 0; 
    } 
    [overlayView setFrame:overFrame]; 
} 

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 
    UITouch *touch = [touches anyObject]; 
    CGPoint new = [touch locationInView:imageOverlayView]; 
    delX = new.x - prevPoint.x; 
    delY = new.y - prevPoint.y; 
    CGRect overFrame = imageOverlayView.frame; 
    overFrame.origin.x += delX; 
    if (overFrame.origin.x < -imageFrame.size.width) { 
     overFrame.origin.x = -imageFrame.size.width; 
    } 
    else if (overFrame.origin.x > 0) { 
     overFrame.origin.x = 0; 
    } 
    overFrame.origin.y += delY; 
    if (overFrame.origin.y < -imageFrame.size.height) { 
     overFrame.origin.y = -imageFrame.size.height; 
    } 
    else if (overFrame.origin.y > 0) { 
     overFrame.origin.y = 0; 
    } 
    [overlayView setFrame:overFrame]; 
} 

편집 는 handlePan에 약간의 변화가 필요 : 방법을. 그 50 점 이익률은 원 반경과 같은 경우

-(void)handlePan:(UIPanGestureRecognizer *)gesture { 
    CGPoint newCenter = [gesture locationInView:self.view]; 
    if (newCenter.x < 50) { 
     newCenter.x = 50; 
    } 
    else if (newCenter.x > self.view.frame.size.width - 50) { 
     newCenter.x = self.view.frame.size.width - 50; 
    } 
    if (newCenter.y < 50) { 
     newCenter.y = 50; 
    } 
    else if (newCenter.y > self.view.frame.size.height - 50) { 
     newCenter.y = self.view.frame.size.height - 50; 
    } 
    gesture.view.center = newCenter; 
} 

이 확실히 당신의 원 화면의 가장자리를 터치 할 수 있지만, 그 이상 갈 수없는 것.

Answer 2

먼저 UIImageView를 중심에 구멍이있는이 움직이는 프레임을 쉽게 처리 할 수있는 png 이미지로 초기화합니다. 이 내용을 화면에 추가 할 수 있습니다. 이 작업이 완료되면 touchesBegan, touchesMoved 및 기타 터치 명령을 사용하여 사용자가 해당 상자를 터치하고 있는지 여부를 확인하여 사용자가 이전 지점에서 얼마나 멀리 이동했는지 확인합니다. 이 차이를 사용하여 현재 프레임 원점 또는 중심의 이미지에 값을 더하거나 뺍니다. 움직이는 상자가 있으면 보일 수 있습니다.

편집 View.m에서 View.h

CGPoint prevPoint; 
float delX; 
float delY; 
UIView *overlayView; 

에서

-(void) viewDidLoad { 
    overlayView = [UIView alloc] initWithFrame:CGRectMake(100,100,100,100)]; 
    [overlayView setBackgroundColor:[UIColor clearColor]]; 
    [self.view addSubview:overlayView]; 
    UIImageView *circImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,overlayView.frame.width,overlayView.frame.height)]; 
    [circImage setImage:[UIImage imageNamed:@"SomeImage.png"]]; 
    [overlayView addSubview:circImage]; 
    [self.view setNeedsDisplay]; 
} 

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 
    UITouch *touch = [touches anyObject]; 
    prevPoint = [touch locationInView:overlayView]; 
} 

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 
    UITouch *touch = [touches anyObject]; 
    CGPoint new = [touch locationInView:overlayView]; 
    delX = new.x - prevPoint.x; 
    delY = new.y - prevPoint.y; 
    CGRect overFrame = overlayView.frame; 
    overFrame.x += delX; 
    overFrame.y += delY; 
    [overlayView setFrame:overFrame]; 
    [self.view setNeedsDisplay]; 
} 

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 
    UITouch *touch = [touches anyObject]; 
    CGPoint new = [touch locationInView:overlayView]; 
    delX = new.x - prevPoint.x; 
    delY = new.y - prevPoint.y; 
    CGRect overFrame = overlayView.frame; 
    overFrame.x += delX; 
    overFrame.y += delY; 
    [overlayView setFrame:overFrame]; 
    [self.view setNeedsDisplay]; 
}