iOS:How to crop default camera image to circle - ios8

I am using the ios default camera in my application. I would like to change something the edit view that shows after the user takes a photo.Normally, it shows a rectangle to crop, but I would like it to show a circle how would I do this.

Here is the solution which might help you to create crop overlay:-
- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
if ([navigationController.viewControllers count] == 3)
{
CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
UIView *plCropOverlay = [[[viewController.view.subviews objectAtIndex:1]subviews] objectAtIndex:0];
plCropOverlay.hidden = YES;
int position = 0;
if (screenHeight == 568)
{
position = 124;
}
else
{
position = 80;
}
CAShapeLayer *circleLayer = [CAShapeLayer layer];
UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect:
CGRectMake(0.0f, position, 320.0f, 320.0f)];
[path2 setUsesEvenOddFillRule:YES];
[circleLayer setPath:[path2 CGPath]];
[circleLayer setFillColor:[[UIColor clearColor] CGColor]];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 320, screenHeight-72) cornerRadius:0];
[path appendPath:path2];
[path setUsesEvenOddFillRule:YES];
CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor blackColor].CGColor;
fillLayer.opacity = 0.8;
[viewController.view.layer addSublayer:fillLayer];
UILabel *moveLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 320, 50)];
[moveLabel setText:#"Move and Scale"];
[moveLabel setTextAlignment:NSTextAlignmentCenter];
[moveLabel setTextColor:[UIColor whiteColor]];
[viewController.view addSubview:moveLabel];
}
}

Related

IOS: How to split an UIImage into parts

