The Android API has a Matrix class, which can be used when drawing on existing Bitmap objects or creating a Bitmap object from another Bitmap object. This class allows us to apply a spatial transformation to an image. A transformation of this type would be rotating, cropping, scaling, or otherwise altering the coordinate space of the image.

The Matrix class represents transformations with an array of nine numbers. In many cases, these can be generated by a formula that mathematically represents the transformation that should occur. For instance, the formula for rotation involves using sine and cosine to generate the number in the matrix.

The numbers in the Matrix can also be input manually. In order to understand how the Matrix works, we'll start by doing some manual transforms.

Each number in the Matrix applies to one of the three (x, y, or z) coordinates for each point in the image.

For instance, here is a Matrix of nine floats:

The top row (1, 0, 0) specifies that the source x coordinate will be transformed according the following formula: x = 1x + 0y + 0z. As you can see, the placement of the values in the matrix determines how that number will affect the outcome. The top row will always affect the x coordinate but can operate with the source x, y, and z coordinate.

The second row (0, 1, 0) means that the y coordinate will be determined as y = 0x + 1y + 0z, and the third row (0, 0, 1) means that the z coordinate will be determined by z = 0x + 0y + 1z.

In other words, this Matrix won't do any transformation; everything will be placed as it is in the source image.

To implement this in code, we would create the Matrix object and then explicitly set the values through its setValues method.

Matrix matrix = new Matrix(); matrix.setValues(new float[] { 1, 0, 0, 0, 1, 0, 0, 0, 1

We can use the Matrix object when drawing a bitmap onto a canvas. canvas.drawBitmap(bmp, matrix, paint);

This would be in place of the drawBitmap method that we are using in our previous example.

To have this Matrix change the image in some manner, we can replace any of the existing numbers with a different value. If we change the first number from a 1 to a .5, we would squish the image on the x axis by 50% as illustrated in Figure 3-5. This first number operates on the x coordinate in the source to influence the x coordinate in the resulting image.

Matrix matrix = new Matrix(); matrix.setValues(new float[] { .5f, 0, 0, 0, 1, 0, 0, 0, 1

canvas.drawBitmap(bmp, matrix, paint);

Süffle 10:44am

Süffle 10:44am

Figure 3-5. The second image displayed with the custom matrix applied, scaling the x axis by 50%

If we altered the matrix to have the x coordinate also be affected by the source y coordinate, we can alter the second number.

Matrix matrix = new Matrix(); matrix.setValues(new float[] { 1, .5f, 0, 0, 1, 0, 0, 0, 1

canvas.drawBitmap(bmp, matrix, paint);

As you can see in Figure 3-6, it causes the image to skew. It skews because the first row, which operates on the x value of each pixel, is being altered by the y value of each pixel. As the y value increases, as we move down the image, the x value increases, causing the image to skew. If we used a negative value, it would skew in the opposite direction. You'll also notice that the image gets cut off due to the coordinates changing. We need to increase the size of the resulting bitmap as shown in Figure 3-7 if we are going to perform operations like this.

alteredBitmap = Bitmap.createBitmap(bmp.getWidth()*2,bmp.getHeight(),bmp.getConfig());

Choose Picture

Figure 3-7. The second image displayed with the same custom matrix but with a larger width so the image isn't cropped

As you can see, these Matrix transformations are very powerful. Also, you can see that doing them by hand can be cumbersome. Unfortunately, the formulas to accomplish much of what you would want to do with the Matrix by hand require math that is out of the scope of this book. There are plenty of resources online, though, if you are interested in learning more. A good place to start is the Wikipedia Transformation Matrix article: http ://en.wi ki pedi a. o rg/wi ki /Transformati on_mat ri x.

Was this article helpful?

## Post a comment