How to zoom to the center with a scrollview? - ios

We had previously implemented tapping to zoom and now we've decided to use icons instead that will zoom in on the center of whats currently being displayed, and we'd like to reuse the code we had for our tap to zoom since we want the same effect, but now we don't know what to pass as the centerpoint.
We're using the
(CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
method which used to accept a center cgpoint from the gesture recognizer that we used for tap zooming; however, since we're no longer using the gesture recognizer we're going to have to figure out what cgpoint to pass it. Also, this method worked for the tap zoom so I don't think this is where we're having the problem.
We tried doing this
centerPoint = [scrollView contentOffset];
centerPoint.x += [scrollView frame].size.width / 2;
centerPoint.y += [scrollView frame].size.height / 2;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:centerPoint];
Which should calculate the current center and then pass it to zoomRectForScale, however it doesn't work (it zooms way to the right of the center).
I think that the problem probably has something to do with the fact that we're passing the center of the image before zoom is applied, and perhaps we're supposed to be passing a scaled center. Does anyone have any experience with this, or have any ideas on how we should be calculating the center?

We got it working and I thought I'd post what we ended up doing
/**
Function for the scrollview to be able to zoom out
**/
-(IBAction)zoomOut {
float newScale = [scrollView zoomScale] / ZOOM_STEP;
[self handleZoomWith:newScale andZoomType: FALSE];
}
/**
Function for the scrollview to be able to zoom in
**/
-(IBAction)zoomIn {
float newScale = [scrollView zoomScale] * ZOOM_STEP;
[self handleZoomWith:newScale andZoomType: TRUE];
}
-(void)handleZoomWith: (float) newScale andZoomType:(BOOL) isZoomIn {
CGPoint newOrigin = [zoomHandler getNewOriginFromViewLocation: [scrollView contentOffset]
viewSize: scrSize andZoomType: isZoomIn];
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:newOrigin];
[scrollView zoomToRect:zoomRect animated:YES];
}
and then in a zoomHandler class we had this
-(CGPoint) getNewOriginFromViewLocation: (CGPoint) oldOrigin
viewSize: (CGPoint) viewSize
andZoomType:(BOOL) isZoomIn {
/* calculate original center (add the half of the width/height of the screen) */
float oldCenterX = oldOrigin.x + (viewSize.x / 2);
float oldCenterY = oldOrigin.y + (viewSize.y / 2);
/* calculate the new center */
CGPoint newCenter;
if(isZoomIn) {
newCenter = CGPointMake(oldCenterX * zoomLevel, oldCenterY * zoomLevel);
} else {
newCenter = CGPointMake(oldCenterX / zoomLevel, oldCenterY / zoomLevel);
}
/* calculate the new origin (deduct the half of the width/height of the screen) */
float newOriginX = newCenter.x - (viewSize.x / 2);
float newOriginY = newCenter.y - (viewSize.y / 2);
return CGPointMake(newOriginX, newOriginY);
}

Related

How to Zoom Image on single tap in an iCarousel View?

I am trying hard to zoom image on single tap, but no success yet. I have a carousel view with 6 images which works great but i want the particular image to zoom/pop-up when tapped on the image in carousel view. Any help will be highly appreciated.
First Declare the TapGestureRegcognizer then addSubview in your UIImageView. use this code in your viewDidLoad:
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleDoubleTap:)];
[doubleTap setNumberOfTapsRequired:1];
[imageview addGestureRecognizer:doubleTap];
then if you click the UIImageView single tap, call the below methods are,
- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
// zoom in
float newScale = [myscrollview zoomScale] * 2;
if (newScale > self.myscrollview.maximumZoomScale){
newScale = self.myscrollview.minimumZoomScale;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[myscrollview zoomToRect:zoomRect animated:YES];
}
else{
newScale = self.myscrollview.maximumZoomScale;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[myscrollview zoomToRect:zoomRect animated:YES];
}
}
- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {
CGRect zoomRect;
// the zoom rect is in the content view's coordinates.
// At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.
// As the zoom scale decreases, so more content is visible, the size of the rect grows.
zoomRect.size.height = [myscrollview frame].size.height / scale;
zoomRect.size.width = [myscrollview frame].size.width / scale;
// choose an origin so as to get the right center.
zoomRect.origin.x = center.x - (zoomRect.size.width / 2.0);
zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);
return zoomRect;
}
its working for me, hope its helpful.