In one of my application I need to split UIImage into multiple parts. The following was the code I am using to split. Here my problem is I am unable to load the image view by adding the image to UIImageView.
- (void)viewDidLoad
{
UIImage* image = [UIImage imageNamed:#"monalisa.png"];
NSMutableArray* splitImages = [self splitImageIntoRects:(__bridge CGImageRef)(image)];
printf("\n count; %d",[splitImages count]);
CALayer *layer = [splitImages objectAtIndex:5];
CGImageRef imgRef = (__bridge CGImageRef)(layer.contents);
UIImage *img = [[UIImage alloc] initWithCGImage:imgRef];
UIImageView* imageview = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];
imageview.image = img;
imageview.backgroundColor = [UIColor redColor];
[self.view addSubview:imageview];
[super viewDidLoad];
// Do any additional setup after loading the view.
}
- (NSMutableArray*)splitImageIntoRects:(CGImageRef)anImage
{
CGSize imageSize = CGSizeMake(CGImageGetWidth(anImage), CGImageGetHeight(anImage));
NSMutableArray *splitLayers = [NSMutableArray array];
int kXSlices = 3;
int kYSlices = 3;
for(int x = 0;x < kXSlices;x++) {
for(int y = 0;y < kYSlices;y++) {
CGRect frame = CGRectMake((imageSize.width / kXSlices) * x,
(imageSize.height / kYSlices) * y,
(imageSize.width / kXSlices),
(imageSize.height / kYSlices));
CALayer *layer = [CALayer layer];
layer.frame = frame;
CGImageRef subimage = CGImageCreateWithImageInRect(anImage, frame);
layer.contents = (__bridge id)subimage;
[splitLayers addObject:layer];
}
}
return splitLayers;
}
And the output is like follows,
Try This:
- (void)viewDidLoad
{
[super viewDidLoad];
[self getSplitImagesFromImage:[UIImage imageNamed:#"Image1.png"] withRow:4 withColumn:4];
}
-(NSMutableArray *)getSplitImagesFromImage:(UIImage *)image withRow:(NSInteger)rows withColumn:(NSInteger)columns
{
NSMutableArray *aMutArrImages = [NSMutableArray array];
CGSize imageSize = image.size;
CGFloat xPos = 0.0, yPos = 0.0;
CGFloat width = imageSize.width/rows;
CGFloat height = imageSize.height/columns;
for (int aIntY = 0; aIntY < columns; aIntY++)
{
xPos = 0.0;
for (int aIntX = 0; aIntX < rows; aIntX++)
{
CGRect rect = CGRectMake(xPos, yPos, width, height);
CGImageRef cImage = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *aImgRef = [[UIImage alloc] initWithCGImage:cImage];
UIImageView *aImgView = [[UIImageView alloc] initWithFrame:CGRectMake(aIntX*width, aIntY*height, width, height)];
[aImgView setImage:aImgRef];
[aImgView.layer setBorderColor:[[UIColor blackColor] CGColor]];
[aImgView.layer setBorderWidth:1.0];
[self.view addSubview:aImgView];
[aMutArrImages addObject:aImgRef];
xPos += width;
}
yPos += height;
}
return aMutArrImages;
}
for more info see this and you can also download demo from here.
We can enhance more the Yasika Patel Answer. Below function will give you exact peice of image which fits to your view.
- (void)splitImage :(UIImage *)image withColums:(int)columns WithRows: (int)rows ViewToIntegrate : (UIView *)view
{
CGSize imageSize = _imgSplit.image.size;
CGFloat xPos = 0.0, yPos = 0.0;
CGFloat width = imageSize.width/rows;
CGFloat height = imageSize.height/columns;
for (int aIntY = 0; aIntY < columns; aIntY++)
{
xPos = 0.0;
for (int aIntX = 0; aIntX < rows; aIntX++)
{
CGRect rect = CGRectMake(xPos, yPos, width, height);
CGImageRef cImage = CGImageCreateWithImageInRect([ image CGImage], rect);
UIImage *aImgRef = [[UIImage alloc] initWithCGImage:cImage];
UIImageView *aImgView = [[UIImageView alloc] initWithFrame:CGRectMake(aIntX*(view.frame.size.width/rows), aIntY*( view.frame.size.height/columns), view.frame.size.width/rows, view.frame.size.height/columns)];
[aImgView setImage:aImgRef];
[aImgView.layer setBorderColor:[[UIColor blackColor] CGColor]];
[aImgView.layer setBorderWidth:0.5];
[view addSubview:aImgView];
xPos += width;
}
yPos += height;
}
[self.view addSubview:view];
}
This will give you the image in 9parts . here you just need to pass the row and colums.

UIBezierPath pulse animation

I'm drawing a UIBezierPath on a UIScrollView I have made an animation that draws the path from start to end point but this is not the animation that I want.
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:startPoints];
[linePath addLineToPoint:endPoints;
//shape layer for the line
CAShapeLayer *line = [CAShapeLayer layer];
line.path = [linePath CGPath];
// line.fillColor = [[UIColor blackColor] CGColor];
line.strokeColor = [[colors objectAtIndex:i] CGColor];
line.lineWidth = 5;
// line.contents = (id)[[UIImage imageNamed:#"Mask.png"] CGImage];
// line.contentsGravity = kCAGravityCenter;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = #(0.0f);
pathAnimation.toValue = #(1.0f);
pathAnimation.repeatCount = HUGE_VAL;
[line addAnimation:pathAnimation forKey:#"strokeEnd"];
I have tried adding a contents to the shape layer but I'm bad at animations. The effect I want to achieve is the same animation as "slide to unlock" has, or a path that pulses.
I've tried to do the same thing as the answer from slide-to-unlock but can't seem to manage
I ended up dooing this:
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:startPoints];
[linePath addLineToPoint:endPoints];
//gradient layer for the line
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(0, 0, 150.0, 1.0);
gradient.cornerRadius = 5.0f;
gradient.startPoint = CGPointMake(0.0, 0.5);
gradient.endPoint = CGPointMake(1.0, 0.5);
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor],(id)[[UIColor whiteColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor clearColor] CGColor], nil];
[scrollViewContent.layer addSublayer:gradient];
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim.path = [linePath CGPath];
anim.rotationMode = kCAAnimationRotateAuto;
anim.repeatCount = 0;
anim.duration = 1;
[gradient addAnimation:anim forKey:#"gradient"];

UIImage from MASKED CALayer

I'm in need of an UIImage from a Masked CALayer. This is the function I use:
- (UIImage *)imageFromLayer:(CALayer *)layer
{
UIGraphicsBeginImageContext([layer frame].size);
[layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
The problem is that the mask isn't maintained.
This is the completed code:
CAShapeLayer * layerRight= [CAShapeLayer layer];
layerRight.path = elasticoRight;
im2.layer.mask = layerRight;
CAShapeLayer * layerLeft= [CAShapeLayer layer];
layerLeft.path = elasticoLeft;
im3.layer.mask = layerLeft;
[viewImage.layer addSublayer:im2.layer];
[viewImage.layer addSublayer:im3.layer];
UIImage *image_result = [self imageFromLayer:viewImage.layer];
If I visualize the viewImage, the result is correct, but if I try to obtain the image relative to the layer, the masks are lost.
I've solved.
Now i obtaining the image mask and use CGContextClipToMask.
CGRect rect = CGRectMake(0, 0, 1024, 768);
UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0);
{
[[UIColor blackColor] setFill];
UIRectFill(rect);
[[UIColor whiteColor] setFill];
UIBezierPath *leftPath = [UIBezierPath bezierPath];
// Set the starting point of the shape.
CGPoint p1 = [(NSValue *)[leftPoints objectAtIndex:0] CGPointValue];
[leftPath moveToPoint:CGPointMake(p1.x, p1.y)];
for (uint i=1; i<leftPoints.count; i++)
{
CGPoint p = [(NSValue *)[leftPoints objectAtIndex:i] CGPointValue];
[leftPath addLineToPoint:CGPointMake(p.x, p.y)];
}
[leftPath closePath];
[leftPath fill];
}
UIImage *mask = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0);
{
CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage);
[im_senza drawAtPoint:CGPointZero];
}
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

