Cropping a bitmap in the vertical direction only

Question

I want to skew (correct me if this is not the right word) bitmap so that it looks like depth. A good way to visualize what I'm asking for is how Star Wars credits are angled to show depth.

I tried the following:

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

and

 canvas.skew(sx,sy); 

But I did not have much success. The above methods always convert the bitmap image to parallelogram. Is there a way to convert a bitmap to a trapezoid?

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

 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(); 

Answer 1

You cannot achieve the effect you want with skew (). However, to achieve this effect, you can use the Camera object and 3D rotation. The camera will create a matrix for you that you can apply on canvas. Please note that the result will not be accurate, but good enough for your purpose. This is, for example, 3D rotation in the Honeycomb Launcher (and many other applications).

Answer 2

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

It should be noted that you need to set preTranslate () and postTranslate () to the center (or somewhere else) of your canvas area. This means that it uses the center of the image to apply the transform instead of the top left corner (x = 0, y = 0) by default. That's why you get a parallelogram instead of what you expect, a trapezoid (thanks for teaching me the names of these people).

Another important thing I took is the save / restore functions on Canvas / Camera. Basically, if you call Rotate functions three times in succession without restoring each time, you will continue to rotate your object around and around every time you draw. It may be what you want, but of course I did not. The same applies to the canvas, since you basically apply the matrix from the Camera object to the Canvas, and this must be reset otherwise the same thing happens.

Hope this helps someone, this is poorly documented for beginners. Tell me who reads this, check the APIDemos folder in the SDK samples. There is a Rotate3dAnimation.java file that also demonstrates this.

 //Snippet from a function used to handle a draw mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it 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(); } 

Answer 3

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