How do I add an overlay (UIImageView
) to the camera preview and
handle touches on this?
My previous attempts to do this (e.g. use UIImagePickerController
and add the image as a subview) have failed.
How do I add an overlay (UIImageView
) to the camera preview and
handle touches on this?
My previous attempts to do this (e.g. use UIImagePickerController
and add the image as a subview) have failed.
This tutorial explains it: http://www.musicalgeometry.com/?p=821
Just add a UIImage in the overlay view instead of the red area shown in the tutorial.
For your implementation file:
- (IBAction)TakePicture:(id)sender {
// Create image picker controller
UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
// Set source to the camera
imagePicker.sourceType = UIImagePickerControllerSourceTypeCamera;
// Delegate is self
imagePicker.delegate = self;
OverlayView *overlay = [[OverlayView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
// Insert the overlay:
imagePicker.cameraOverlayView = overlay;
// Allow editing of image ?
imagePicker.allowsImageEditing = YES;
[imagePicker setCameraDevice:
UIImagePickerControllerCameraDeviceFront];
[imagePicker setAllowsEditing:YES];
imagePicker.showsCameraControls=YES;
imagePicker.navigationBarHidden=YES;
imagePicker.toolbarHidden=YES;
imagePicker.wantsFullScreenLayout=YES;
self.library = [[ALAssetsLibrary alloc] init];
// Show image picker
[self presentModalViewController:imagePicker animated:YES];
}
Make a UIView class and add this code
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
// Clear the background of the overlay:
self.opaque = NO;
self.backgroundColor = [UIColor clearColor];
// Load the image to show in the overlay:
UIImage *overlayGraphic = [UIImage imageNamed:@"overlaygraphic.png"];
UIImageView *overlayGraphicView = [[UIImageView alloc] initWithImage:overlayGraphic];
overlayGraphicView.frame = CGRectMake(30, 100, 260, 200);
[self addSubview:overlayGraphicView];
}
return self;
}
You may be able to add the UIImageView
as a subview of the main window directly instead of the UIImagePicker
, it may work better. Just make sure to add them in the right order, or call
[window bringSubviewToFront:imageView];
after the camera is up.
If you want to handle touches on the UIImageView
you could just add the UIImageView
as a subview of a normal fullscreen View
with a transparent background, and add that to the window instead, with a normal UIViewController
subclass that you can use to handle the touch events.
See the camera overlay view (available in 3.1 and later)
@property(nonatomic, retain) UIView *cameraOverlayView