Want to display an image onto a view but in semicurve shape - iphone

I want to display an image in iPhone application on the whole screen but with a semi curve shape.
The image should start from the corner touching and ends on touching the another corner. I don't have an idea to make this can anyone help me please.
This image table is semi curved but image should be displayed on semi curved shape

Changing the image to be curvical or playing with images can be achieved Using CALayer. Every imageView has a layer over it. Use it to show the effect. The effect you wanted on your table image can be acheived through this code:-
-(void) viewDidLoad{
[self paperCurlShadowImage];
}
-(void) paperCurlShadowImage{
imgView = [[UIImageView alloc] initWithImage:image];
imgView.frame=CGRectMake(0, 0, image.size.width, image.size.height);
[self.view addSubview:imgView];
imgView.layer.shadowColor = [UIColor blackColor].CGColor;
imgView.layer.shadowOpacity = 0.7f;
imgView.layer.shadowOffset = CGSizeMake(10.0f, 10.0f);
imgView.layer.shadowRadius = 2.0f;
imgView.layer.masksToBounds = NO;
imgView.layer.shadowPath = [self renderPaperCurl:imgView];
[imgView release];
}
- (CGPathRef)renderPaperCurl:(UIView*)imgView1 {
CGSize size = imgView1.bounds.size;
CGFloat curlFactor = 15.0f;
CGFloat shadowDepth = 5.0f;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0.0f, 0.0f)];
[path addLineToPoint:CGPointMake(size.width, 0.0f)];
[path addLineToPoint:CGPointMake(size.width, size.height + shadowDepth)];
[path addCurveToPoint:CGPointMake(0.0f, size.height + shadowDepth)
controlPoint1:CGPointMake(size.width - curlFactor, size.height + shadowDepth - curlFactor)
controlPoint2:CGPointMake(curlFactor, size.height + shadowDepth - curlFactor)];
return path.CGPath;
}

Related

iOS Custom UIImagePickerController Camera Crop to Square

