drawRect inverts imageView in iPhone (Simulator) - iphone

I have seen this and this but it doesn't clear my doubt.
I have a custom imageView class, a subclass basically. where I need to add sub image views on a UIView at particular pixel values. When I draw these images using custom imageview (draw rect) my images are inverted.
Please help as to what is the change I need to do in my frame so that image is not inverted.
Below is the image.
CustomImageView.m
#implementation CustomImageView
#synthesize customImage;
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
// Initialization code.
}
return self;
}
- (void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, rect, customImage.CGImage);
[super drawRect:rect];
}
- (void)dealloc {
[customImage release];
[super dealloc];
}
#end
CustomImageView.h
#interface CustomImageView : UIView
{
}
#property(nonatomic,retain)UIImage *customImage;
#end
I am using this as below
-(void)drawArrowImagewithStartX:(CGFloat)X1 startY:(CGFloat)Y1 andEndX:(CGFloat)X2 endY:(CGFloat)Y2
{
CustomImageView *arrowImageView = [[CustomImageView alloc] initWithFrame:CGRectZero];
CGRect startPointFrame = CGRectZero;
CGRect endPointFrame = CGRectZero;
CGFloat arrowWidth = 0.0;
CGFloat arrowHeight = 0.0;
CGFloat y1 = -(Y1+194.0);
CGFloat y2 = -(Y1+194.0);
if (isMapZoomed) {
startPointFrame = CGRectMake(X1, Y1, 16.0, 16.0);
endPointFrame = CGRectMake(X2, Y2, 16.0, 16.0);
arrowWidth = 5.0;
arrowHeight = 25.0;
}
else {
startPointFrame = CGRectMake(X1, y1, 8.0, 8.0);
endPointFrame = CGRectMake(X2, y2, 8.0, 8.0);
arrowWidth = 10.0;
arrowHeight = 50.0;
}
CustomImageView *startImageView = [[CustomImageView alloc] initWithFrame:CGRectZero];
startImageView.frame = startPointFrame;
if (stepNo == 0)
startImageView.customImage = [UIImage imageNamed:KStartFlag];
else
startImageView.customImage = [UIImage imageNamed:KStartPoint];
CustomImageView *endImageView = [[CustomImageView alloc] initWithFrame:CGRectZero];
endImageView.frame = endPointFrame;
if (stepNo == ([self.allPOIDetailsArray count]-1))
endImageView.customImage = [UIImage imageNamed:KEndFlag];
else
endImageView.customImage = [UIImage imageNamed:KEndPoint];
if(X1 == X2){
if (y1 > y2){
arrowImageView.frame = CGRectMake(X2, (y1-(y1-y2)/2), arrowWidth, arrowHeight);
arrowImageView.customImage =[UIImage imageNamed:KArrowUp];
}
else{
arrowImageView.frame = CGRectMake(X1, (y1+(y2-y1)/2), 5.0, 25.0);
arrowImageView.customImage =[UIImage imageNamed:KArrowDown];
}
}
else {
if (X1 > X2) {
arrowImageView.frame = CGRectMake((X1-(X1-X2)/2), y2, 25.0, 5.0);
arrowImageView.customImage = [UIImage imageNamed:KArrowLeft];
}
else{
arrowImageView.frame = CGRectMake((X1+(X2-X1)/2), y1, 25.0, 5.0);
arrowImageView.customImage = [UIImage imageNamed:KArrowRight];
}
}
for(UIView *subvw in self.zoomingView.subviews)
if ([subvw isKindOfClass:[UIImageView class]]) {
for (UIView *subview in subvw.subviews)
[subview removeFromSuperview];
[subvw addSubview:startImageView];
[subvw addSubview:endImageView];
[subvw addSubview:arrowImageView];
NSLog(#"Subview frame %#",NSStringFromCGRect(subvw.frame));
NSLog(#"\n\nImage frame %# %#",NSStringFromCGRect(arrowImageView.frame),NSStringFromCGRect(startImageView.frame));
}
[arrowImageView release];
[startImageView release];
[endImageView release];
}

yes it is the normal behavior.
Uikit topleft corner coordinate (0,0)
OpenGL/CoreGraphics bottomleft coordinate (0,0)
and hence ur image appear to be inverted.
you can fix this by:
Moving origin up by the view's height.
Negate (multiply by -1)
the y axis.

Best of both worlds, use UIImage's drawAtPoint: or drawInRect: while still specifying your custom context:
UIGraphicsPushContext(context);
[image drawAtPoint:CGPointZero];
UIGraphicsPopContext();
Also you void modifying your context with CGContextTranslateCTM or CGContextScaleCTM.

Related

Pinch Zoom on Two ImageViews in Single ScrollView on IOS

I am doing a project in which i need two imageviews in single Scrollview with zooming options. UIScrollView allows one view to make zoom easily. But my problem is not like that. I have two imageviews side by side in the scroll view.When I try to zoom the images its not working Is there is any option to zoom two image views at the same time.Please suggest me some idea.
Thanks in advance
Here is code for Zooming two images in single scrollview
I have added two UIImageView's in One UIView and then I have added the UIView to UIScrollView. Following is my code :
- (void)viewDidLoad {
[super viewDidLoad];
self.vwImages = [[UIView alloc]initWithFrame:CGRectMake(0, 0,100,200)];
// 1
UIImage *image = [UIImage imageNamed:#"imgBaskteBall2.jpeg"];
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:image];
imageView1.frame = CGRectMake(0,0,100,100);
[self.vwImages addSubview:imageView1];
UIImage *image2 = [UIImage imageNamed:#"imgBaskteBall1.jpeg"];
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image2];
imageView2.frame = CGRectMake(0, 100, 100, 100);
[self.vwImages addSubview:imageView2];
// 2
[self.scrollView addSubview:self.vwImages];
self.scrollView.contentSize = self.vwImages.frame.size;
// 3
UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(scrollViewDoubleTapped:)];
doubleTapRecognizer.numberOfTapsRequired = 2;
doubleTapRecognizer.numberOfTouchesRequired = 1;
[self.scrollView addGestureRecognizer:doubleTapRecognizer];
UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(scrollViewTwoFingerTapped:)];
twoFingerTapRecognizer.numberOfTapsRequired = 1;
twoFingerTapRecognizer.numberOfTouchesRequired = 2;
[self.scrollView addGestureRecognizer:twoFingerTapRecognizer];
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// 4
CGRect scrollViewFrame = self.scrollView.frame;
CGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.width;
CGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.height;
CGFloat minScale = MIN(scaleWidth, scaleHeight);
self.scrollView.minimumZoomScale = minScale;
// 5
self.scrollView.maximumZoomScale = 10.0f;
self.scrollView.zoomScale = minScale;
// 6
[self centerScrollViewContents];
}
- (void)centerScrollViewContents {
CGSize boundsSize = self.scrollView.bounds.size;
CGRect contentsFrame = self.vwImages.frame;
if (contentsFrame.size.width < boundsSize.width) {
contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
} else {
contentsFrame.origin.x = 0.0f;
}
if (contentsFrame.size.height < boundsSize.height) {
contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
} else {
contentsFrame.origin.y = 0.0f;
}
self.vwImages.frame = contentsFrame;
}
- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {
// 1
CGPoint pointInView = [recognizer locationInView:self.imageView];
// 2
CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f;
newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale);
// 3
CGSize scrollViewSize = self.scrollView.bounds.size;
CGFloat w = scrollViewSize.width / newZoomScale;
CGFloat h = scrollViewSize.height / newZoomScale;
CGFloat x = pointInView.x - (w / 2.0f);
CGFloat y = pointInView.y - (h / 2.0f);
CGRect rectToZoomTo = CGRectMake(x, y, w, h);
// 4
[self.scrollView zoomToRect:rectToZoomTo animated:YES];
}
- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {
// Zoom out slightly, capping at the minimum zoom scale specified by the scroll view
CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f;
newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale);
[self.scrollView setZoomScale:newZoomScale animated:YES];
}
- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {
// Return the view that you want to zoom
return self.vwImages;
}
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
// The scroll view has zoomed, so you need to re-center the contents
[self centerScrollViewContents];
}
Make object of UIView as container for example viewContainer
[viewContainer addSubView:imageView1];
[viewContainer addSubView:imageView2];
[scrollView addSubView:viewContainer];
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return viewContainer;
}
Add
You can use this
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return [self.scrollView.subviews objectAtIndex:0];
}
the viewForZoomingInScrollView delegate method return the object at Index 0.
From Properly zooming a UIScrollView that contains many subviews
add both the imageView in the view and replace this method
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return view;
}

