UIImageView expands when drawing starts

[Bayan]

I have a UIImageView with AspectFit mode and an image that the user chooses to draw on. The UIImageView is a subview of a UIScrollView. My problem is that once I start drawing (finger drawing) the image expands. I don't want that to happen, how can I keep the image as it's original size?

Before drawing:


After drawing:


Code:
touchBegan

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
if (!clear)
{
UITouch *touch1 = [[touches allObjects] objectAtIndex:0];
int c = [[touches allObjects] count];
if(c==1)
{
UITouch *touch = [touches anyObject];
lastPoint = [touch locationInView:imageView];
point = CGPointMake(endPoint.x, endPoint.y);
startPoint = [[touches anyObject] locationInView:imageView];
if (((count==2)||(count==4)||(count==6)||(count==8)||(count==10)||(count==12)||(count==14)||(count==16)||(count==18)||(count==20)||(count==22)||(count==24)) && line != 2)
{
point = startPoint;
even = FALSE;
}
else
even = TRUE;
if (done)
{
count++;
CGPoint p;
p.x = startPoint.x / scrollView.zoomScale;
p.y = startPoint.y / scrollView.zoomScale;
[NDots addObject:[NSValue valueWithCGPoint:p]];
[ZDots addObject:[NSString stringWithFormat:@"%f", scrollView.zoomScale]];
}
else line++;
}
else if(c==2)
{
UITouch *touch2 = [[touches allObjects] objectAtIndex:1];
initialDist = [self distanceBetweenTwoPoints:[touch1 locationInView:imageView] toPoint:[touch2 locationInView:imageView]];
initialFrame = imageView.frame;
}
}
}

touchMoved

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch1 = [[touches allObjects] objectAtIndex:0];

if([[touches allObjects] count]==2)
{
    UITouch *touch2 = [[touches allObjects] objectAtIndex:1];
    CGFloat current = [self distanceBetweenTwoPoints:[touch1 locationInView:imageView] toPoint:[touch2 locationInView:imageView]];
    currentZoom = current/initialDist;
    CGRect frame = imageView.frame;
    frame.size.height = initialFrame.size.height*currentZoom;
    frame.size.width = initialFrame.size.width*currentZoom;
    frame.origin.x = initialFrame.origin.x - (frame.size.width - initialFrame.size.width)/2;
    frame.origin.y = initialFrame.origin.y - (frame.size.height - initialFrame.size.height)/2;
    imageView.frame = frame;
}
}

touchEnded

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
imageView.contentMode = UIViewContentModeScaleAspectFit;
if (!clear)
{
    /* double tap ? => clear drawing
     UITouch *touch = [touches anyObject];
     if ([touch tapCount] == 2)
     {
     [self clear];
     return;
     }*/


    UITouch *theTouch = [touches anyObject];
    lastPoint = [[touches anyObject] locationInView:imageView];

    if (theTouch.tapCount == 1) 
    {
        endPoint = [[touches anyObject] locationInView:imageView];
        if (!done)
        {
            if (line == 1)
            {
                [self drawLineFrom:endPoint To:endPoint];
                NSLog(@"draw point");
            }
            else if (line == 2)
            {
                [self drawLineFrom:endPoint To:endPoint];
                [self drawLineFrom:point To:endPoint];
                cc = [self distanceBetweenTwoPoints:point toPoint:startPoint];
                warning = TRUE;
                return;
            }
            if (warning)
            {
                    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Warning" message:@"You have already marked the intermolar width" 
                                                                   delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
                    [alert show];
            }
        }
        else
        {
            endPoint.x = endPoint.x * scrollView.zoomScale;
            endPoint.y = endPoint.y * scrollView.zoomScale;
            if ((count==2)||(count==4)||(count==6)||(count==8)||(count==10)||(count==12)||(count==14)||(count==16)||(count==18)||(count==20)||(count==22)||(count==24))
            {
                [self drawLineFrom:point To:endPoint];
            }
            else
            {
                if (count<24)
                {
                    [self drawLineFrom:endPoint To:endPoint];
                }
                else
                {
                    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Warning" message:@"You have already marked 12 teeth" 
                                                                   delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
                    [alert show];
                }
            }
        }
    }

    else if (theTouch.tapCount == 2) 
    {

    }
}
}

Distance

- (CGFloat)distanceBetweenTwoPoints:(CGPoint)fromPoint toPoint:(CGPoint)toPoint
{
float x = toPoint.x - fromPoint.x;
float y = toPoint.y - fromPoint.y;
return sqrt(x * x + y * y);
}

