Resizing textures when pinching on the screen

Android
1

I have a rectangle texture that I want to resize by pinching on the screen.

I have been able to resize it by increasing the width and height at the same time, but I would like to do this based on the actual current horizontal and vertical deltas, so the result is not always a square. My math is not great and I get lost while trying to do those calculations. Could anybody help? Thanks.

This is my code:

        while (TouchPanel.IsGestureAvailable)
        {
            GestureSample gesture = TouchPanel.ReadGesture();

            if (gesture.GestureType == GestureType.Pinch)
            {
                // Current positions
                Vector2 a = gesture.Position;
                Vector2 b = gesture.Position2;
                float dist = Vector2.Distance(a, b);

                // Prior positions
                Vector2 aOld = gesture.Position - gesture.Delta;
                Vector2 bOld = gesture.Position2 - gesture.Delta2;
                float distOld = Vector2.Distance(aOld, bOld);

                if (dist > distOld)
                {
                    width += (int)(dist - distOld);
                    heigth+= (int)(dist - distOld);
                }
                else
                {
                    width -= (int)(distOld - dist);
                    heigth -= (int)(distOld - dist);
                }
                                    
                rect = new Texture2D(GraphicsDevice, width, heigth);
                Color[] data = new Color[width * heigth];
                for (int i = 0; i < data.Length; ++i) data[i] = Color.Chocolate;
                rect.SetData(data);
                                                        
            }
         
        }
2

I’m a little unsure about exactly what you’re asking for, but I’ll try.

If you want simultaneous and independent scaling of both X and Y axis, you need to look at just X values when scaling width and just Y values when scaling height.

If you want to scale uniformly, you should scale using multiplication or division. Adding or subtracting like you’re doing here will change the aspect ratio.

In the code you’ve posted there is no need for the if else statement.

width += (int)(dist - distOld);

and

width -= (int)(distOld - dist);

do exactly the same.

1 Like
3

I haven’t done this before, but from looking at your code you get two positions out of your gesture, yea?
You’re calculating the length of the vector between those two points and using it to scale your image uniformly, but you could calculate the vector between those two points and use the horizontal and vertical components to scale your image non-uniformly.

If I’m reading your code correctly…

Vector2 v = gesture.Position2 - gesture.Position;
Vector2 vOld = (gesture.Position2 - gesture.Delta2) - (gesture.Position - gesture.Delta);
Vector2 swipeVector = v - vOld;

width += swipeVector.x;
height += swipeVector.y;

I’m guessing as to the meaning of the properties of gesture, but going by your code it should be something like that. The bottom line is, the distance between two points that you’re using is made up of a horizontal and a vertical component. You can use these individually to scale independently on each axis.

I dunno, hopefully that makes sense :slight_smile:

1 Like
4

@Trinith Thanks a lot. Even with my poor description of the problem you managed to do what I was missing. That was exactly what I was looking for! It works great now.

1 Like