How to distort a Sprite into a trapezoid?

Question

Hello,

I am trying to transform a Sprite into a trapezoid, I don't really care about the interpolation even though I know without it my image will lose detail. All I really want to do is Transform my rectangular Sprite into a trapezoid like this:

---

  /      \  
 /        \ 
/__________\

Has anyone done this with CGAffineTransforms or with cocos2d?. Can someone please point me in the right direction?. Thank you.

-Oscar

Answer 1

The transformation you're proposing is not affine. Affine transformations have to be undoable. So they can typically:

• Scale
• Rotate
• Shear (make lopsided, like square -> parallelogram)
• Translate

But they cannot "squeeze". Notice that the left and right sides of your trapezoid, if extended, would intersect at a particular spot. They're not parallel anymore. So you couldn't "undo" the transformation, because if there was anything to transform at that spot, you couldn't decide where they would transform to. In other words, if a transformation doesn't preserve parallelism, it pinches space, can't be undone, and isn't affine.

I don't know that much about transformations in Core Animation, so I hope that mathy stuff helps you find an alternative.

But I do know how you could do it in OpenGL, but it would require you to start over on how you draw your application:

1. If I'm envisioning the result you want correctly, you want to build your rectangle in 3D, use an affine transformation to rotate it away a little bit, and use a (non-affine) projection transformation to flatten it into a 2D image.

2. If you're not looking for a 3D effect, but you really just want to pinch in the corners, then you can specify a GL_RECT with the points of your trapezoid and map your sprite onto it as a texture.

The easiest thing might be to pre-squeeze your image in a photo editor, save it as a .png with transparency, and draw a rectangle with that image.