Alpha mask gradient on a uiimageview - objective-c

I'd like to be able to add an alpha gradient onto the edge of an image to make it "fade" into the next image. The picture below explains what I am trying to do.
Any idea on how to do this? I do not have much experience with the graphics context which is why I am here asking for help.

You can check with this code and post the result.
UIImage* first = [[UIImage alloc]initWithContentsOfFile:#"firstImagePath"];
UIImage* second = [[UIImage alloc]initWithContentsOfFile:#"secondImagePath"];
CGSize sizeToSet;
int mergeArea = 200;
sizeToSet.width = first.size.width + second.size.width - mergeArea;
sizeToSet.height = first.size.height;
UIGraphicsBeginImageContext(sizeToSet);
[first drawAtPoint:CGPointMake(0, 0)];
[second drawAtPoint:CGPointMake(first.size.width - mergeArea, 0) blendMode:kCGBlendModeLuminosity alpha:1.0f];
UIImageView* imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
[imageView setCenter:self.view.center];
[imageView setImage:UIGraphicsGetImageFromCurrentImageContext()];
UIGraphicsEndImageContext();
[[self view]addSubview:imageView];
[imageView release];
[first release];
[second release];

Related

MKAnnotationView image with rotation

i would like add UIView to MKAnnotationView as image. But first I wanna rotation by degrees UIView and then add new UIImage to UIVIew. Can you help me? I tried but UIView never rotate.
UIView *pinView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 63, 63)];
pinView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"IconMapPin"]];
pinView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(self.heading));
UIImage *pinImage = [self imageFromUIView:pinView];
annotationView.image = pinImage;
Method convert UIView to UIImage
- (UIImage *) imageFromUIView:(UIView*)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
Remove this,
pinView.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(self.heading));
Add this,
pinImage.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(self.heading));
After this,
UIImage *pinImage = [self imageFromUIView:pinView];
So final code will be,
UIView *pinView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 63, 63)];
pinView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"IconMapPin"]];
UIImage *pinImage = [self imageFromUIView:pinView];
pinImage.transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(self.heading));
annotationView.image = pinImage;

Screenshot does not show the image in video

I need to get the screenshot of a video on click of a button.Below is the code used for that,but the image shows only the bottom part of the video that is the play and progress with the time passed..I have used MPMoviePlayerController for the video to play.
CGRect rect = [_moviePlayer.view bounds];
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[_moviePlayer.view.layer renderInContext:context];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, 100, 100)];
[imgView setImage:image];
imgView.layer.borderWidth = 2.0;
[_firstimage addSubview:imgView];
NSURL *url=[NSURL URLWithString:#"http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"];
this is how it shows..How can i get the video image? Can anybody help me..
How about using [MPMoviePlayerController requestThumbnailImagesAtTimes: timeOption:]?
CGImageRef originalImage = UIGetScreenImage();
CGImageRef videoImage = CGImageCreateWithImageInRect(originalImage, CGRectMake(0, 0, 680, 300));
UIImage *snapShotImage = [UIImage imageWithCGImage:videoImage];
UIImageWriteToSavedPhotosAlbum(snapShotImage, nil, nil, nil);
CGImageRelease(originalImage);
CGImageRelease(videoImage);
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 100, 250, 200)];
[imgView setImage:snapShotImage];
imgView.layer.borderWidth = 2.0;
[_firstimage addSubview:imgView];
this code works...thanks for the help...

Showing only a portion of the original image in a UIImageView

