Move and rotate triangle with touch detect

Pavel Volobuev · 07-14-2011, 06:40 AM

Hello, i need help with next problem

I have UIImageView (square) with triangle picture.

1) When i touch to edge of UIImageView I should be able to rotate it.
How can i detect my touch in three different edges? (my picture is triangle)

2) And i need to rotate UIImageView and how can I detect area for rotate?
Don't forget about triangle. The center of the triangle is different from the center of the UIImageView.

I use this function to detect UIImageView area, but it's square area, not triangle.

Code:

- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event { 
    CGPoint location = [[touches anyObject] locationInView:self.view]; 
    CGPoint touchPoint = location; 
    CGRect rect = CGRectMake(self.triangle_1.center.x - 50, self.triangle_1.center.y - 50, 100, 100);

    if (CGRectContainsPoint(rect, touchPoint)) {
        point = 1;
    } else {
        point = 0;
    }
}

Duncan C · 07-17-2011, 09:57 PM

Quote:

Originally Posted by Pavel Volobuev

Hello, i need help with next problem

I have UIImageView (square) with triangle picture.

1) When i touch to edge of UIImageView I should be able to rotate it.
How can i detect my touch in three different edges? (my picture is triangle)

2) And i need to rotate UIImageView and how can I detect area for rotate?
Don't forget about triangle. The center of the triangle is different from the center of the UIImageView.

I use this function to detect UIImageView area, but it's square area, not triangle.

Code:

- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event { 
    CGPoint location = [[touches anyObject] locationInView:self.view]; 
    CGPoint touchPoint = location; 
    CGRect rect = CGRectMake(self.triangle_1.center.x - 50, self.triangle_1.center.y - 50, 100, 100);

    if (CGRectContainsPoint(rect, touchPoint)) {
        point = 1;
    } else {
        point = 0;
    }
}

I had to solve this exact problem for our company's (Mac) kaleidoscope application, ScopeWorks.

I did some searching on the web, and the trick is to see if the point you're testing is on the right or left of all 3 line segments of the triangle. Here's the code I came up with:

Code:

+ (BOOL) isRightHandTurnFromV1: (NSPoint) v1
                            v2: (NSPoint) v2
                            v3: (NSPoint) v3;
{
  CGFloat z;
  z = v1.x * (v2.y - v3.y) + v2.x * (v3.y - v1.y) + v3.x * (v1.y - v2.y);
  return signbit(z);
}

+(BOOL) pointInTriangle: (NSPoint) pointToTest 
  v1: (NSPoint) v1
  v2: (NSPoint) v2
  v3: (NSPoint) v3;
{
  BOOL direction1, direction2, direction3;
  direction1 = [Utils isRightHandTurnFromV1: v1 v2: v2 v3: pointToTest];
  direction2 = [Utils isRightHandTurnFromV1: v2 v2: v3 v3: pointToTest];
  direction3 = [Utils isRightHandTurnFromV1: v3 v2: v1 v3: pointToTest];
  return  (direction1 == direction2 && direction2 == direction3);   
}

That code is written for Mac OS, not iOS. It should be a simple matter of changing NSPoint to CGPoint to make it work for iOS though.

Figuring out the geometric center of a triangle is trivial. You just calculate the average x and y value of all 3 points.

Code:

(x1+x2+x3)/3, (y1+y2+y3)/3

Pavel Volobuev · 07-28-2011, 03:40 AM

Duncan C
Thanks a lot, it works perfectly!

Pavel Volobuev · 07-29-2011, 12:58 AM

As expected, I encountered with another problem.
I want to rotate my triangle, but center of my triangle isn't center of UIImageView. Picture here (triangle can be versatile):

I just to know how to rotate UIImageView, not triangle. Could you help with this?

Pavel Volobuev · 08-04-2011, 03:50 AM

Anybody knows? nobody?

Duncan C · 08-04-2011, 06:27 AM

Quote:

Originally Posted by Pavel Volobuev

As expected, I encountered with another problem.
I want to rotate my triangle, but center of my triangle isn't center of UIImageView. Picture here (triangle can be versatile):

I just to know how to rotate UIImageView, not triangle. Could you help with this?

You rotate the UIImageView, but need to change the center of rotation.

If you're rotating the image view by applying a rotation transform, you just need to shift the anchor point of the rotation.

What you do is first calculate the center of the triangle (in image coordinates, where 0,0 is the top right of the triangle)

Code:

CGFloat center_x = (point1.x + point2.x + point3.x) / 3;
CGFloat center_y = (point1.y + point2.y + point3.y) / 3;

Then you need to calculate where that point falls in your image as a value from 0 to 1 for height and width centerpoint.x = 0 at the left edge and = 1 at the right edge.. centerpoint.y = 0 at the top and 1 at the bottom.

Finally, you need to set the anchorpoint of the view's layer to that calculated centerpoint value (take a look at the anchorPoint property of CALayer for more info)

Now when you apply a rotation transform to the view's CALayer, it rotates around that anchor point instead of it's center.