Zoom a specific area of a Scrollview

I'm stuck on a case where I want to zooming a part(rect) of a scrollview programatically not by touch or gestures.
CGRect cropRect = CGRectMake(xPos * [UIScreen mainScreen].nativeScale, yPos * [UIScreen mainScreen].nativeScale, width1 * [UIScreen mainScreen].nativeScale, height1 * [UIScreen mainScreen].nativeScale);
[self.scrlVPhoto zoomToRect:cropRect animated:YES];
I've set delegate and also implemented delegate method.
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)aScrollView {
return self.containerView;
}
self.containerView is a view that I want to zoom.
I've tried everything and I'm still confused how to get out of this.
Please some one can help me. Any help is appreciated.
Thanks in advance.
I am going to answer my own question.
I've searched lots of articles and hours of debugging I've found that when scrollview is zoomed then actually its contentSize is increased its zoomScale remain unchanged.
So I just used transform property of the scrollview's subview (i.e. self.containerView) and set scrollview's contentOffset I got what I was looking for.
self.containerView.transform = CGAffineTransformMakeScale(1.8, 1.8); // containerView is subview of scrollview and 1.8 is zoom scale just for eg.
[self.scrlVPhoto setContentOffset:CGPointMake(self.scrlVPhoto.contentOffset.x, (self.scrlVPhoto.contentOffset.y + cropRect.origin.y)) animated:true];
You should add the view which you want to zoom inside the scrollview. Inside the delegate method return the view which you want to zoom.
I have Create the UIImageView, set the Zoom option in imageView when double tap or single tap to UIImageView and the code is given below,
viewDidLoad Method:
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(handleDoubleTap:)];
[doubleTap setNumberOfTapsRequired:2];
DoubleTab Method:
- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
// zoom in
float newScale = [myscrollview zoomScale] * 2;
if (newScale > self.myscrollview.maximumZoomScale){
newScale = self.myscrollview.minimumZoomScale;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[myscrollview zoomToRect:zoomRect animated:YES];
}
else{
newScale = self.myscrollview.maximumZoomScale;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[myscrollview zoomToRect:zoomRect animated:YES];
}
}
- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center {
CGRect zoomRect;
// the zoom rect is in the content view's coordinates.
// At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.
// As the zoom scale decreases, so more content is visible, the size of the rect grows.
zoomRect.size.height = [myscrollview frame].size.height / scale;
zoomRect.size.width = [myscrollview frame].size.width / scale;
// choose an origin so as to get the right center.
zoomRect.origin.x = center.x - (zoomRect.size.width / 2.0);
zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);
return zoomRect;
}
And you need the delegate methods are shown below,
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
if (vmov==nil)
{
float newwidth;
float newheight;
UIImage *image=detaimageview.image;
if (image.size.height>=image.size.width){
newheight=detaimageview.frame.size.height;
newwidth=(image.size.width/image.size.height)*newheight;
if(newwidth>detaimageview.frame.size.width){
float diff=detaimageview.frame.size.width-newwidth;
newheight=newheight+diff/newheight*newheight;
newwidth=detaimageview.frame.size.width;
}
}
else{
newwidth=detaimageview.frame.size.width;
newheight=(image.size.height/image.size.width)*newwidth;
if(newheight>detaimageview.frame.size.height){
float diff=detaimageview.frame.size.height-newheight;
newwidth=newwidth+diff/newwidth*newwidth;
newheight=detaimageview.frame.size.height;
myscrollview.clipsToBounds = NO;
}
}
CGRect frame;
CGFloat screenWidth;
CGFloat screenHeight;
CGRect screenRect = [[UIScreen mainScreen] bounds];
screenWidth = screenRect.size.width;
screenHeight = screenRect.size.height-64;
frame.size.width = newwidth;
frame.size.height = newheight;
self.myscrollview.contentSize = frame.size;
float x,y;
x=0;
y=0;
if (newheight<screenHeight)
{
x =screenHeight/2-newheight/2;
}
if (newwidth<screenWidth)
{
y =screenWidth/2-newwidth/2;
}
self.detaimageview.frame = CGRectMake(y,x,newwidth,newheight);
return self.detaimageview;
}
return nil;
}
this above codes are zoom the imageView and its working for my Projects,
hope its helpful
Please check this one. Its may be helpful to you
-(void)handlePinchWithGestureRecognizer:(UIPinchGestureRecognizer *)pinchGestureRecognizer{
//[self.superImage_View setAlpha:0.5];
if([pinchGestureRecognizer state] == UIGestureRecognizerStateBegan) {
// Reset the last scale, necessary if there are multiple objects with different scales
lastScale = [pinchGestureRecognizer scale];
}
if ([pinchGestureRecognizer state] == UIGestureRecognizerStateBegan ||
[pinchGestureRecognizer state] == UIGestureRecognizerStateChanged){
CGFloat currentScale = [[[pinchGestureRecognizer view].layer valueForKeyPath:#"transform.scale"] floatValue];
// Constants to adjust the max/min values of zoom
const CGFloat kMaxScale = 2.0;
const CGFloat kMinScale = 1.0;
CGFloat newScale = 1-(lastScale-[pinchGestureRecognizer scale]) ; // new scale is in the range (0-1)
newScale = MIN(newScale, kMaxScale / currentScale);
newScale = MAX(newScale, kMinScale / currentScale);
CGAffineTransform transform = CGAffineTransformScale([[pinchGestureRecognizer view] transform], newScale, newScale);
[pinchGestureRecognizer view].transform = transform;
lastScale = [pinchGestureRecognizer scale]; // Store the previous scale factor for the next pinch gesture call
}
if ([pinchGestureRecognizer state] == UIGestureRecognizerStateEnded) {
[undoList addObject:cropImage];
}
}

How to add a Gesture Recogniser in imageview in iOS?

i add a UIPanGestureRecognizer to my imageview then Gesture Recognizer is added but my imageview image is panned in to my view i want only image is panned inside of the imageview on in the view how it is possible?
i write a code for that on viewdidload
UIPanGestureRecognizer *pangesture=[[UIPanGestureRecognizer alloc]initWithTarget:self action:#selector(panGestureDetected:)];
[pangesture setDelegate:self];
[self.zoomImage addGestureRecognizer:pangesture];
and method for that is
- (void)panGestureDetected:(UIPanGestureRecognizer *)recognizer
{
UIGestureRecognizerState state = [recognizer state];
if (state == UIGestureRecognizerStateBegan || state == UIGestureRecognizerStateChanged)
{
CGPoint translation = [recognizer translationInView:recognizer.view];
[recognizer.view setTransform:CGAffineTransformTranslate(recognizer.view.transform, translation.x, translation.y)];
[recognizer setTranslation:CGPointZero inView:recognizer.view];
}
}
then imageView image is panned in my View but i want image Panned only inside of imageview if it possible then give me solution.
here my original imageview Size is like as
and when i added UIPanGEstureRecognizer then it look like as
image are panned in View but i want to zoom it inside of imageview size please give me solution for that.
take UIScrollView and add UIImageView inside the scrollview and pangesture on scrollview ..
set delegate for scrollview and do the code
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
// Return the view that we want to zoom
return self.zoomImage;
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
// The scroll view has zoomed, so we need to re-center the contents
[self centerScrollViewContents];
}
- (void)centerScrollViewContents {
CGSize boundsSize = scrollView.bounds.size;
CGRect contentsFrame = self.zoomImage.frame;
if (contentsFrame.size.width < boundsSize.width) {
contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
} else {
contentsFrame.origin.x = 0.0f;
}
if (contentsFrame.size.height < boundsSize.height) {
contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
} else {
contentsFrame.origin.y = 0.0f;
}
self.zoomImage.frame = contentsFrame;
}
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
// Get the location within the image view where we tapped
CGPoint pointInView = [recognizer locationInView:imageView];
// Get a zoom scale that's zoomed in slightly, capped at the maximum zoom scale specified by the scroll view
CGFloat newZoomScale = scrollView.zoomScale * 1.5f;
newZoomScale = MIN(newZoomScale, scrollView.maximumZoomScale);
// Figure out the rect we want to zoom to, then zoom to it
CGSize scrollViewSize = scrollView.bounds.size;
CGFloat w = scrollViewSize.width / newZoomScale;
CGFloat h = scrollViewSize.height / newZoomScale;
CGFloat x = pointInView.x - (w / 2.0f);
CGFloat y = pointInView.y - (h / 2.0f);
CGRect rectToZoomTo = CGRectMake(x, y, w, h);
[scrollView zoomToRect:rectToZoomTo animated:YES];
}
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
// Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
CGFloat newZoomScale = scrollView.zoomScale / 1.5f;
newZoomScale = MAX(newZoomScale, scrollView.minimumZoomScale);
[scrollView setZoomScale:newZoomScale animated:YES];
}
UIImage object's userInteractEnable is NO by default, so you can't interact with it. Try self.zoomImage.userInteractEnable = YES
Try this:
Add another UIView under the imageView, make its size exactly the same as your imageView. Then set your imageView as this UIView's subview by drag and drop the imageView on top of this UIView (Assuming you are using StoryBoard or xib).
After that, if you are using StoryBoard or xib, then go to Attributes Inspector, select this UIView, tick Click Subviews. If not, just set view.clipsToBounds = YES;