How can i show only a portion of the original image in a UIImageView
This question may be very familiar and old, But the reason for asking again is,i could not find a workable idea with the help of those answers
Many said set image.contentMode = UIViewContentModeCenter; (but not working)
I need almost a rectangle containing the center of the original image,How do I get this ?
I do make this working,when i am displaying a static image to my app and setting Content mode of UIImageVie as Aspect Fill.
But this is not workable in the case when i am displaying an image from url and using NSData
Adding my code and the images
NSString *weburl = #"http://topnews.in/files/Sachin-Tendulkar_15.jpg";
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 50, 108, 86)];
NSURL *url = [NSURL URLWithString:weburl];
NSData *data = [NSData dataWithContentsOfURL:url];
imageView.image = [UIImage imageWithData:data];
[self.view addSubview:imageView];
If you added the UIImageView form XIB, you can find a "mode" property there and then you can see and set different modes from there (from Interface builder). Or by programatically, you can set different modes by
imageView.contentMode = UIViewContentModeCenter;
imageView.clipsToBounds = YES;
Try this:
self.imageView.layer.contentsRect = CGRectMake(0.25, 0.25, 0.5, 0.5);
self.imageView will display middle part of image. You can calculate itself the required values of CGRect ​
For this kind of output, you need to crop the image according to your requirement.
Cropping code as below which can be used.
-(UIImage *) CropImageFromTop:(UIImage *)image
{
CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], CGRectMake(0, 12, image.size.width, image.size.height - 12));
UIImage *cropimage = [[[UIImage alloc] initWithCGImage:imageRef] autorelease];
CGImageRelease(imageRef);
return cropimage;
}
you try to scale image and then add image in UiImageView and set center that image then it is in center. code of scale image is
-(UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize{
UIGraphicsBeginImageContext(newSize);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
then you set the center of that image and add in the image view i hope this is work

changing uinavigationBar multiple background iOS 4.3

i used to use the code below to change the UINavigationBar Background :
the CODE:
- (void) drawRect:(CGRect)rect
{
UIImage *image = [UIImage imageNamed:#"NavBar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
so now i need more than one background NavBar2.png ....
how to achieve this ?
Thanks
Try this code.
- (void) drawRect:(CGRect)rect
{
if(navigationBar.tag == 0){
UIImage *image = [UIImage imageNamed:#"NavBar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
else if(navigationBar.tag == 1)
UIImage *image = [UIImage imageNamed:#"NavBar1.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
}
Tag logic mentioned by R.A. would definitely help you.
If you are developing an app on iOS5, then you can also take a look at :
- (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics
I solve it by using my original code as image background then put titleView for the navigation bar
UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 165, 44)];
UIImageView *imgv = [[UIImageView alloc] initWithFrame:aView.frame];
imgv.image = [UIImage imageNamed:#"NavBar01.png"];
[aView addSubview:imgv];
self.navigationController.navigationBar.topItem.titleView = aView;
[aView release];
[imgv release];

Trying to display images using UIScrollView

I want to create an simple app that will contain one centered image at the first start screen, than upon swipe gesture(right, left) change images.
I'm very new to this so here is what I though is what I'm looking for http://idevzilla.com/2010/09/16/uiscrollview-a-really-simple-tutorial/ .
This is the code I have in my controller implementation :
- (void)viewDidLoad
{
[super viewDidLoad];
NSMutableDictionary *myDictionary = [[NSMutableDictionary alloc] init];
[myDictionary setObject:#"img1.jpg" forKey:#"http://www.testweb.com"];
[myDictionary setObject:#"img2.jpg" forKey:#"http://www.test2.com"];
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scroll.pagingEnabled = YES;
NSInteger numberOfViews = [myDictionary count];
for (NSString* key in myDictionary) {
UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:[myDictionary objectForKey:key]]];
CGRect rect = CGRectMake(10.0f, 90.0f, image.size.width, image.size.height);
UIImageView * imageView = [[UIImageView alloc] initWithFrame:rect];
[imageView setImage:image];
CGPoint superCenter = CGPointMake([self.view bounds].size.width / 2.0, [self.view bounds].size.height / 2.0);
[imageView setCenter:superCenter];
self.view.backgroundColor = [UIColor whiteColor];
[scroll addSubview:imageView];
}
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:scroll];
}
My first issue here is that I get img2 on my initial screen instead of img1. And second issue is when I swipe right I get white screen and no image on it. Any suggestions what I missed, what I can try/read etc?
EDIT :
I'm looking to do this the "lightest" possible way, using no fancy galleries api etc. Just display couple of really small images(i.e 200x200 px) centered on the screen that I can swipe back and forth(should't be too hard). Well everything is hard when learning a new language.
There is a project on github MWPhotoBrowser that allows you to put in a set of images which are viewed one at a time. You can then scroll from one image to the next with a swipe gesture. It is also easy to add functionality and it should give you a good understanding of how this is done. There is also Apple's PhotoScroller example which gives you straight forward code in how to do this same thing and also tile your images. Since you are new to iOS you may want to first look at both of these examples or possibly just use them as your photo viewer.
Your problem is likely to be the fact that you are setting CGRect rect = CGRectMake(10.0f, 90.0f, image.size.width, image.size.height); for both of your image views. This means that both of your UIImageView objects are placed in exactly the same position (both are positioned at 10.f on the x-coordinate of the scrollview). As the second image view is added last it covers the first and means that there is white space to the right of it.
In order to fix this you could try something like...
- (void)viewDidLoad
{
//your setup code
float xPosition = 10.f;
for (NSString* key in myDictionary) {
UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:[myDictionary objectForKey:key]]];
CGRect rect = CGRectMake(xPosition, 90.0f, image.size.width, image.size.height);
xPosition += image.size.width;
//rest of your code...
}
//rest of your code
}
The above would mean that the second view is positioned on the x-coordinate at 10 + the width of the first image. Note that I haven't tested my answer.
First off the images are placed on top of each other.
CGPoint superCenter = CGPointMake([self.view bounds].size.width / 2.0, [self.view bounds].size.height / 2.0);
[imageView setCenter:superCenter];
Right here you are setting both images to be placed at the center of the screen. The second thing is your using an NSDictionary and looping through the keys. NSDictionary are not orders like an array is. You would have to sort the keys to us it in a specific order. So Barjavel had it right but skipped over the fact your setting the images to center. Try this:
- (void)viewDidLoad
{
[super viewDidLoad];
NSArray *myArray = [[NSArray alloc] initWithObjects:#"img1.jpg", #:image2.jpg", nil];
UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scroll.pagingEnabled = YES;
NSInteger numberOfViews = [myArray count];
int xPosition = 0;
for (NSString* image in myArray) {
UIImage * image = [UIImage imageNamed:image];
CGRect rect = CGRectMake(xPosition, 90.0f, image.size.width, image.size.height);
UIImageView * imageView = [[UIImageView alloc] initWithFrame:rect];
[imageView setImage:image];
self.view.backgroundColor = [UIColor whiteColor];
[scroll addSubview:imageView];
xPosition += image.size.width;
}
scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:scroll];
}