Sixth chapter a piece of white paper good painting-canvas canvas (5)

Source: Internet
Author: User

6.4.8 Regional and Region.op

In canvas painting, we may encounter the need to display half a rectangle, or to display a portion of the picture, then we will use the canvas's setting area method, there is Cliprect (Rect rect,region.op Op), Clipregion (region region) of these two methods. Region represents an area that differs from a rect in that it can represent an irregular appearance, which can be an ellipse, a polygon, and so on, while region can also represent a rectangle, and rect is just a rectangle.

A Boolean contains (int x, int y) member of the same region can determine whether a point is within the range.

Region.op is a parameter for multiple area overlay effects.

public enum Op {

Difference (0),//difference the first one is different from the second part of the show

INTERSECT (1),//intersect takes the intersection of the two, the default way

UNION (2), the complete collection of//union

XOR (3),//xor complement, is the remainder of the complete set minus the intersection display

Reverse_difference (4),//The second differs from the first part of the display

REPLACE (5);//replace shows the second one.


Let's read the example of Apidemos ( in the SDK below. As shown in 6-4.

Figure 6-4 Example of region

It is mainly to put two rect in the same region, according to different region.op to make, the color of the area is a valid area, different colors represent the different rect produced after merging.

The core code is as follows:

Define two rect (rectangle)

Mrect1.set (10, 10, 100, 80);

Mrect2.set (50, 50, 130, 110);

Defines a region to hold a collection of two rect

Region RGN = new region ();

Add MRect1 into Region

Rgn.set (MRECT1);

Add the MRect2 to the region, note the second parameter here, he is to pass in the effect of the indicator, in detail see the above region.op instructions.

Rgn.op (MRect2, op);

Region of the iterator, you can say a region decomposition into a different Rect, through the (Rect R) method to extract each rectangle.

Regioniterator iter = new Regioniterator (RGN);

Rect r = new Rect ();

while ( (R)) {

Canvas.drawrect (R, Mpaint);


6.4.9 Matrix Transformation

With a little knowledge of the basics, we can look at the class, which represents a transformation matrix that determines how a point in one coordinate space is mapped to another coordinate space. By setting the properties of a matrix object and applying it to a Canvas object or Bitmap object, we can perform various graphics transformations on the object. These conversion functions include panning (x and Y repositioning), rotation, zooming, and skewing to achieve a stunning effect.

The Matrix object is treated as a 3 x 3 array with the following contents:

In traditional transformation matrices, the U, V, and W properties have other functions. The Matrix class can operate only in two-dimensional space, so it is always assumed that the attribute values U and v are 0.0 and the property value W is 1.0. In other words, the valid values for the matrix are as follows:

You can get and set the values for all six other properties of the Matrix object: A, B, C, D, TX, and Ty.

The Matrix class supports four main types of conversion functions: pan, zoom, rotate, and tilt. There are specific methods for the three of these functions, as described in table 6-8.


Matrix value

Show results


Translate (Tx,ty)

Translation (displacement),

Move the image to the right of the TX pixel and move the Ty pixel down.

Scale (SX, SY)


Adjust the size of the image by taking the position of each pixel in the x-axis in the direction of SX and in the y-axis of the superior Sy.

Rotate (q)


Rotates the image by an angle of degrees Q in radians.

Skew (skx, Sky)


Gradually slide the image in the direction parallel to the x-axis or y-axis. The SKX value acts as a multiplier, controlling the distance that is slid along the x-axis, and sky controls the distance that is sliding along the y-axis.

Table 6-8 Four main conversion functions supported by the Matrix class

The following code simply implements a reflection image of the image

Matrix Mmatrix = new Matrix ();

Mmatrix.setscale (1.0f, -1.0f);

Canvas.drawbitmap (Mbitmap, Mmatrix, NULL);

The above four methods of operation, each operation method has three kinds of interface setxx, Prexx, Postxx. SETXX will make the value of the entire matrix the value set. Prexx is to multiply the new transformation matrix to the left by the original matrix, while the POSTXX is the new transformation matrix right multiply the original transformation matrix.

Experience Sharing:

Pretranslate, Settranslate and posttranslate are very different in the composite matrix. Abstract the pre method is to "grow" forward, the Post method is to "grow", the following or 2 examples to illustrate:

Matrix.prescale (0.5f, 1);

Matrix.pretranslate (10, 0);

Matrix.postscale (0.7f, 1);

Matrix.posttranslate (15, 0);

Then the 4 transformation processes that the coordinate transformation passes in turn are:

Translate (0), scale (0.5f, 1) and scale (0.7f, 1), translate (15, 0),

So the sequence of calls to the Matrix method is very important, and the different order tends to produce different transformations. The call order of the pre method and the Post method do not affect each other, that is, the following method call and the former in the real coordinate transformation sequence is consistent.

Matrix.postscale (0.7f, 1);

Matrix.prescale (0.5f, 1);

Matrix.pretranslate (10, 0);

Matrix.posttranslate (15, 0);

The matrix's Set method brushes the previous pre and post operations, and then sets its value, such as the following method calls:

Matrix.prescale (0.5f, 1);

Matrix.posttranslate (10, 0);

Matrix.setscale (1, 0.6f);

Matrix.postscale (0.7f, 1);

Matrix.pretranslate (15, 0);

The coordinate transformation sequence is translate (1, 0.6f), scale (0.7f, 1), and scale (0).

It is also important to note that this method Matrix.maprect (RECTF rect), and transforms the RECTF rectangle.

Matrices are generally used when changing view, so many times we will need to convert some points or rectangles, the Android matrix provides us with a convenient way to calculate. Let's take a look at the following example:

Float[] P1 = {1000f,100f};

Float[] P2 = {1000f,100f};


//The following is a forward procedure

//Original transformation matrix

Matrix M1 = new matrix ();

//M1 's Inverse matrix

Matrix m2 = new matrix ();

Log.d ("test111", "+p1[0]+", "+p1[1");

M1.posttranslate (+);

M1.postscale (0.6f, 0.3f);

M1.postrotate (45.F);

//This process is the p1{1000f,100f} this point through the M1 conversion, into a new point P1, this time P1 has become a converted point.

M1.mappoints (p1);

Log.d ("test222", "" "+m1.tostring ());

Log.d ("test333", "+p1[0]+", "+p1[1");


//The following is a reverse process

//P1 The converted point, assign to P2

P2 = p1;

Log.d ("test444", "+p2[0]+", "+p2[1");

//The M1 is reversed and stored in M2

Boolean temp = M1.invert (m2);

Log.d ("test555", "" "+m2.tostring ());

Log.d ("test666", "" "+temp);

//This converted point can be understood as the converted point, and the M2 of the original point is obtained by the inverse matrix, and stored in the P2.

M2.mappoints (p2);

Log.d ("test777", "" +p2[0]+ "," +p2[1] ");

Figure 6-5 shows the results of the operation.

Figure 6-5 The result of a matrix inverse example

Experience Sharing:

As we can see from the above example, you may only need to use one part at a time, and the logic of the forward logic of the matrix, or the inverse of the matrix. It is important to note the following 2 methods:

1) m1.mappoints (p1);//The process is to p1{1000f,100f} this point through the conversion of M1, into a new point P1, this time P1 has become a converted float array.

2) M1.invert (m2);//The M1 is reversed and stored in m2

Sixth chapter a piece of white paper good painting-canvas canvas (5)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.