UIImage which follow touches

Question

I'm trying to draw a ruller which follow the touches on the screen. On the first touch, I set the first point and on all the other, the ruller follow the finger on ther screen resizing and rotating around the first point depending on where the finger is.

I tried to do this :

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint p = [touch locationInView:self.view];

    self.regleFirstPoint = p;
    UIImageView* img = [[UIImageView alloc] initWithImage:self.regleImg];
    img.frame = CGRectMake(self.regleFirstPoint.x, self.regleFirstPoint.y, 0, self.regleImg.size.height);
    [self.view addSubview:img];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint p = [touch locationInView:self.view];

    // Width
    float deltaY = p.y - self.regleFirstPoint.y;
    float deltaX = p.x - self.regleFirstPoint.x;
    float width = sqrt((deltaX * deltaX) + (deltaY * deltaY));

    // Angle
    float angleInRadians = atanf(deltaY / deltaX);
    float angleInDegrees = angleInRadians * 180 / M_PI; // JUST FOR INFO
    NSLog(@"angle : %f / %f", angleInRadians, angleInDegrees);

    // Resizing image
    UIImageView* img = [self.regles lastObject];
    img.frame = CGRectMake(self.regleFirstPoint.x, self.regleFirstPoint.y, width, self.regleImg.size.height/2);
    img.center = self.regleFirstPoint;
    CGAffineTransform transform = CGAffineTransformIdentity;
    img.transform = CGAffineTransformRotate(transform, angleInRadians);
}

The ruller doesn't follow the finger correctly, I think I missed something. What's wrong with my code ?

EDIT : I also tried this after some researches :

// Resizing images
img.frame = CGRectMake(self.regleFirstPoint.x, self.regleFirstPoint.y, largeur, self.regleImg.size.height/2);
[img.layer setAnchorPoint:CGPointMake(self.regleFirstPoint.x / img.bounds.size.width, self.regleFirstPoint.y / img.bounds.size.height)];
img.transform = CGAffineTransformRotate(img.transform, angleInRadians);

Answer 1

This is just a question of order:

1. Set transform of your view to identity
2. Change the frame of your view
3. Finally, apply your transform

Here is an updated piece of code, just used an UIView instead of your image:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];

    // Hold first touch
    self.regleFirstPoint = [touch locationInView:self.view];

    // Reset view / image
    _rulerView.transform = CGAffineTransformIdentity;
    _rulerView.frame = CGRectMake(self.regleFirstPoint.x, self.regleFirstPoint.y, 0, CGRectGetHeight(_rulerView.frame));
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint p = [touch locationInView:self.view];

    // Compute width
    float deltaX = p.x - self.regleFirstPoint.x;
    float deltaY = p.y - self.regleFirstPoint.y;
    float width = sqrt((deltaX * deltaX) + (deltaY * deltaY));

    // Compute angle
    float angleInRadians = atan2(deltaY, deltaX);
    NSLog(@"angle (rad) : %f", angleInRadians);
    NSLog(@"angle (deg) : %f", angleInRadians * 180 / M_PI);

    // First reset the transformation to identity
    _rulerView.transform = CGAffineTransformIdentity;

    // Set anchor point
    _rulerView.layer.anchorPoint = CGPointMake(0.0f, 0.5f);

    // Resizing view / image
    _rulerView.frame = CGRectMake(self.regleFirstPoint.x, self.regleFirstPoint.y, width, CGRectGetHeight(_rulerView.frame));

    // Reset the layer position to the first point
    _rulerView.layer.position = self.regleFirstPoint;

    // Apply rotation transformation
    _rulerView.transform = CGAffineTransformMakeRotation(angleInRadians);
}

Hope that helps.

Cyril