I am comfortable with pinch zooming functionality using UIScrollView. But the problem is the aspect fit of image in scrollview.
Currently, I am having this, below image:
But I want image to be fit in screen like below image:
And same behavior for landscape. How can I achieve this?
Below is the code:
- (void)viewDidLoad
{
UIImage *image = [UIImage imageWithData:appDelegate.selectedOriginalImage];
imgView.image = image;
CGSize imageSize = image.size;
CGRect rect = CGRectMake(0, 0, imageSize.width, imageSize.height);
imgView.frame = rect;
scrollView.contentSize = CGSizeMake(imgView.frame.size.width, imgView.frame.size.height);
scrollView.maximumZoomScale = 4.0;
scrollView.minimumZoomScale = 1.0;
scrollView.delegate = self;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
UIImage *image = [UIImage imageWithData:appDelegate.selectedOriginalImage];
CGSize imageSize = image.size;
CGRect rect = CGRectMake(0, 0, imageSize.width, imageSize.height);
imgView.frame = rect;
[scrollView setContentOffset:CGPointMake(0, 0)];
return YES;
}
You are setting the UIImageView to the original size of the image instead of the size of the UIScrollView that contains it.
- (void)viewDidLoad
{
UIImage *image = [UIImage imageWithData:appDelegate.selectedOriginalImage];
imgView.image = image;
imgView.frame = scrollView.bounds;
[imgView setContentMode:UIViewContentModeScaleAspectFit];
scrollView.contentSize = CGSizeMake(imgView.frame.size.width, imgView.frame.size.height);
scrollView.maximumZoomScale = 4.0;
scrollView.minimumZoomScale = 1.0;
scrollView.delegate = self;
}
remember to return the imgView on the viewToZoom delegate method
Related
I'm trying to draw a view's layer to a CGGraphicsImageContext using renderInContext, however the view layer is not displaying on the resultant UIImage.
UIGraphicsBeginImageContext(scaledImage.size);
[scaledImage drawInRect:CGRectMake(0, 0, scaledImage.size.width, scaledImage.size.height)];
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *croppedImage = [UIGraphicsGetImageFromCurrentImageContext() croppedImage:CGRectMake(0, 44, 320, scaledImage.size.height - (60 + 44))];
UIGraphicsEndImageContext();
My drawRect method for the view is as follows:
-(void)drawRect:(CGRect)rect
{
CALayer *background = [[CALayer alloc] init];
background.backgroundColor = [UIColor blackColor].CGColor;
background.opacity = 0.4;
background.frame = self.bounds;
[self.layer addSublayer:background];
CATextLayer *textLayer = [[CATextLayer alloc] init];
textLayer.string = _poseName;
textLayer.fontSize = 19;
textLayer.foregroundColor = [UIColor whiteColor].CGColor;
textLayer.alignmentMode = kCAAlignmentCenter;
textLayer.frame = self.bounds;
CGSize textSize = [_poseName sizeWithFont:[UIFont fontWithName:#"Helvetica" size:19]
constrainedToSize:textLayer.bounds.size
lineBreakMode:NSLineBreakByWordWrapping];
textLayer.position = CGPointMake(160, self.bounds.size.height - textSize.height/2);
[self.layer addSublayer:textLayer];
}
The view's layers are displaying correctly when the app is running however, the view is not rendering to the graphics context as I would expect. Thank you in advance for your help!
Here is the code I am using to detect face from an Image:
- (void)detectFaces:(UIImageView *)photo
{
CIImage *coreImage = [CIImage imageWithCGImage:photo.image.CGImage];
CIDetector *detector = [CIDetector detectorOfType:CIDetectorTypeFace
context:nil
options:[NSDictionary dictionaryWithObject:CIDetectorAccuracyHigh
forKey:CIDetectorAccuracy]];
NSArray* features = [detector featuresInImage:coreImage];
for(CIFaceFeature* faceFeature in features)
{
NSLog(#"self.view %#",NSStringFromCGRect(self.view.frame));
NSLog(#"self.view %#",NSStringFromCGRect(self.view.bounds));
NSLog(#"self.vounds %#",NSStringFromCGRect(faceFeature.bounds));
CGFloat faceWidth = faceFeature.bounds.size.width;
UIView* faceView = [[UIView alloc] initWithFrame:faceFeature.bounds];
faceView.layer.borderWidth = 1;
faceView.layer.borderColor = [[UIColor redColor] CGColor];
[self.view addSubview:faceView];
if(faceFeature.hasLeftEyePosition)
{
UIView* leftEyeView = [[UIView alloc] initWithFrame:CGRectMake(faceFeature.leftEyePosition.x-faceWidth*0.15, faceFeature.leftEyePosition.y-faceWidth*0.15, faceWidth*0.3, faceWidth*0.3)];
[leftEyeView setBackgroundColor:[[UIColor blueColor] colorWithAlphaComponent:0.3]];
[leftEyeView setCenter:faceFeature.leftEyePosition];
leftEyeView.layer.cornerRadius = faceWidth*0.15;
[self.view addSubview:leftEyeView];
}
if(faceFeature.hasRightEyePosition)
{
UIView* leftEye = [[UIView alloc] initWithFrame:CGRectMake(faceFeature.rightEyePosition.x-faceWidth*0.15, faceFeature.rightEyePosition.y-faceWidth*0.15, faceWidth*0.3, faceWidth*0.3)];
[leftEye setBackgroundColor:[[UIColor blueColor] colorWithAlphaComponent:0.3]];
[leftEye setCenter:faceFeature.rightEyePosition];
leftEye.layer.cornerRadius = faceWidth*0.15;
[self.view addSubview:leftEye];
}
if(faceFeature.hasMouthPosition)
{
UIView* mouth = [[UIView alloc] initWithFrame:CGRectMake(faceFeature.mouthPosition.x-faceWidth*0.2, faceFeature.mouthPosition.y-faceWidth*0.2, faceWidth*0.4, faceWidth*0.4)];
[mouth setBackgroundColor:[[UIColor greenColor] colorWithAlphaComponent:0.3]];
[mouth setCenter:faceFeature.mouthPosition];
mouth.layer.cornerRadius = faceWidth*0.2;
[self.view addSubview:mouth];
}
}
}
This is code that I have used to resize an image:
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
//UIGraphicsBeginImageContext(newSize);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
and finally I am calling detect face method like this:
UIImageView *inputImage = [[UIImageView alloc] initWithImage:[self imageWithImage:[UIImage imageNamed:#"facedetectionpic.jpg"] scaledToSize:CGSizeMake(320, 460)]];
[self.view addSubview:inputImage];
[inputImage setTransform:CGAffineTransformMakeScale(1, -1)];
[self.view setTransform:CGAffineTransformMakeScale(1, -1)];
[self performSelectorInBackground:#selector(detectFaces:) withObject:inputImage];
It is working properly in Simulator but not in device. Can anyone please help me on this.
Simulator:
Device:
When I have changed options in UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0); to UIGraphicsBeginImageContextWithOptions(newSize, NO, 1.0); it started working even in device. Solved the issue.
Change options in UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0); to
UIGraphicsBeginImageContextWithOptions(newSize, NO, 1.0); it will work.
I user Interface Builder to layout my view and image view. I put a imageView on the view and set it as an outlet. The problem is that no matter what size of image (768*1024、1024*700) I set in my program：
self.imageView.image = [UIImage imageNamed:self.filename];
The size to be on the screen is always the size of the imageView I set in the Interface Builder. How can I dynamically set the size of the imageView according to the size of the image? Thanks!
Something like:
UIImageView *imageView = [[UIImageView alloc] init];
UIImage *image = [UIImage imageNamed:#"image.png"];
CGSize imageSize = [image size];
imageView.frame = CGRectMake(0, 0, imageSize.width, imageSize.height);
UIImage *image = [UIImage imageNamed:self.filename];
CGFloat width = image.size.width;
CGFloat height = image.size.height;
self.imageView.frame = CGRectMake(x, y , width, height);
You could subclass your image and do the following override for eachTime a new image is set :
#interface MyImageSubClass : UIImageView;
#end
#implementation MyImageSubClass
- (void)setImage:(UIImage *)image {
// Let the original UIImageView parent class do its job
[super image];
// Now set the frame according to the image size
// and keeping the original position of your image frame
if (image) {
CGRect r = self.frame;
CGSize imageSize = [image size];
self.frame = (r.origin.x, r.origin.y, imageSize.width, imageSize.height);
}
}
#end
UIImage *buttonImage2=[UIImage imageNamed:#"blank_button_blue.png"];
oButton=[[UIButton alloc] init];
// [oButton setImage:buttonImage2 forState:UIControlStateNormal];
[oButton setFrame:CGRectMake(0, 0, buttonImage2.size.width, buttonImage2.size.height)];
UIImage* sourceImage = [UIImage imageNamed:self.filename];;
CGRect rect;
rect.size.width = CGImageGetWidth(sourceImage.CGImage);
rect.size.height = CGImageGetHeight(sourceImage.CGImage);
[ yourimageview setframe:rect];
I am trying to add set of imageviews on a UIScrollView. My problem is that the imageviews are overlapping with each other even though I increase the x value. What's also weird is that this problem is only for devices with ios 4.2.1, but works on simulator 4.2 and other device ios.
Here is my code:
- (void)addScrollView {
[self setImages];
scrollView = [[UIScrollView alloc] initWithFrame:self.frame];
scrollView.delegate = self;
[scrollView setBackgroundColor:[UIColor blackColor]];
[scrollView setCanCancelContentTouches:NO];
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;
scrollView.scrollEnabled = YES;
scrollView.pagingEnabled = YES;
[self addSubview:scrollView];
NSUInteger nimages;
CGFloat cx = 0;
for (nimages = 1; nimages < [imagesArray count] ; nimages++) {
UIImage *image = [UIImage imageNamed:[imagesArray objectAtIndex:nimages]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.origin.x = cx;
rect.origin.y = 0;
rect.size.width = 320;
rect.size.height = 480;
imageView.frame = rect;
[scrollView addSubview:imageView];
[imageView release];
cx += rect.size.width;
}
[scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
}
Called from here:
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self addScrollView];
UIImage *handImg;
UIImageView *longhand = [[UIImageView alloc] init];
minuteHand = [[UIView alloc] initWithFrame:CGRectMake(0, 55, 320, 480)];
handImg = [UIImage imageNamed:#"clock_long_hand.png"];
longhand.image = handImg;
/************** TRY COMMENT OUT HERE **************/
longhand.frame = CGRectMake(155 - (handImg.size.width / 2), 240 - handImg.size.height, handImg.size.width, handImg.size.height);
[minuteHand addSubview:longhand];
[self addSubview:minuteHand];
/************** END COMMENT OUT HERE **************/
[longhand release];
}
return self;
}
UPDATE:
This code is in a UIView subclass which is why I use [self...] instead of [self.view...].
I tried experimenting and found that when I comment out the indicated parts, the scrollview works fine. But when it is included, this is when the imageviews are overlapped.
I know that the scrollview's content size is correct because its indicator continues to scroll, with just a plain black background.
I am really confused why this works on some ios and not on others. Hope you can help.
This might have something to do with autoresizing mask. The width actual images, I mean .png files is bigger than 320, right?
I'm wanting to know if there's a way I can transform my view to look something like iPhone folders. In other words, I want my view to split somewhere in the middle and reveal a view underneath it. Is this possible?
EDIT:
Per the suggestion below, I could take a screenshot of my application by doing this:
UIGraphicsBeginImageContext(self.view.bounds.size);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Not sure what to do with this, however.
EDIT:2
I've figured out how to add some shadows to my view, and here's what I've achieved (cropped to show relevant part):
EDIT:3
http://github.com/jwilling/JWFolders
the basic thought will be to take a picture of your current state and split it somewhere. Then animate both parts by setting a new frame. I don't know how to take a screenshot programmatically so I can't provide sample code…
EDIT: hey hey it's not looking great but it works ^^
// wouldn't be sharp on retina displays, instead use "withOptions" and set scale to 0.0
// UIGraphicsBeginImageContext(self.view.bounds.size);
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *f = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGRect fstRect = CGRectMake(0, 0, 320, 200);
CGRect sndRect = CGRectMake(0, 200, 320, 260); // was 0,200,320,280
CGImageRef fImageRef = CGImageCreateWithImageInRect([f CGImage], fstRect);
UIImage *fCroppedImage = [UIImage imageWithCGImage:fImageRef];
CGImageRelease(fImageRef);
CGImageRef sImageRef = CGImageCreateWithImageInRect([f CGImage], sndRect);
UIImage *sCroppedImage = [UIImage imageWithCGImage:sImageRef];
CGImageRelease(sImageRef);
UIImageView *first = [[UIImageView alloc]initWithFrame:fstRect];
first.image = fCroppedImage;
//first.contentMode = UIViewContentModeTop;
UIImageView *second = [[UIImageView alloc]initWithFrame:sndRect];
second.image = sCroppedImage;
//second.contentMode = UIViewContentModeBottom;
UIView *blank = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 460)];
blank.backgroundColor = [UIColor darkGrayColor];
[self.view addSubview:blank];
[self.view addSubview:first];
[self.view addSubview:second];
[UIView animateWithDuration:2.0 animations:^{
second.center = CGPointMake(second.center.x, second.center.y+75);
}];
You can uncomment the two .contentMode lines and the quality will improve but in my case the subview has an offset of 10px or so (you can see it by setting a background color to both subviews)
//EDIT 2: ok found that bug. Had used the whole 320x480 screen, but had to cut off the status bar so it should be 320x460 and all is working great ;)
Instead of taking a snapshot of the view, you could use a separate view for each row of icons. You'll have to do a bit more work with repositioning stuff, but the rows won't be static when the folder is open (in other words, they'll keep redrawing as necessary).
I took relikd's code as a base and made it a bit more dynamic.
You can specify split position and direction when calling the function and I added a boarder to the split images.
#define splitAnimationTime 0.5
- (void)split:(SplitDirection)splitDirection
atYPostition:(int)splitYPosition
withRevealedViewHeight:(int)revealedViewHeight{
// wouldn't be sharp on retina displays, instead use "withOptions" and set scale to 0.0
// UIGraphicsBeginImageContext(self.view.bounds.size);
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
[self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *f = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGRect fullScreenRect = [self getScreenFrameForCurrentOrientation];
CGRect upperSplitRect = CGRectMake(0, 0,fullScreenRect.size.width, splitYPosition);
CGRect lowerSplitRect = CGRectMake(0, splitYPosition, fullScreenRect.size.width, fullScreenRect.size.height-splitYPosition);
CGImageRef upperImageRef = CGImageCreateWithImageInRect([f CGImage], upperSplitRect);
UIImage *upperCroppedImage = [UIImage imageWithCGImage:upperImageRef];
CGImageRelease(upperImageRef);
CGImageRef lowerImageRef = CGImageCreateWithImageInRect([f CGImage], lowerSplitRect);
UIImage *lowerCroppedImage = [UIImage imageWithCGImage:lowerImageRef];
CGImageRelease(lowerImageRef);
UIImageView *upperImage = [[UIImageView alloc]initWithFrame:upperSplitRect];
upperImage.image = upperCroppedImage;
//first.contentMode = UIViewContentModeTop;
UIView *upperBoarder = [[UIView alloc]initWithFrame:CGRectMake(0, splitYPosition, fullScreenRect.size.width, 1)];
upperBoarder.backgroundColor = [UIColor whiteColor];
[upperImage addSubview:upperBoarder];
UIImageView *lowerImage = [[UIImageView alloc]initWithFrame:lowerSplitRect];
lowerImage.image = lowerCroppedImage;
//second.contentMode = UIViewContentModeBottom;
UIView *lowerBoarder = [[UIView alloc]initWithFrame:CGRectMake(0, 0, fullScreenRect.size.width, 1)];
lowerBoarder.backgroundColor = [UIColor whiteColor];
[lowerImage addSubview:lowerBoarder];
int reveledViewYPosition = splitYPosition;
if(splitDirection==SplitDirectionUp){
reveledViewYPosition = splitYPosition - revealedViewHeight;
}
UIView *revealedView = [[UIView alloc]initWithFrame:CGRectMake(0, reveledViewYPosition, fullScreenRect.size.width, revealedViewHeight)];
revealedView.backgroundColor = [UIColor scrollViewTexturedBackgroundColor];
[self.view addSubview:revealedView];
[self.view addSubview:upperImage];
[self.view addSubview:lowerImage];
[UIView animateWithDuration:splitAnimationTime animations:^{
if(splitDirection==SplitDirectionUp){
upperImage.center = CGPointMake(upperImage.center.x, upperImage.center.y-revealedViewHeight);
} else { //assume down
lowerImage.center = CGPointMake(lowerImage.center.x, lowerImage.center.y+revealedViewHeight);
}
}];
}
This means I can call it like this:
[self split:SplitDirectionUp atYPostition:500 withRevealedViewHeight:200];
I used these conveniance functions in the updated split function:
- (CGRect)getScreenFrameForCurrentOrientation {
return [self getScreenFrameForOrientation:[UIApplication sharedApplication].statusBarOrientation];
}
- (CGRect)getScreenFrameForOrientation:(UIInterfaceOrientation)orientation {
UIScreen *screen = [UIScreen mainScreen];
CGRect fullScreenRect = screen.bounds;
BOOL statusBarHidden = [UIApplication sharedApplication].statusBarHidden;
//implicitly in Portrait orientation.
if(orientation == UIInterfaceOrientationLandscapeRight || orientation == UIInterfaceOrientationLandscapeLeft){
CGRect temp = CGRectZero;
temp.size.width = fullScreenRect.size.height;
temp.size.height = fullScreenRect.size.width;
fullScreenRect = temp;
}
if(!statusBarHidden){
CGFloat statusBarHeight = 20;
fullScreenRect.size.height -= statusBarHeight;
}
return fullScreenRect;
}
and this enum:
typedef enum SplitDirection
{
SplitDirectionDown,
SplitDirectionUp
}SplitDirection;
Adding a return to normaal function and adding the arrow would be a great addition.