How do I accurately zoom in on a specific point on pinch gesture (with multiple pinches)?

I am trying to zoom a quad in my iOS application. It needs to zoom not based on the center of the quad, but based on the centroid of the pinch.
I am able to do this correctly - however only for the first pinch gesture. On subsequent pinch gestures, it works, but it drifts a little bit and doesn't quite seem accurate. I am unable to figure out what to do.
There are a few SO questions around this, and I've been through most, if not all of them. None of them accurately address my problem.
Also note that I'm scaling and translating a quad (which is rendered into a GLKView), and not the view itself. Most solutions I've seen deal with transforming the views directly.
Here's the code for the pinch gesture and handling:
First in viewDidLoad:
UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc]
initWithTarget:self action:#selector(respondToPinchGesture:)];
pinchRecognizer.cancelsTouchesInView = YES;
pinchRecognizer.delaysTouchesEnded = NO;
[glView addGestureRecognizer:pinchRecognizer];
Where glView is a GLKView object.
And the handler:
- (IBAction)respondToPinchGesture:(UIPinchGestureRecognizer *)recognizer{
if (recognizer.state == UIGestureRecognizerStateEnded || [recognizer numberOfTouches] < 2) return;
if (recognizer.state == UIGestureRecognizerStateBegan) {
point = [recognizer locationInView:glView];
point.x *= glView.contentScaleFactor;
point.y *= glView.contentScaleFactor;
point.y = height - point.y;
anchor = GLKVector3Make(point.x, point.y, 0);
lastScale = 1.0;
}
if (fabs(recognizer.scale - lastScale) > 0.01){
GLfloat scale = 1.0 - (lastScale - recognizer.scale);
lastScale = recognizer.scale;
new_anchor_point = anchor;
new_anchor_point = GLKVector3MultiplyScalar(new_anchor_point, scale);
GLKVector3 translate = GLKVector3Subtract(anchor, new_anchor_point);
path.transform = GLKMatrix4TranslateWithVector3(path.transform, translate);
path.transform = GLKMatrix4Scale(path.transform, scale, scale, 0);
cumulative_translate = GLKVector3Add(cumulative_translate, translate);
}
}
Any pointers appreciated. I am 2 days into this and even a vague suggestion might be helpful.
You have to
remember the previous transformation matrix upon RecognizerStateBegan,
construct your new transformation matrix for pinch zoom assuming the view or object have not been transformed before.
Then, concatenate two matrices together. This will be your final matrix for transforming your object or view.
I managed to solve this using:
-(GLKVector3)get_touch_point_on_view:(UIGestureRecognizer *)recognizer{
CGRect bounds = [glView bounds];
CGPoint point = [recognizer locationInView:glView];
point.y = bounds.size.height - point.y;
return GLKVector3Make((point.x * glView.contentScaleFactor - total_translation.x)/total_scale,
(point.y * glView.contentScaleFactor - total_translation.y)/total_scale, 0);
}
- (void)respondToPinchGesture:(UIPinchGestureRecognizer *)recognizer{
if (recognizer.state == UIGestureRecognizerStateBegan) {
lastScale = 1.0;
}
[self get_touch_point_on_view:recognizer];
if (fabs(recognizer.scale - lastScale) > 0.01){
GLfloat scale = 1.0 - (lastScale - recognizer.scale);
lastScale = recognizer.scale;
total_scale *= scale;
path.transform = GLKMatrix4TranslateWithVector3(path.transform, centroid);
path.transform = GLKMatrix4Scale(path.transform, scale, scale, 0);
path.transform = GLKMatrix4TranslateWithVector3(path.transform, GLKVector3Negate(centroid));
total_translation = [self get_total_translation];
}
}