Drawing

- (void)drawLineFrom:(CGPoint)start To:(CGPoint)end
{
UIGraphicsBeginImageContext(imageView.frame.size);
[imageView.image drawInRect:CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height)];

CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.5f);
CGContextSetStrokeColorWithColor(UIGraphicsGetCurrentContext(), [UIColor colorWithRed:0.063 green:0.373 blue:0.584 alpha:1] .CGColor);
if (MolarMode) NSLog(@"drawline molarmode:");
if (clear && !MolarMode)
{
    for (int i=0; i < [NDots count]; i++)
    {
        NSLog(@"i %d ndots: %f", i, [[NDots objectAtIndex:i] CGPointValue].x);
        NSLog(@"i %d ndots: %f", i, [[NDots objectAtIndex:i] CGPointValue].y);
        NSLog(@"i+ %d ndots: %f", i+1, [[NDots objectAtIndex:i] CGPointValue].x);
        NSLog(@"i+ %d ndots: %f", i+1, [[NDots objectAtIndex:i] CGPointValue].y);
        CGContextMoveToPoint(UIGraphicsGetCurrentContext(), [[NDots objectAtIndex:i] CGPointValue].x * scrollView.zoomScale, [[NDots objectAtIndex:i] CGPointValue].y * scrollView.zoomScale);

        if (i == 0 || i == 2 || i == 4 || i == 6 || i == 8 || i == 10 || i == 12 || i == 14 || i == 16 || i == 18 || i == 20 || i == 22 || i == 24) 
        {
            if (i != [NDots count]-1)
            {
                CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), [[NDots objectAtIndex:i+1] CGPointValue].x* scrollView.zoomScale, [[NDots objectAtIndex:i+1] CGPointValue].y* scrollView.zoomScale);

                distance = [self distanceBetweenTwoPoints:[[NDots objectAtIndex:i] CGPointValue] toPoint:[[NDots objectAtIndex:i+1] CGPointValue]];
                sum = sum + distance;
            }
            else
            {
                CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), [[NDots objectAtIndex:i] CGPointValue].x* scrollView.zoomScale, [[NDots objectAtIndex:i] CGPointValue].y* scrollView.zoomScale);
            }
        }
        else
        {
            CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), [[NDots objectAtIndex:i] CGPointValue].x* scrollView.zoomScale, [[NDots objectAtIndex:i] CGPointValue].y* scrollView.zoomScale);
        }

        if (i == 2)
        {
            FMolar = distance;
        }
    }
    count = [NDots count];
}
else
{
    CGContextMoveToPoint(UIGraphicsGetCurrentContext(), start.x, start.y);

    CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), end.x, end.y);

    if ((count==2)||(count==4)||(count==6)||(count==8)||(count==10)||(count==12)||(count==14)||(count==16)||(count==18)||(count==20)||(count==22)||(count==24))
    {
        distance = [self distanceBetweenTwoPoints:start toPoint:end];
        sum = sum + distance;
        if (count == 2)
        {
            FMolar = distance;
        }
    }
}

CGContextStrokePath(UIGraphicsGetCurrentContext());
CGContextFlush(UIGraphicsGetCurrentContext());
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}

[PhoneyDeveloper]

Why don't you base the size of the image that you draw into on the size of the original image and not the frame of the imageView?

[Bayan]

Originally Posted by PhoneyDeveloper

Why don't you base the size of the image that you draw into on the size of the original image and not the frame of the imageView?

It worked thanks! one problem though, it messed up the location. When I touch the screen right above the eyebrows the dot is drawn at a different location, next to the nose.


http://tinypic.com/r/2w1sdgi/6

UIGraphicsBeginImageContext(imageView.image.size);
[imageView.image drawInRect:CGRectMake(0, 0, imageView.image.size.width, imageView.image.size.height)];

[PhoneyDeveloper]

Obviously the bounds of your image and the bounds of your imageView are different. If you make them the same things will work the way you expect. Otherwise you need to make some adjustments that probably won't be exactly correct.

[Bayan]

Originally Posted by PhoneyDeveloper

Otherwise you need to make some adjustments that probably won't be exactly correct.

What do you mean by that?

[PhoneyDeveloper]

If the imageView frame and the image bounds are different then you need to calculate the position in the image based on the position in the imagaView. You'll have to scale the position from one to the other. It will be simpler if the imageView and the image are the same size.