How can I crop my UIPickerView?

Here is my horizontal UIPickerView (by rotate & scale the ori UIpicker) : htp://s7.postimage.org/qzez9d0pn/Original.png
And now, what I want to do is cut off these two spaces : http://s7.postimage.org/bryzp08uz/Process.png
To have this better look result : http://s7.postimage.org/6ulf3w6vv/Result.png
Somebody please help me how to do it...?
my rotate & scale code :
thePickerView.delegate = self;
thePickerView.showsSelectionIndicator =YES;
thePickerView.center = CGPointMake(xVar, yVar); // position
CGAffineTransform rotate = CGAffineTransformMakeRotation(-3.14/2); // rotate
rotate = CGAffineTransformScale(rotate, 0.1, 1); // scale
[thePickerView setTransform:rotate];
UILabel *theview[num];
CGAffineTransform rotateItem = CGAffineTransformMakeRotation(3.14/2);
for (int i=0;i<num;i++) {
theview[i] = [[UILabel alloc] init];
theview[i].text = [NSString stringWithFormat:#"%d",i+1];
theview[i].textColor = [UIColor blackColor];
theview[i].frame = CGRectMake(0,0, 100, 100);
theview[i].backgroundColor = [UIColor clearColor];
theview[i].textAlignment = UITextAlignmentCenter;
theview[i].shadowColor = [UIColor whiteColor];
theview[i].shadowOffset = CGSizeMake(-1,-1);
theview[i].adjustsFontSizeToFitWidth = YES;
theview[i].transform = CGAffineTransformScale(rotateItem, 1, 10);
}
itemArray = [[NSMutableArray alloc] init];
for (int j=0;j<num;j++) {[itemArray addObject:theview[j]];}
[thePickerView selectRow:row inComponent:0 animated:NO];
[self.view addSubview:thePickerView];
My temporary solution while searching & waiting for better coding answer is create an overlay background image then transparent the desire space of PickerView =.=

Image size resets to original after performing pich using UIPichGestureRecognizer in iphone

I have one view controller in which I have added UIScrollView & UIImageView programatically. I have added UIPichGestureRecognizer to the UIImageView. My UIImageView is added to UIScrollView as a subview.
My problem is when I try to pinch the image , it zoom in. But when I release the touches from screen it again come to its default size. I can not find the error in code. Please help me.
Below is my code
- (void)createUserInterface {
scrollViewForImage = [[UIScrollView alloc]initWithFrame:CGRectMake(20.0f, 60.0f, 280.0f, 200.0f)];
scrollViewForImage.userInteractionEnabled = YES;
scrollViewForImage.multipleTouchEnabled = YES;
scrollViewForImage.backgroundColor = [UIColor redColor];
scrollViewForImage.autoresizesSubviews = YES;
scrollViewForImage.maximumZoomScale = 1;
scrollViewForImage.minimumZoomScale = .50;
scrollViewForImage.clipsToBounds = YES;
scrollViewForImage.delegate = self;
scrollViewForImage.bouncesZoom = YES;
scrollViewForImage.contentMode = UIViewContentModeScaleToFill;
[self.contentView addSubview:scrollViewForImage];
imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0.0f, 0.0f, 280.0f, 200.0f)];
[imageView setBackgroundColor:[UIColor clearColor]];
imageView.userInteractionEnabled = YES;
imageView.multipleTouchEnabled = YES;
UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(pinch:)];
[pinchRecognizer setDelegate:self];
[imageView addGestureRecognizer:pinchRecognizer];
//[self.contentView addSubview:imageView];
[self.scrollViewForImage addSubview:imageView];
scrollViewForImage.contentSize = CGSizeMake(imageView.frame.size.width , imageView.frame.size.height);
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)inScroll {
return imageView;
}
-(void)pinch:(id)sender {
[self.view bringSubviewToFront:[(UIPinchGestureRecognizer*)sender view]];
if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {
lastScale = 1.0;
return;
}
CGFloat scale = 1.0 - (lastScale - [(UIPinchGestureRecognizer*)sender scale]);
CGAffineTransform currentTransform = [(UIPinchGestureRecognizer*)sender view].transform;
CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);
[[(UIPinchGestureRecognizer*)sender view] setTransform:newTransform];
lastScale = [(UIPinchGestureRecognizer*)sender scale];
}
From what I can see the problem lies here:
scrollViewForImage.maximumZoomScale = 1;
You are setting the maximum zoom scale of the image to 1 x its full size. This means once you finish pinching the image, it will scale back to 1 x its size.
If you want to be able to zoom the image to a larger size, try settings this value to be higher than 1. e.g.
scrollViewForImage.maximumZoomScale = 3;

Resources