How to calculate crop area within transformable imageview - ios

I am getting some problem finding crop area for rectangle added as subview on imageview.
Why to add a rectangle over imageview, because I have a requirement that the cropping rectangle should be zoomed with the image. So I did the following..
UIView *rectangle;
[self.imageView addSubview:rectangle];
Then adding
UIPinchGestureRecognizer *pinchGesture=[[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(pinchGesture:)];
[self.imageView addGestureRecognizer:pinchGesture];
On gesture selector for zoom I have added.
-(IBAction)pinchGesture:(UIPinchGestureRecognizer *)recognizer{
recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
recognizer.scale = 1;
}
Since the rectangle is on the imageview, it gets zoomed with the imageview.
My problem is how to get the rectangle frame used for cropping, as when I zoom imageview, it changes its frame.
Any help, or hint will be appreciated.
Thanks.

Firstly i guess you should not use rectangle as a subview to the image view, although you know the rect area that need to be cropped Rectangle image is just for the reference for the user of the application.. right ?
Refer this link
It Might help you.
Thanks

Related

Preserve CAShapeLayer's lineWidth in a zoomable UIView

I have a custom UIView, which has a UIImageView as its' subview to display an image and a CAShapeLayer as a sublayer to draw on it. The UIView is zoomable, I use a UIPinchGestureRecognizer to zoom in and out of the view. I can draw straight lines on the view using a CGPathRef. The problem is, when I pinch to zoom the view, the lines I draw also zoom and become thick. How to zoom in the view, keeping the lines thin?
Before zooming (green lines are the ones I draw):
And when I zoom:
What I want is, the lines to be as thin as they were before I zoomed in.
I tried to:
CGMutablePath path = CGPathCreateMutable();
//line drawing code here
//scale path to 1.0?
CGAffineTransform transform = CGAffineTransformMakeScale(1.0, 1.0);
CGPathRef transformedPath = CGPathCreateCopyByTransformingPath(path, &transform);
self.drawingLayer.path = transformedPath;
CGPathRelease(path);
CGPathRelease(transformedPath);
How do I prevent path width from enlarging when zooming?
You need to divide the line width with the zoom factor.By default line width is 1.
So create property for the same and when you apply zoom with gesture divide it.
i.e zoom = 4.0 then line width = 1.0/4.0
and same as if zoom is 2 then 1.0/2.0
Hope it is helpful

How do I aspect fit the zoomed part of an Image using UIScrollView?

I'm using self.myImageView.contentMode = UIViewContentModeScaleAspectFit; to aspect fit my image inside UIScrollView and inside gesture handling function I have this,
[self.myScrollView zoomToRect:CGRectMake(xZoomRect, yZoomRect, widthZoomRect, heightZoomRect) animated:YES];
but when I zoom into a part with zoomToRect method it doesn't move beyond the bounds of the contentSize.
For example, in the following image, orange rectangle is my image and I want to zoom into the blue part of the image. So I passed it's origin and size values to zoomToRect
but when I zoom in using zoomToRect it gets zoomed in in the following manner,
What I actually want is this,
How do I aspect fit the zoomed part of the image even when the part of the image to zoom is on the edge of the image, like I have described in the above images?
Instead of
self.myImageView.contentMode = UIViewContentModeScaleAspectFit;
use
self.myImageView.contentMode = UIViewContentModeScaleAspectFill;

iOS: draw a UIImage of circle at a UIView's center

I have a circle image with radius 50, and now I want to put the circyle's center the same as my View's center like this:
- (void)drawRect:(CGRect)rect {
UIImage *arrow = [UIImage imageWithPDFNamed:#"circle" atSize:CGSizeMake(50, 50)];
[arrow drawAtPoint:self.center];
}
But drawAtPoint is not drawing at the center.
I want to know how to locate the center of the image? so I can draw it?
From Apple's documentation for UIImage
This method draws the entire image in the current graphics context,
respecting the image’s orientation setting. In the default coordinate
system, images are situated down and to the right of the specified
point. This method respects any transforms applied to the current
graphics context, however.
So offset the center with half the image width and height to draw the center of the image on the center of your view.
- (void)drawRect:(CGRect)rect {
CGSize imageSize = CGSizeMake(50,50);
UIImage *arrow = [UIImage imageWithPDFNamed:#"circle" atSize:imageSize];
[arrow drawAtPoint:CGPointMake(self.center.x-imageSize.width/2., self.center.y-imageSize.height/2.)];
}
You don't need to draw it, just assign it's center to your view's center
arrowsuperview.center = self.center
Try this. This is how you find the center of a subview inside a view
childView.center = CGPointMake(parentView.bounds.size.width / 2, parentView.bounds.size.height / 2);
try this..
UIImageView *circleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 50, 50)];
circleImageView.image = yourCircleImage;
circleImageView.center = self.view.center;
[circleImageView setContentMode:UIViewContentModeCenter];
[self.view addSubview:circleImageView];
Calculate the center of the UIView using following code and draw the image using the drawAtPoint function.
- (void)drawRect:(CGRect)rect
{
CGPoint ptCenter = {rect.size.width / 2.0f, rect.size.height / 2.0f};
[arrow drawAtPoint:ptCenter];
}
Another simple approach:
You can also achieve the result using storyboard/xib and Auto Layout. Instead of drawing the image in drawRect use an UIImageView to hold your image and position the imageview using Autolayout constraints.

UIImageView cornerradius and CGrect

I am making a game where you touch a ball and have to pass some bars. However the ball must not touch those bars. The ball is a gif-image. My problem is: The ball is a circle but the uiimageview is a square. If the corners of the uiimageview (which is not the ball image) touch the bars it says that the ball touches the bar. even if I do that
// imageMover is the UIImageView
// the radius of the ball is 30.0
[[imageMover layer] setMasksToBounds:YES];
[[imageMover layer] setCornerRadius:30.0f];
there is no change. I think i need a rounded frame (CGRect) but how do you "create" a rounded frame?
try this
imageMover.layer.shouldRasterize = YES;
imageMover.clipsToBounds = YES;
imageMover.layer.cornerRadius = 10.0f; // what number you want
you cannot creat a rounded frame.
but you can create an UIImageView with rounded corners.
Import the QuartzCore (#import ) header and play with the layer property of the UIImageView.
imageMover.layer.cornerRadius = yourRadius;
imageMover.clipsToBounds = YES;
see the CALayer class reference for detail:
https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html
thanks!

Corner radius issue with UIButton

I want to add a corner radius to a UIButton. It is working fine but a problem occurs when I add image to it.
It does not round its corners with images, the image is shown in full rectangle form.
Please see the image, I have used the corner radius with red color and the output is as follow:
Please help.
Did you try to use set the masksToBounds: property? Fore example:
CALayer *layer = [myView layer];
[layer setMasksToBounds:YES];
[layer setCornerRadius:8.0];
That should do the trick.
you use -
myButton.imageView.layer.cornerRadius = 5;
but make sure that your image size is exact same as button size. its working for me.
yourButton.layer.cornerRadius = 10 //this value should be half of your button's height to make a circle
yourButton.clipsToBounds = true //this clips everything outside of bounds

Resources