Calculate rotation angle for anchor point

I got stuck with a problem where I need to reposition views to predefined locations.
All views have a UIPanGestureRecognizer and a UIRotationGestureRecognizer and are positioned/rotated inside the controllers view. Upon a certain event the views should move to a new position with a new rotation angle.
Everything works fine but a soon as one of the gesture recognizer was active and thus the anchorPoint has changed repositioning/rotation fails.
Here is my method I try to use to take the shift in the anchorPoint into account.
- (CGPoint)centerPointWithInVisibleAreaForPoint:(CGPoint)point
{
CGPoint anchorP = self.layer.anchorPoint;
anchorP.x -= 0.5;
anchorP.y -= 0.5;
CGRect rect = self.bounds;
CGFloat widthDelta = CGRectGetWidth(self.bounds) * anchorP.x;
CGFloat heightDelta = CGRectGetHeight(self.bounds) * anchorP.y;
CGPoint newCenter = CGPointMake(point.x + widthDelta, point.y + heightDelta);
return newCenter;
}
The controller asks for the corrected center point and sets the center value of the view. Afterwards the rotation transform is set using CGAffineTransformConcat(view.transform, CGAffineTransformMakeRotation(differenceAngle)).
I think the problem is caused by the fact that the predefined target angle is based on a rotation around the center which is obviously different when rotated around a different anchorPoint, but I don't know how to compensate for that.
The only solution I found (and it is after all the most easiest one) is to reset the anchorPoint to 0.5/0.5 and correct the position accordingly.
- (void)resetAnchorPoint
{
if (!CGPointEqualToPoint(self.layer.anchorPoint, CGPointMake(0.5, 0.5))) {
CGFloat width = CGRectGetWidth(self.bounds);
CGFloat height = CGRectGetHeight(self.bounds);
CGPoint newPoint = CGPointMake(width * 0.5, height * 0.5);
CGPoint oldPoint = CGPointMake(width * self.layer.anchorPoint.x, height * self.layer.anchorPoint.y);
newPoint = CGPointApplyAffineTransform(newPoint, self.transform);
oldPoint = CGPointApplyAffineTransform(oldPoint, self.transform);
CGPoint position = self.layer.position;
position.x += (newPoint.x - oldPoint.x);
position.y += (newPoint.y - oldPoint.y);
[CATransaction setDisableActions:YES];
self.layer.position = position;
self.layer.anchorPoint = CGPointMake(0.5, 0.5);
[CATransaction setDisableActions:NO];
}
}

Resources