drawRect inverts imageView in iPhone (Simulator)

Question

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. inverted

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];
}

score 2 · Answer 1 · answered Nov 21 '12 at 07:03

2

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.

answered Nov 21 '12 at 07:03

Saurabh Passolia

8,099
1
26
41

are these two different ways or one way having 2 steps? – Vjlakshmi Nov 21 '12 at 07:41
I am using UIKit and I am getting pixel values in refernce to topleft.. so I need not make any changes right? – Vjlakshmi Nov 21 '12 at 07:58
no actually you have to when you are drawing in drawrect using CGContextRef as there u are using CoreGraphics - CG - refers to CoreGraphics – Saurabh Passolia Nov 21 '12 at 09:14
Can you help me with code sinppnet? I am not able to achieve it – Vjlakshmi Nov 21 '12 at 12:31

score 0 · Accepted Answer · answered Aug 07 '13 at 05:46

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.

drawRect inverts imageView in iPhone (Simulator)

2 Answers2