I'm trying to create a camera like Instagram where the user can see a box and the image would crop to that box. For Some reason the camera doesn't go all the way to the bottom of the screen and cuts off near the end. I'm also wondering how would I go about cropping the image to be 320x320 exactly inside that square?
Here's the easiest way to do it (without reimplementing UIImagePickerController). First, use an overlay to make the camera field look square. Here's an example for 3.5" screens (you'd need to update it to work for iPhone 5):
UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];
imagePickerController.sourceType = source;
if (source == UIImagePickerControllerSourceTypeCamera) {
//Create camera overlay
CGRect f = imagePickerController.view.bounds;
f.size.height -= imagePickerController.navigationBar.bounds.size.height;
CGFloat barHeight = (f.size.height - f.size.width) / 2;
UIGraphicsBeginImageContext(f.size);
[[UIColor colorWithWhite:0 alpha:.5] set];
UIRectFillUsingBlendMode(CGRectMake(0, 0, f.size.width, barHeight), kCGBlendModeNormal);
UIRectFillUsingBlendMode(CGRectMake(0, f.size.height - barHeight, f.size.width, barHeight), kCGBlendModeNormal);
UIImage *overlayImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *overlayIV = [[UIImageView alloc] initWithFrame:f];
overlayIV.image = overlayImage;
[imagePickerController.cameraOverlayView addSubview:overlayIV];
}
imagePickerController.delegate = self;
[self presentViewController:imagePickerController animated:YES completion:nil];
Then, after you get a picture back from the UIImagePickerController, crop it to a square with something like this:
//Crop the image to a square
CGSize imageSize = image.size;
CGFloat width = imageSize.width;
CGFloat height = imageSize.height;
if (width != height) {
CGFloat newDimension = MIN(width, height);
CGFloat widthOffset = (width - newDimension) / 2;
CGFloat heightOffset = (height - newDimension) / 2;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(newDimension, newDimension), NO, 0.);
[image drawAtPoint:CGPointMake(-widthOffset, -heightOffset)
blendMode:kCGBlendModeCopy
alpha:1.];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
And you're done.
#Anders answer was very close to correct for me on iPhone 5. I made the following modification to add an overlay hardcoded for iPhone 5:
CGRect f = imagePickerController.view.bounds;
f.size.height -= imagePickerController.navigationBar.bounds.size.height;
UIGraphicsBeginImageContext(f.size);
[[UIColor colorWithWhite:0 alpha:.5] set];
UIRectFillUsingBlendMode(CGRectMake(0, 0, f.size.width, 124.0), kCGBlendModeNormal);
UIRectFillUsingBlendMode(CGRectMake(0, 444, f.size.width, 52), kCGBlendModeNormal);
UIImage *overlayImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *overlayIV = [[UIImageView alloc] initWithFrame:f];
overlayIV.image = overlayImage;
overlayIV.alpha = 0.7f;
[imagePickerController setCameraOverlayView:overlayIV];`
I hope this helps someone.

Zooming UIImageView in UIScrollView goes out of bounds

I've successfully implemented zooming of UIImageView in my UIScrollView but I have faced with a strange problem that irritates me.
Basically, when I zoom in the image
I can pan the view to actually scroll out of the image border and I'm left with a black area like this:
And as I zoom in more I can make the black border to fill the whole screen!
Meanwhile in the iPhone Photo app you can't zoom out the actual image. What's wrong here in my implementation?
It looks like this:
UIImage *imageToDisplay = [UIImage imageWithData:tmpImageData];
imageViewMain.image = imageToDisplay;
imageViewMain.frame = CGRectMake(0, 0, scrollViewMain.frame.size.width, scrollViewMain.frame.size.height);
imageViewMain.contentMode = UIViewContentModeScaleAspectFit;
scrollViewMain.delegate = self;
scrollViewMain.minimumZoomScale = 1.0;
scrollViewMain.maximumZoomScale = 9.0;
scrollViewMain.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
scrollViewMain.contentSize = imageViewMain.frame.size;
[self.view addSubview:scrollViewMain];
[scrollViewMain addSubview:imageViewMain];
And I also implement this method:
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return imageViewMain;
}
Thanks in advance!
EDIT:
When I first load the view I shrink my UIImageView to fit the scroll view and the image looks like this:
Just try this code.... change some code where it required... use UIPinchGestureRecognizer for your UIImageView and then add this image in your UIScrollView like bellow..
UIImageView *img = [[UIImageView alloc]init];
img.image = [UIImage imageWithData:tmpImageData];
img.userInteractionEnabled = YES;
img.frame = CGRectMake(210,100, 200, 200);/// define frame which you want...
[img sizeToFit];
UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:#selector(scale:)];
[pinchRecognizer setDelegate:self];
[img addGestureRecognizer:pinchRecognizer];
[pinchRecognizer release];
[scrollViewMain addSubview:img];
[scrollViewMain bringSubviewToFront:img];
[img release];
and just paste this bellow code in your .m file...
#pragma mark GestureRecognizer Methods
-(void)scale:(id)sender
{
UIView *imgTempGest = [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];
[imgTempGest setTransform:newTransform];
lastScale = [(UIPinchGestureRecognizer*)sender scale];
}
Here for LastScale just define that variable in .h file like bellow...
CGFloat lastScale;
i hope this helpful to you...
Is the original image contains that border in top and bottom?. You can use the same code over there the output is not wrong if the actual image contains that black top and bottom black area. And add this code also,
scrollView.scrollEnabled = YES
also change,
scrollView.contentSize = imageView.bounds.size;
Also you are providing a zoom scale of 9. That much is needed for you?. Change it to 3 or 4 and try. Your problem will be fixed

Fitting View Frame around Scaled CALayer

In the following method, I'm simply enlarging a bunch of CAShapeLayers which are attached to my views layer property by using CATransform3DMakeScale. I'm able to enlarge the shape layers correctly, but am having a tough time getting the view frame to enlarge and fit around the graphic produced by the shape layers like it should. Everything is the same size, ie the view frame is the same size as all of the shape layers.
Anyone have any suggestions on how to fix this? I've tried altering the views transform property as well as the views layer transform property. Not sure what I'm missing here.
- (void) setSize:(CGSize)size
{
CATransform3D transform = CATransform3DMakeScale(size.width / (self.graphic.initialSize.width), size.height / (self.graphic.initialSize.height), 1);
self.layer.sublayerTransform = transform;
self.frame = CGRectMake(0, 0, size.width, size.height);
self.graphic.size = CGSizeMake(size.width, size.height);
}
Also for reference, here is how I am setting up the views layer:
- (id)initWithGraphic:(Graphic*)graphic
{
self = [super initWithFrame:CGRectZero];
if (self)
{
self.backgroundColor = [UIColor clearColor];
_graphic = [graphic retain];
self.frame = CGRectMake(0,0, _graphic.initialSize.width, _graphic.initialSize.height);
self.layer.shouldRasterize = YES;
for (int i = 0; i < [_graphic.shapeLayers count]; i++)
{
[self.layer addSublayer:[_graphic.shapeLayers objectAtIndex:i]];
}
}
return self;
}
and here is how I'm setting up one of the shape layers:
CAShapeLayer *outlineShapeLayer = [[CAShapeLayer alloc] init];
outlineShapeLayer.anchorPoint = CGPointMake(0, 0);
outlineShapeLayer.fillColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor;
outlineShapeLayer.bounds = shapeLayerFrame;
outlineShapeLayer.mutablePath = mutablePath;
I had to make it so my views layer also had it's anchorPoint and position set up to match my CAShapeLayers and then it worked:
self.layer.anchorPoint = CGPointMake(0, 0);
self.layer.position = CGPointMake(0, 0);

check on images displayed in UIScrollview

Hi i am new to IPhone development.
I am creating UIImageViews programmatically on button click. but every time i click the button they get drawn at the same place. the image drawing code is as follows.
- (IBAction)Button
{
arrayOfImages = [[NSMutableArray alloc]init];
float x = 15.0,y = 15.0, width = 100.0, height = 100;
CGRect frame = CGRectMake(x, y, width, height);
int i= 0;
if ([shape isEqualToString:#"Rectangle"])
{
UIGraphicsBeginImageContext(frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGRect main =CGRectMake(x, y, 70.0, 30.0);
CGContextFillRect(context, main);
CGRect topSeat1 = CGRectMake(15.0, 0.0, 15.0, 13.0);
CGRect topSeat2 = CGRectMake(42.5, 0.0, 15.0, 13.0);
CGRect topSeat3 = CGRectMake(70.0, 0.0, 15.0, 13.0);
CGRect leftSeat = CGRectMake(0.0, 22.5, 13.0, 15.0);
CGRect rightSeat = CGRectMake(87.0, 22.5, 13.0, 15.0);
[[UIColor redColor]set];
//UIRectFill(main);
UIRectFill(topSeat1);
UIRectFill(topSeat2);
UIRectFill(topSeat3);
UIRectFill(leftSeat);
UIRectFill(rightSeat);
UIRectFrame(main);
[[UIColor blackColor]set];
UIRectFrame(topSeat1);
UIRectFrame(topSeat2);
UIRectFrame(topSeat3);
UIRectFrame(leftSeat);
UIRectFrame(rightSeat);
UIImage * images = [[UIImage alloc]init];
images = UIGraphicsGetImageFromCurrentImageContext();
UIImageView* myImage=[[UIImageView alloc]initWithFrame:frame];
[myImage setImage:images];
myImage.tag= i;
i++;
UIGraphicsEndImageContext();
[self.view addSubview:myImage];
[arrayOfImages addObject:myImage];
[myImage setUserInteractionEnabled:YES];
}
}
all i want is that if i click the button it should check that if there is already UIIMAgeView drawn at that place then it draws the UIIMageView a bit away from it.
I would appreciate if u help me with some code.
use a variable to store the click count of the button, then use the variable to adjust the place of your view
or you may ask for the superview for subviews and compare the frame of the subview with your image view
for (UIView *subview in self.view.subviews) {
if (/* compare subview.frame with myImage.frame */) {
/* update myImage.frame */
break;
}
}

Drawing a transparent circle on top of a UIImage - iPhone SDK

I am having a lot of trouble trying to find out how to draw a transparent circle on top of a UIImage within my UIImageView. Google-ing gives me clues, but I still can't find a working example.
Are there any examples that anyone knows of that demonstrate this?
Easiest way is simply to create a semi-transparent square UIView, then set the cornerRadius of its layer to be half of its width/height. Something like:
UIView *squareView = [[UIView alloc] initWithFrame:CGRectMake(0,0,100,100)];
squareView.alpha = 0.5;
squareView.layer.cornerRadius = 50;
...
[squareView release];
This has got to be the simplest solution:
CGFloat r = 150;
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0,0,1.5*r,1.5*r)];
lbl.text = #"●";
lbl.transform = CGAffineTransformMakeTranslation(0.0f, -r/6);
lbl.textAlignment = UITextAlignmentCenter;
lbl.backgroundColor = [UIColor clearColor];
lbl.textColor = [UIColor redColor];
lbl.font = [UIFont systemFontOfSize:2*r];
lbl.alpha = 0.5;
lbl.center = self.view.center;
[self.view addSubview:lbl];
One way would be to add a CAShapeLayer with a circular path, either directly to the layer of the UIImageView or as the layer of a new UIView that is added to the UIImageView.
If you actually want to modify the image, then create a mutable copy of it by drawing it into a CGBitmapContext then creating a new image from the modified bitmap.
CGPathRef circlePath = CGPathCreateMutable();
CGPathAddEllipseInRect( circlePath , NULL , CGRectMake( 0,0,20,20 ) );
CAShapeLayer *circle = [[CAShapeLayer alloc] init];
circle.path = circlePath;
circle.opacity = 0.5;
[myImageView.layer addSublayer:circle];
CGPathRelease( circlePath );
[circle release];
You can implement a custom sub-class of UIView that draws your image and then the circle in the drawRect method:
#interface CircleImageView : UIView {
UIImage * m_image;
CGRect m_viewRect;
// anything else you need in this view?
}
Implementation of drawRect:
- (void)drawRect:(CGRect)rect {
// first draw the image
[m_image drawInRect:m_viewRect blendMode:kCGBlendModeNormal alpha:1.0];
// then use quartz to draw the circle
CGContextRef context = UIGraphicsGetCurrentContext ()
// stroke and fill black with a 0.5 alpha
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 0.5);
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.5);
// now draw the circle
CGContextFillEllipseInRect (context, m_viewRect);
}
You will need to set up the m_viewRect and m_image member functions on init.