iOS UIImageView expands when drawing starts

Bayan · Nov 9, 2012

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

Code:

- (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

Code:

- (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

Code:

- (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

Code:

- (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

Code:

- (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 · Nov 9, 2012

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 · Nov 13, 2012

PhoneyDeveloper said:
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

Code:

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

PhoneyDeveloper · Nov 13, 2012

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 · Nov 15, 2012

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

What do you mean by that?

PhoneyDeveloper · Nov 16, 2012

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.

Search

Search

iOS UIImageView expands when drawing starts

Bayan

macrumors newbie

PhoneyDeveloper

macrumors 68040

Bayan

macrumors newbie

PhoneyDeveloper

macrumors 68040

Bayan

macrumors newbie

PhoneyDeveloper

macrumors 68040

Our Staff