Chapter 6 painting with White Paper-Canvas canvas (5)

Chapter 6 painting with White Paper-Canvas canvas (5)
6.4.8 android. graphics. Region and Region. Op

When painting a Canvas, we may encounter a problem where we only need to display a half rectangle or a part of the image. We need to use the Canvas setting area method, including clipRect (Rect rect, Region. op) and clipRegion (Region region) methods. Region indicates that a Region is different from a Rect. It can represent an irregular shape, such as an ellipse or a polygon. Of course, Region can also represent a rectangle, rect is just a rectangle.

The boolean contains (int x, int y) Member of the same Region can determine whether a vertex is in the Region.

Region. Op is a parameter for multi-Region superposition.

Public enum Op { DIFFERENCE (0), // The First Part of DIFFERENCE is different from the second part. INTERSECT (1), // INTERSECT returns the intersection of the two. The default method is UNION (2), // UNION XOR (3), // XOR, that is, the complete set minus the remaining part of the intersection. REVERSE_DIFFERENCE (4), // the second part is different from the first one. REPLACE (5); // REPLACE displays the second }

The following is an example of ApiDemos (com. example. android. apis. graphics. Region. java) in the SDK. 6-4.

Figure 6-4 Region example

 

It is mainly to put two Rect in the same Region, according to different Region. produced by Op, the areas with colors are valid, and different colors indicate different Rect results after merging.

The core code is as follows:

// Define two Rect (rectangle) MRect1.set (10, 10,100, 80 ); MRect2.set (50, 50,130,110 ); // Define a Region to save the set of two Rect records Region rgn = new Region (); // Add mRect1 to Region Rgn. set (mRect1 ); // Add mRect2 to Region. Note that the second parameter indicates the effect to be passed in. For details, see the preceding Region. Op description. Rgn. op (mRect2, op ); // The Region iterator. It can be used to divide a Region into different Rect values and extract each rectangle using the iter. next (Rect r) method. RegionIterator iter = new RegionIterator (rgn ); Rect r = new Rect (); While (iter. next (r )){ Canvas. drawRect (r, mPaint ); }

6.4.9 how to change the android. graphics. Matrix

After learning about the previous basic knowledge, let's look at android. graphics. matrix class, which represents a conversion Matrix, which determines how to map a coordinate space point to another coordinate space. By setting attributes of a Matrix object and applying it to a Canvas object or Bitmap object, we can perform various graphical conversions on the object. These conversion functions include translation (retargeting x and y), rotation, scaling, and skew to achieve amazing results.

A matrix object is considered as a 3x3 matrix with the following content:

In traditional conversion matrices, u, v, and w attributes have other functions. The Matrix class can only be operated in two-dimensional space. Therefore, it is always assumed that the attribute values u and v are 0.0, and the attribute value w is 1.0. In other words, the valid values of the matrix are as follows:

You can obtain and set values of all six other attributes of a Matrix object: a, B, c, d, tx, and ty.

The Matrix class supports four main types of conversion functions: translation, scaling, rotation, and skew. Three of these functions have specific methods, as described in table 6-8.

Method	Matrix Value	Display result	Description
Translate (tx, ty)			Translation (replacement ), Move the tx pixel to the right and ty pixel down.
Scale (sx, sy)			Zoom, Adjust the image size by taking the position of each pixel in the x axis direction to sx and in the y axis to sy.
Rotate (q)			Rotate, Rotate the image to an angle q in radians.
Skew (skx, sky)			Skew, Gradually slide the image in the direction of the X or Y axis. The skx value acts as the multiplier to control the sliding distance along the x axis; the sky controls the sliding distance along the Y axis.

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

 

The following code implements the image reflection.

Matrix mMatrix = new Matrix (); MMatrix. setScale (1.0f,-1.0f ); Canvas. drawBitmap (mBitmap, mMatrix, null );

 

The preceding four operation methods have three interfaces: setXX, preXX, and postXX. SetXX sets the value of the entire matrix as the set value. PreXX is to take the new transformation matrix left by the original matrix, while postXX is to take the new transformation matrix right by the original transformation matrix.

 

Experience Sharing: In the matrix combination, preTranslate, setTranslate, and postTranslate have many differences. Abstract: The pre method is to "grow" Forward, and the post method is to "grow" backward. Here are two examples to illustrate: Matrix. preScale (0.5f, 1 ); Matrix. preTranslate (10, 0 ); Matrix. postScale (0.7f, 1 ); Matrix. postTranslate (15, 0 ); Then, the four transformations after the coordinate transformation are: Translate (10, 0)-> scale (0.5f, 1)-> scale (0.7f, 1)-> translate (15, 0 ), Therefore, the calling sequence of matrix methods is very important. Different sequences often produce different transformation effects. The Calling sequence of the pre method and the post method do not affect each other, that is, the following method calls are consistent with the former in the real coordinate transformation sequence. Matrix. postScale (0.7f, 1 ); Matrix. preScale (0.5f, 1 ); Matrix. preTranslate (10, 0 ); Matrix. postTranslate (15, 0 ); The set Method of matrix clears the previous pre and post operations, and then sets its value. For example, 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 (15, 0)-> scale (1, 0.6f)-> scale (0.7f, 1 ). In addition, pay attention to this method Matrix. mapRect (RectF rect); transform the RectF rectangle.

 

When a Matrix is used to transform a view, we usually need to convert some vertices or rectangles. The Matrix of Android provides us with a very convenient method for calculation. Here is an example:

Float [] p1 = {1000f, 100f }; Float [] p2 = {1000f, 100f };   // The following is a positive process. // Original Transformation Matrix Matrix m1 = new Matrix (); // Inverse matrix of m1 Matrix m2 = new Matrix (); Log. d ("test111", "" + p1 [0] + "," + p1 [1]); M1.postTranslate (100,300 ); M1.postScale (0.6f, 0.3f ); M1.postRotate (45.f ); // In this process, the point p1 {1000f, 100f} is converted to a new point p1 through m1 conversion. At this time, p1 has become the converted point. M1.mapPoints (p1 ); Log. d ("test222", "" + m1.toString ()); Log. d ("test333", "" + p1 [0] + "," + p1 [1]);   // The following is a reverse process. // Assign the converted point of p1 to p2 P2 = p1; Log. d ("test444", "" + p2 [0] + "," + p2 [1]); // Here m1 is reversed and then stored in m2 Boolean temp = m1.invert (m2 ); Log. d ("test555", "" + m2.toString ()); Log. d ("test666", "" + temp ); // The converted vertices can be understood as converted vertices. The original vertices are obtained through the Reverse Matrix m2 and stored in p2. M2.mapPoints (p2 ); Log. d ("test777", "" + p2 [0] + "," + p2 [1]);

 

Figure 6-5 shows the running result.

Figure 6-5 result of Reverse Matrix example

 

Experience Sharing: Through the above example, we can see that you may only need to use part of the logic at a time, as well as the forward logic of the matrix or the reverse logic of the matrix. Note the following two methods: 1) m1.mapPoints (p1); // in this process, the point p1 {1000f, 100f} is converted to a new point p1, at this time, p1 has become the converted float array. 2) m1.invert (m2); // here m1 is reversed and then stored in m2