Position UILabel in circle

I want to position a UILabel in the center of my Circle but I can't seem to affect the position of the label. I can only seem to affect the position of the label by changing the height of CGRect frame. changing the other values doesn't affect the position at all.
here's my Circle.m code
- (id)initWithFrame:(CGRect)frame radius:(CGFloat)aRadius color:(UIColor*) aColor {
self = [super initWithFrame:frame];
if (self) {
self.opaque = NO;
[self setRadius:aRadius];
[self setColor:aColor];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
NSString *string = #"1";
UIFont* font = [UIFont systemFontOfSize:80];
UILabel *label = [[UILabel alloc] init];
label.text = string;
label.textColor = [UIColor whiteColor];
label.font = font;
CGRect frame = label.frame;
frame = CGRectMake(10, 10, 0, 85);
label.frame = frame;
CGContextRef contextRef = UIGraphicsGetCurrentContext();
[color setFill];
circle = CGRectMake(0, 0, radius, radius);
CGContextAddEllipseInRect(contextRef, circle);
CGContextDrawPath (contextRef, kCGPathFill);
[label drawRect:circle];
}
and my viewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
CGFloat radius = 70;
CGRect position = CGRectMake(0, 0, radius, radius);
Circle *myCircle = [[Circle alloc] initWithFrame:position radius:radius color:[UIColor redColor]];
[self.view addSubview:myCircle];
}
You should not be allocating new UIViews in drawRect: (and UILabel is a subclass of UIView). There are a few good ways of doing what you want, but none of them involve allocating a new UILabel in drawRect:.
One way is to make your Circle give itself a UILabel subview in its initializer, and center the label in layoutSubviews. Then in drawRect:, you just draw the circle and don't worry about drawing the label's text:
#implementation Circle {
UILabel *_label;
}
#synthesize radius = _radius;
#synthesize color = _color;
- (id)initWithFrame:(CGRect)frame radius:(CGFloat)aRadius color:(UIColor*) aColor {
self = [super initWithFrame:frame];
if (self) {
self.opaque = NO;
[self setRadius:aRadius];
[self setColor:aColor];
_label = [[UILabel alloc] init];
_label.font = [UIFont systemFontOfSize:80];
_label.textColor = [UIColor whiteColor];
_label.text = #"1";
[_label sizeToFit];
[self addSubview:_label];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
CGSize mySize = self.bounds.size;
_label.center = CGPointMake(mySize.width * 0.5f, mySize.height * 0.5f);
}
- (void)drawRect:(CGRect)rect {
[self.color setFill];
CGSize mySize = self.bounds.size;
CGFloat radius = self.radius;
[[UIBezierPath bezierPathWithOvalInRect:CGRectMake(mySize.width * 0.5f, mySize.height * 0.5f, self.radius, self.radius)] fill];
}

Animating a UIImageView

I am trying to animate my UIImageView so that it animates from height x to height y and I have the following code:
- (void)viewDidLoad
{
[super viewDidLoad];
self.test = [self createNewBarWithValue:800 atLocation:CGPointMake(107, 43)];
}
- (UIImageView*)createNewBarWithValue:(float)percent atLocation:(CGPoint)location
{
UIImageView *newBar = [[[UIImageView alloc] initWithFrame:CGRectMake(location.x, location.y, 107, 43)] autorelease];
newBar.image = [UIImage imageNamed:#"bar.png"];
CABasicAnimation *scaleToValue = [CABasicAnimation animationWithKeyPath:#"transform.scale.y"];
scaleToValue.toValue = [NSNumber numberWithFloat:percent];
scaleToValue.fromValue = [NSNumber numberWithFloat:0];
scaleToValue.duration = 1.0f;
scaleToValue.delegate = self;
newBar.layer.anchorPoint = CGPointMake(0.5, 1);
[newBar.layer addAnimation:scaleToValue forKey:#"scaleUp"];
CGAffineTransform scaleTo = CGAffineTransformMakeScale( 1.0f, percent );
newBar.transform = scaleTo;
return newBar;
}
However, I am not seeing anything here. What am I missing?
It doesn't appear you add the UIImageView to your view controller's view.
e.x.
[self.view addSubview:test];

PDF and zoom - CATiledLayer

I have a problem, I'm not a programmer but I try to do some app for fun.
I try to create a pdf viewer, I create a UIView class like this:
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:(CGRect)frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
NSString *pathToPdfDoc = [[NSBundle mainBundle] pathForResource:#"myPDF" ofType:#"pdf"];
NSURL *pdfUrl = [NSURL fileURLWithPath:pathToPdfDoc];
document = CGPDFDocumentCreateWithURL((CFURLRef)pdfUrl);
currentPage = 1;
}
return self;
}
-(void)drawRect:(CGRect)inRect{
if(document) {
CGPDFPageRef page = CGPDFDocumentGetPage(document, currentPage);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextTranslateCTM(ctx, 0.0, [self bounds].size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextConcatCTM(ctx, CGPDFPageGetDrawingTransform(page, kCGPDFCropBox, [self bounds], 0, true));
CGContextDrawPDFPage(ctx, page);
CGContextRestoreGState(ctx);
}
}
-(void)increasePageNumber {
size_t pageCount = CGPDFDocumentGetNumberOfPages(document);
if (currentPage == pageCount) {
// do nothing
}
else {
currentPage++;
[self setNeedsDisplay];
}
}
-(void)decreasePageNumber {
if (currentPage == 1) {
// do nothing
}
else {
currentPage--;
[self setNeedsDisplay];
}
}
now I try to add zoom but without luck, fro zoom I create a layer:
-(void)viewDidLoad {
CGRect frame;
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
frame = CGRectMake(0, 0, 960, 1024);
}
else{
frame = CGRectMake(0, 0, 320, 460);
}
tiledLayer = [CATiledLayer layer];
tiledLayer.delegate = self;
tiledLayer.tileSize = CGSizeMake(1024, 1024);
tiledLayer.levelsOfDetail = 200;
tiledLayer.levelsOfDetailBias = 200;
tiledLayer.frame = frame;
myPDFView = [[viewPDF alloc] initWithFrame:frame];
//[self.view addSubview:myPDFView];
[myPDFView.layer addSublayer:tiledLayer];
CGRect viewFrame = self.view.frame;
viewFrame.origin = CGPointZero;
scrollView = [[UIScrollView alloc] initWithFrame:viewFrame];
scrollView.delegate = self;
scrollView.contentSize = frame.size;
scrollView.maximumZoomScale = 5;
[scrollView addSubview:myPDFView];
[self.view addSubview:scrollView];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return myPDFView;
}
EDIT: the zoom work, I use shouldAutorotateToInterfaceOrientation that was the problem (I need to rewrite some code), now it work BUT when I zoom quality worsens. :(

How to Zoom out an image with keeping it in a center of the Scrollview

In my application i need to capture an image with cam and then pass it to the imageView, which is used as a subView for a ScrollView.
The requirement is "the image must facilitate 1/4th size for zoom out and 3 times the size for zoom in".
Now the problem is that when i zoom out this image the image zooms out, but it doesn't hold its position in the center. it sets its position respective to the touches of finger.
(No double tap zooming is there, and not required too)
Below is the code..,
- (void)viewDidLoad
{
[super viewDidLoad];
UIImage* tmpImage = nil;
tmpImage = [roomImage resizedImage:imageScrollView.frame.size interpolationQuality:0];
imageView = [[UIImageView alloc] initWithImage:tmpImage];
imageView.contentMode = UIViewContentModeScaleAspectFit;
imageScrollView.delegate = self;
imageScrollView.canCancelContentTouches = NO;
imageScrollView.minimumZoomScale = 0.25;
imageScrollView.maximumZoomScale = 3.00;
imageScrollView.clipsToBounds = YES;
[imageView sizeToFit];
[imageScrollView addSubview:imageView];
imageScrollView.contentSize = imageView.frame.size;
imageScrollView.contentMode = UIViewContentModeScaleAspectFit;
imageScrollView.contentOffset = CGPointMake(imageScrollView.frame.size.width/2, imageScrollView.frame.size.height/2);
imageScrollView.autoresizesSubviews = YES;
imageScrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin |
UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin;
CGFloat f,x,y;
if(tmpImage.size.height > tmpImage.size.width)
{
f = (imageScrollView.frame.size.height/tmpImage.size.height);
}
else
{
f = (imageScrollView.frame.size.width/tmpImage.size.width);
}
x = (imageScrollView.frame.size.width - tmpImage.size.width*f)/2;
y = (imageScrollView.frame.size.height - tmpImage.size.height*f)/2;
imageView.bounds = CGRectMake(x, y,tmpImage.size.width, tmpImage.size.height);
[imageView setNeedsDisplay];
[imageScrollView setZoomScale:f animated:YES];
[imageScrollView setNeedsDisplay];
jpgPath = nil;
[roomImage release];
roomImage = nil;
}
Hope any one can help me out..,
Thanks in advance..,
If I'm understanding you correctly you could subclass the UIScrollView and have something like the following in the layoutSubviews method to keep it's contents centred:
-(void)layoutSubviews {
[super layoutSubviews];
CGSize boundsSize = self.bounds.size;
CGRect contentViewFrame = contentView.frame;
if (contentViewFrame.size.width < boundsSize.width) {
contentViewFrame.origin.x = (boundsSize.width - contentViewFrame.size.width) / 2;
} else {
contentViewFrame.origin.x = 0;
}
if (contentViewFrame.size.height < boundsSize.height) {
contentViewFrame.origin.y = (boundsSize.height - contentViewFrame.size.height) / 2;
} else {
contentViewFrame.origin.y = 0;
}
contentView.frame = contentViewFrame;
}
The contentView variable is an iVar which represents in you case the imageView you want inside the scrollView. Hope this helps :-)