How to animate from UiImageView to a UIView - iphone

I use Path2.0. I have found that when I click the small picture in a message,there would be an animation to show the whole picture. How does it do that?
I would really appreciate help here. Thanks!

UiImageView is bascially a UIView, which you can apply animation on.
The use case you want to achieve combines:
a. a response to touch event, which you can use UITapGestureRecoginizer to attache a block of code
b. zoom the UIImageView into a proper size and position, you can use UIView's class method AnimiationWithDuration....
c. Ultimately, you want to change your UIImageView's frame property to a larger one. use CGRectMake to generate a new one. If you need to take the whole screen estate (like Path 2.0 does), you may need [UIApplication sharedApplication].window for this

I doubt they modify the original UIImageView; but a solution might be:
Copy the UIImageView (or UIImage)
Add it as a subview with the same exact frame as the original image
Apply a scale transform on the UIImageView (by using the CGAffineTransformMakeScale() function on a UIView's transform property (inside a UIView animation block)
Then instantiate the root window with a scaled version of the full image
Alternatively, you could instantiate the new subview with the full image, set it with the original UIImageView's frame, and then (using a UIView animation block), set it to the newer frame. To match their implementation exactly, I suggest a black subview (of the full UIImageView) with an alpha of 0.0 that you then animate at the same duration to an alpha of 1.0.

Related

Pinch and Pan to Crop UIImage

I want to add a Pinch and Pan gesture that will crop the UIImage views on my ViewController. To crop the images, just pinch/pan the appropriate image and it will resize.
I currently have the Take Pic and Choose Image buttons grab the appropriate images into the UIImageView boxes accordingly, but I want to be able to pinch and pan to size and crop the image in the view.
I want the box to stay fixed at its current size, and the image within will be the one resizing and cropping.
PS. I am using storyboard
Here is a screenshot of what I have.
http://i.stack.imgur.com/chkk5.png
I was thinking that the right direction would be to add a swipe and pan gesture to each uiimageviews in storyboard, but not sure what to do after.
My general strategy for this in the past has to been place the UIImageView inside another UIView (in order to clip it) and add a UIPinchGestureRecognizer and a UIPanGestureRecognizer to the parent UIView. When you receive events for either of these you apply the appropriate transformation to the transform property of the UIImageView.
When scaling, for example, you would do the following:
-(void)scale:(UIPinchGestureRecognizer*)pinch
{
float scale = pinch.scale;
imageView.transform = CGAffineTransformScale(imageView.transform, scale, scale);
pinch.scale = 1;
}
The final step of reseting the scale is important because you are simply scaling the existing transform each time rather than a base identity transform. You should find that you will be able to handle translating the transform by using a UIPanGestureRecognizer and its translationInView: method (remember you will also have to reset this with setTranslationInView:CGPointZero.
Finally, in order to get a cropped/clipped UIImage out you can either capture the view's contents (I believe the transform property is only respected on iOS 7+) or alternatively render the UIImage into a CGContextRef, and using the same transform to transform the CGContextRef.
You can use below link...
Crop image

How to get the correct frame of a rotated UIView (including correct position)

I have an app where I have a rectangle that the user can rotate and pan using their fingers. I'd simply like to know what the frame is of this rotated view so I can find out if it intersects another rectangular UIView (can't use the frame property because it gets invalidated when the UIView gets transformed). What's the easiest way to accomplish this?
Every UIView has a property frame which is of type CGRect.
You can access it using view.frame.
After the transform is applied you can use the bounds and center property on the view to get the orientation. It may take a little bit of calculation but i hope you can get to it easily.
Refer to this image from an answer to this question.

How do I replace an image in a rotated and scaled UIImageView?

I have a UIView with a UIImageView as a subview. I modify the UIView with CGAffineTransformRotate and CGAffineTransformScale. The UIImageView subview also transforms with it automatically.
I want to replace the UIImage in the UIImageView subview with a new UIImage. When I do this, the image is the wrong size and rotation, because the original been scaled and rotated.
How do I replace the image subview and have it appear as the previous image did (same size/rotation/location)?
Take another UIImageView2 and put your previous image in it first. Then after you scale and modify the original image to a new one and want to see your original one, you can show the UIImageView2 image.
I found the bug, I was removing the original image and didn't know it.
imageView.image = nextImage;
Changing the image as above keeps the scale and rotation from the parent. No trickery involved.

Stretchable UIImage and CGAffineTransform

I've got a UIScrollView whose zoom behavior I want to confine to the horizontal axis. I've accomplished that through using a custom UIView as the viewForZoomingInScrollView: and overriding setTransform:. So far so good – the view only zooms horizontally.
One catch: The container view includes some stretchable UIImage instances in UIImageViews. Obviously, with the transform in effect, the images distort.
What's the best bet for either redrawing the view so that the images aren't distorted, or, zooming the view in such a way as to not require transforms in the first place?
Thanks for any help you can offer.
You sure way of achieving this is to make your UIImageView into a custom UIView, and have its drawRect: code do the right thing: draw both stretched and unstretched elements.

Can I use DrawRect on a UIImageView loaded from a NIB?

I've created a NIB file with some button controls on it, and as a background it has an ImageView which contains a PNG file loaded from my project.
What I want to do is to draw on top of the ImageView - imagine that my UI is a clockface and I want to draw the hands of the clock on top of the background image.
Is it the correct approach to try to subclass the UIImageView and use its DrawRect as when I use the DrawRect of the default view I don't see anything on the screen?
I'm a little lost as I'm finding this particular bit of the documentation hard to follow.
Thanks.
Create a new custom UIView (e.g. named HandsView) that sits on top of your background view (by adding it as a subview of the UIImageView). In the custom view, you can use the drawRect method. Make sure, you clear the context to transparent, so that the background image can be seen below the HandsView.
If you just want to draw turning hands, you can also try to use two fixed UIImageViews with the images of the hands and use the transform property to apply a rotation.