Pavel Volobuev · 08-04-2011, 07:12 AM

Thanks again, i read Layer Geometry and Transforms. Good article for understanding this.

Duncan C · 08-04-2011, 07:45 AM

Quote:

Originally Posted by Pavel Volobuev

Thanks again, i read Layer Geometry and Transforms. Good article for understanding this.

I remember that article now. That's how I figured this out. Very clear, well written article.

Pavel Volobuev · 08-09-2011, 04:05 AM

Oohh guys, i can't solve my problem.
I attached my Test project file for you

TriangleTest.zip

What i did:
The triangle rotates for 10 degrees after every tap, but with a shift (its a problem).

What i need:
1) I need to rotate triangle without shifts after the tap to triangles edges (first of all without shifts, I now how to detect edges of triangle)
2) Move the triangle with the tap of center. (the problem here, when the triangle moves, all coordinates changed and my UIImageView stretches in all directions)

Could you help with this. From me beer)

Duncan C · 08-09-2011, 08:12 AM

Quote:

Originally Posted by Pavel Volobuev

Oohh guys, i can't solve my problem.
I attached my Test project file for you

TriangleTest.zip

What i did:
The triangle rotates for 10 degrees after every tap, but with a shift (its a problem).

What i need:
1) I need to rotate triangle without shifts after the tap to triangles edges (first of all without shifts, I now how to detect edges of triangle)
2) Move the triangle with the tap of center. (the problem here, when the triangle moves, all coordinates changed and my UIImageView stretches in all directions)

Could you help with this. From me beer)

So post the code.

Pavel Volobuev · 08-18-2011, 03:59 AM

Quote:

Originally Posted by Duncan C

So post the code.

Sorry for my 3-days lost.

I solve my problem, but not fully

You post this code for detect point in triangle

Code:

+ (BOOL) isRightHandTurnFromV1: (NSPoint) v1
                            v2: (NSPoint) v2
                            v3: (NSPoint) v3;
{
  CGFloat z;
  z = v1.x * (v2.y - v3.y) + v2.x * (v3.y - v1.y) + v3.x * (v1.y - v2.y);
  return signbit(z);
}

+(BOOL) pointInTriangle: (NSPoint) pointToTest 
  v1: (NSPoint) v1
  v2: (NSPoint) v2
  v3: (NSPoint) v3;
{
  BOOL direction1, direction2, direction3;
  direction1 = [Utils isRightHandTurnFromV1: v1 v2: v2 v3: pointToTest];
  direction2 = [Utils isRightHandTurnFromV1: v2 v2: v3 v3: pointToTest];
  direction3 = [Utils isRightHandTurnFromV1: v3 v2: v1 v3: pointToTest];
  return  (direction1 == direction2 && direction2 == direction3);   
}

How can i detect point in rectangle (maybe rhomb)? Detect point between four points.

I tried next

Code:

- (BOOL) isRightHandTurnFromV1: (CGPoint) v1
                            v2: (CGPoint) v2
                            v3: (CGPoint) v3
                            v4: (CGPoint) v4;
{
    CGFloat z;
    z = v1.x * (v2.y - v3.y - v4.y) + v2.x * (v3.y - v4.y - v1.y) + v3.x * (v4.y - v1.y - v2.y) + v4.x * (v1.y - v2.y - v3.y);
    return signbit(z);
}

- (BOOL) pointInTriangle: (CGPoint) pointToTest 
                      v1: (CGPoint) v1
                      v2: (CGPoint) v2
                      v3: (CGPoint) v3
                      v4: (CGPoint) v4;
{
    BOOL direction1, direction2, direction3, direction4;
    
    direction1 = [self isRightHandTurnFromV1:v1 v2:v2 v3:v3 v4:pointToTest];
    direction2 = [self isRightHandTurnFromV1:v2 v2:v3 v3:v4 v4:pointToTest];
    direction3 = [self isRightHandTurnFromV1:v3 v2:v4 v3:v1 v4:pointToTest];
    direction4 = [self isRightHandTurnFromV1:v4 v2:v1 v3:v2 v4:pointToTest];
    
    return  (direction1 == direction2 && direction2 == direction3 && direction3 == direction4);   
}

But this code works incorrectly. Kick me the right way! Thanks

Pavel Volobuev · 08-18-2011, 04:42 AM

Sorry, i solves this ) i forgot that the square or rectangle or rhomb - it's two triangles =)
But for knowledge base, maybe you know function to detect point in square?

Duncan C · 08-18-2011, 06:48 AM

Quote:

Originally Posted by Pavel Volobuev

Sorry, i solves this ) i forgot that the square or rectangle or rhomb - it's two triangles =)
But for knowledge base, maybe you know function to detect point in square?

If the rectangle is not rotated, just check to see if the x coordinate is between the leftmost and rightmost edges and the y coordinate is between the top and bottom edges of the rectangle.

If it's rotated, dividing it into 2 triangles and using triangle tests is probably the way to go.