Skewing a bitmap only in the vertical direction

Question

I want to skew (correct me if this is not the correct word) a bitmap so that it appears to have depth. A good way to visualize what I am asking for is how the credits of Star Wars are angled to show depth.

I have tried the following:

canvas.getMatrix().postSkew(kx,ky,px,py);

and

canvas.skew(sx,sy);

But I have not had much success. The above methods seem to always transform the bitmap into a parallelogram. Is there a way to transform the bitmap into a trapezoid instead?

Here is a snippet of code that I took from the examples that Romain pointed me to.

canvas.rotate(-mOrientation[0] + mHeading, mCenterX, mCenterY);

camera.save();

if (mReverse) {
    camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
    camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}

camera.rotateX(mOrientation[1]);
camera.applyToCanvas(canvas);
canvas.drawPath(mPath, mPaint);
canvas.drawCircle(mCenterX, mCenterY, mRadius - 37, mPaint);

camera.restore();

score 13 · Answer 1 · answered May 19 '11 at 04:38

I spent a lot of time working on this today (ran into the same problem) and came up with the code below.

Key thing to note, you need to set preTranslate() and postTranslate() to the center (or somewhere else) of your Canvas area. It seems to mean that it uses the center of the image to apply the transformation from, instead of the upper left corner (x=0,y=0) by default. This is why you would get a parallelogram instead of what you would expect, a trapezoid (Thanks for teaching me the names of those).

The other important thing that I picked up is the Save/Restore functions on the Canvas/Camera. Basically, if you call the Rotate functions consecutively three times without restoring the state back each time, you would keep rotating your object around and around each time you draw. That might be what you want, but I certainly didn't in my case. Same applies to the canvas as you are basically applying the Matrix from the Camera object to the Canvas and it needs to be reset otherwise the same thing occurs.

Hope this helps someone, this is not well documented for beginners. Tip to anyone reading this, check out the APIDemos folder in the SDK Samples. There is a Rotate3dAnimation.java file which demonstrates this as well.

//Snippet from a function used to handle a draw
mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it's matrix
ApplyMatrix(); //apply rotated matrix to canvas
Draw(); //Does drawing
mCanvas.restore(); //restore clean matrix
//    

public void ApplyMatrix() {
  mCamera.save();
  mCamera.rotateX(-66);
  mCamera.rotateY(0);
  mCamera.rotateZ(0);
  mCamera.getMatrix(mMatrix);

  int CenterX = mWidth / 2;
  int CenterY = mHeight / 2; 
  mMatrix.preTranslate(-CenterX, -CenterY); //This is the key to getting the correct viewing perspective
  mMatrix.postTranslate(CenterX, CenterY); 

  mCanvas.concat(mMatrix);
  mCamera.restore();    
}

This seems on track to what I want. I'm still having difficult using the orientation values (azimuth, pitch, roll) to transform the matrix and manipulate the canvas. I'm trying to achieve an effect similar to the stock Android gallery, where the images appear to remain fixed (in terms of orientation based on a user's view) as the device is tilted left and right. — mdupls, May 22 '11 at 03:23
This seems like a similar issue to what I have, only that I deal with both bitmaps and texts. Can you please check out this issue too: http://stackoverflow.com/q/32180534/878126 — android developer, Aug 25 '15 at 08:07

score 6 · Accepted Answer · answered Mar 18 '11 at 17:11

6

You cannot achieve the effect you want with skew(). However, you can use a Camera object and 3D rotations to achieve this effect. The Camera will generate a Matrix for you that you can then apply on the Canvas. Note that the result will not be perspective correct, but good enough for your purpose. This how 3D rotations are done in Honeycomb's Launcher for instance (and many other apps.)

answered Mar 18 '11 at 17:11

Romain Guy

97,993
18
219
200

3

Yes, there is an example in ApiDemos - Rotate 3D Animation which does this with Camera class. Create a new android project and select "create project from existing sample", choose target os and then ApiDemos. When app is running select View > Animation > 3D transition – Lumis Mar 18 '11 at 17:33
I don't think animations are the way to go. I am manipulating graphics on a canvas based on a constant stream of device sensor values (augmented reality). Is there any other way to do this? Should I be using 3D graphics like OpenGL? Thanks. – mdupls Mar 19 '11 at 19:25
You don't need an animation. That demo uses the Camera object I mentioned to do the 3D transformation. It's an example of how to use the Camera. You don't need OpenGL, just android.graphics.Camera. – Romain Guy Mar 19 '11 at 20:57
I've gone through the demo but I'm having difficulty getting the rotations to pivot at the center of the screen. For example, given a square I want the center of the square to remain in the middle of the screen when rotated in any axis. I've edited my question with the code I am currently using. – mdupls Mar 20 '11 at 00:29
This seems like a similar issue to what I have, only that I deal with both bitmaps and texts. Can you please check out this issue too: http://stackoverflow.com/q/32180534/878126 – android developer Aug 25 '15 at 08:25

score 1 · Answer 3 · answered Mar 18 '11 at 15:44

1

I don't think the "Star Wars effect" is an affine transformation, which I think are the only operations supported by Matrix.

answered Mar 18 '11 at 15:44

Matthew

44,826
10
98
87

Skewing a bitmap only in the vertical direction

3 Answers3

Linked