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

Chapter 6 painting with White Paper-Canvas canvas (4)
6.4.4 Path: android. graphics. Path

When we need an irregular image, the drawRect and other methods of Canvas will not work. Here we need to use the drawPath (Path path, Paint paint) method to draw a shape by Path. Canvas also has a method clipPath (Path path ). This method is used to set valid regions in the Canvas according to the designed path.

Next we will introduce the path class, which is a set of multiple points and images.

The Path construction method is simple, as follows:

Path path1 = new Path (); // Constructor

 

Next we will draw a closed prototype Path. We will use the addCircle method of the Path class.

Path1.addCircle (10, 10, 50, Direction. CW );

 

Explain this method:

VoidaddCircle (float x, float y, float radius, Direction dir)

The x parameter is the horizontal position of the x axis, y parameter is the vertical position of the y axis, radius parameter is the radius of the circle, dir parameter is the direction of drawing, CW is the clockwise direction, and CCW is the clockwise direction.

We can also add some points and lines freely to form a triangle.

Path path2 = new Path (); // Move the starting point of the path to 90,330 Path2.moveTo (90,330 ); // Draw a straight line from 90,330 to 150,330 Path2.lineTo (150,330 ); // Draw a straight line from 150,330 to 120,270 Path2.lineTo (120,270 ); // Close the current profile. In this way, a triangle is formed. Path2.close ();

 

Combined with the drawing methods drawPath () and drawTextOnPath () in the Canvas class, we can add the following code in onDraw.

// PathPaint indicates the paint color of the path. Canvas. drawPath (path1, pathPaint ); // Draw the text to the path Canvas. drawTextOnPath ("Android", path2, 0, 15, textPaint );

 

Next, our onDraw () method demonstrates how to draw a path.

@ Override Protected void onDraw (Canvas canvas ){ Paint pathPaint = new Paint (); Paint textPaint = new Paint (); // The path is painted in red. PathPaint. setColor (Color. Red ); // Set the style of paint to FILL: Solid PathPaint. setStyle (Paint. Style. FILL ); // The text in the path is blue. TextPaint. setColor (Color. Blue ); Path path1 = new Path (); Path path2 = new Path ();   // Omit Part of the Code   Canvas. drawPath (path1, pathPaint ); // Draw text on the path Canvas. drawTextOnPath ("Android", path2, 0, 15, textPaint ); }

 

Explanation Method:

VoiddrawTextOnPath (String text, Path path, float hOffset, float vOffset, Paintpaint)

The parameter text is the text content to be drawn on the path. The parameter path specifies the path to which the text is drawn. The parameter hOffset is the distance from the path. The parameter vOffset, this parameter is float. It can be positive or negative except for an 8-digit decimal number. When it is a timing character, it is in the path circle, when it is negative, it is outside the circle of the path. The painting parameter is still a painting object used to specify the color, Font, size, and other attributes of the Text.

Other common methods for path classes are shown in Table 6-5.

Method	Return Value	Description
AddArc (RectF oval, float startAngle, float sweepAngle)	Void	Add a polygon to the path
AddCircle (float x, float y, float radius, Path. Direction dir)	Void	Add a circle to the path
AddOval (RectF oval, Path. Direction dir)	Void	Add an elliptical shape
AddRect (RectF rect, Path. Direction dir)	Void	Add a region
AddRoundRect (RectF rect, float [] radii, Path. Direction dir)	Void	Add a rounded corner area
IsEmpty ()	Boolean	Determines whether the path is empty.
Transform (Matrix matrix)	Void	Application matrix transformation
Transform (Matrix matrix, Path dst)	Void	Apply the matrix transformation and place the result in the new path, that is, the second parameter.

Table 6-5 other common methods of the Path class

 

6.4.5 path high-level effect android. graphics. PathEffect

Whether a straight line is too monotonous. Let's take a look at the advanced effect of the path, as shown in 6-2. Is it amazing? These effects are actually implemented using the PathEffect class.

Figure 6-2 advanced effect of the path

 

PathEffect is particularly useful for drawing basic paths. It can be applied to any Paint to affect the way line is drawn. With PathEffect, you can change the appearance of a corner and control the appearance of the contour. The example of ApiDemos (com. example. android. apis. graphics. PathEffects. java) attached to the SDK provides instructions on how to apply each effect. Figure 6-2 is the PathEffects in ApiDemos.

 

Android contains multiple PathEffect, including:

1) CornerPathEffect can use rounded corners instead of sharp corners to smooth the sharp corners of the basic image.

2) DashPathEffect can be used to create a dotted line outline (DashPathEffect) instead of a solid line. You can also specify the repetition mode of any virtual/real line segments.

3) DiscretePathEffect is similar to DashPathEffect, but randomness is added. When you draw it, you need to specify the length of each segment and the deviation from the original path.

4) PathDashPathEffect can define a new shape (PATH) and use it as the contour marker of the original path.

Complex effects can be combined by multiple Path Effect in a painting to form a PathEffect.

5) SumPathEffect adds two effects to a path sequentially, so that each effect can be applied to the original path and the two effects can be combined. SumPathEffect (first, second) = first (path) + second (path)

6) ComposePathEffect combines two effects. The first effect is used first, and then the second effect is applied on the basis of the effect. ComposePathEffect (outer, inner) = Outer (inner (path )).

7) DiscretePathEffect divides the path into line segments of the specified length, and then randomly offsets each line segment from the original position.

The PathEffect change of the Object Shape affects the shape area. This ensures that the filling effect applied to the same shape will be drawn to the new boundary.

The core code above is as follows:

// Phase specifies the actual and virtual offsets on the dotted line. Adding 1 at a time is equivalent to switching the positions of the virtual and hidden parts. // This way, you can achieve the animation effect by constantly changing the virtual reality. Private static void makeEffects (PathEffect [] e, float phase ){ E [0] = null; E [1] = new CornerPathEffect (10 ); E [2] = new DashPathEffect (new float [] {10, 5, 5}, phase ); E [3] = new PathDashPathEffect (makePathDash (), 12, phase, PathDashPathEffect. Style. TRANSLATE ); E [4] = new PathDashPathEffect (makePathDash (), 12, phase, PathDashPathEffect. Style. ROTATE ); E [5] = new PathDashPathEffect (makePathDash (), 12, phase, PathDashPathEffect. Style. MORPH ); E [6] = new ComposePathEffect (e [2], e [1]); E [7] = new SumPathEffect (e [2], e [1]); E [8] = new ComposePathEffect (e [5], e [1]); E [9] = new SumPathEffect (e [5], e [1]); } // Create a shape. The Unit Shape displayed by PathDashPathEffect Private static Path makePathDash (){ Path p = new Path (); P. moveTo (4, 0 ); P. lineTo (0,-4 ); P. lineTo (8,-4 ); P. lineTo (12, 0 ); P. lineTo (8, 4 ); P. lineTo (0, 4 ); Return p; }

6.4.6: android. graphics. Point and android. graphics. PointF

After reading the lines drawn by Canvas, let's take a look at the basis of the line composition, points (Point class ).

The Point class has two attributes: X coordinate and y coordinate.

There are three constructors.

Point () // construct a Point Point (int x, int y) // input the x and y coordinates to construct a vertex. Point (Point p) // input a Point object to construct a Point

 

The main methods are shown in Table 6-6.

Method	Return Value	Description
Set (x, y)	Void	Reset the coordinates of x and y.
Offset (int dx, int dy)	Void	Returns a compensation value for the coordinates. The value can be positive or negative.
Negate ()	Void	Negative coordinate value

Table 6-6 Common Point Methods

 

The Point class is similar to android. graphics. PointF. The difference is that the former coordinate value type is int type, while the latter coordinate value is float type.

In addition, the PointF class adds several more methods, such:

Public final float length (); // returns the distance from (0, 0) to this point. Public static float length (float x, float y); // returns the distance from (0, 0) to (x, y.

 

Experience Sharing: Speaking of coordinate points, we have to talk about the coordinate system of the mobile phone screen. The Coordinate System of the mobile phone is different from the general physical coordinate system. The origin of the mobile phone screen coordinate system (0, 0) is in the upper left corner of the screen, the value of x and y increases along the left and top edges. See Figure 6-3.

 

Figure 6-3 mobile phone coordinate points

 

6.4.7 shape class android. graphics. Rect and android. graphics. RectF

Rectangle, one of the several commonly used shapes in drawing. The RectF class contains four single-precision floating point coordinates of a rectangle. A rectangle is represented by the coordinates of the top, bottom, left, and right sides. These coordinate value attributes can be directly accessed, and the width and height of the rectangle can be obtained using the width () and height () methods.

RectF has four constructor methods.

RectF () // construct a rectangle without Parameters RectF (float left, float top, float right, float bottom) // constructs a rectangle with four parameters specified. RectF (RectF r) // construct a RectF object based on the specified RectF object (copy a Rect F) RectF (Rect r) // construct a RectF object based on the given Rect object

 

RectF provides many methods. The following describes several methods, as shown in Table 6-7.

Method	Return Value	Description
Contain (RectF r)	Boolean	Determines whether a vertex or rectangle is in this rectangle. If it is within or equal to this rectangle, true is returned.
Offset (float dx, float dy)	Void	Translation dx, dy distance
OffsetTo (float newLeft, float newTop)	Void	Translate to new position
Inset (float dx, float dy)	Void	2 * dx, 2 * dy

Table 6-7 common RectF Methods

 

Experience Sharing: Android. graphics. rect class, which is similar to android. graphics. rectF is very similar. The difference is that the coordinates of the Rect class are represented by an integer type, while the coordinates of the RectF are represented by a single precision floating point type. Obtain the zooming ratio of X in Matrix: Public void getValues (float [] values ); // The array values is an array of size> 9. values [Matrix. MSCALE_X] indicates the scaling ratio. Other parameters include Matrix. Public static final int MSCALE_X = 0; Public static final int MSKEW_X = 1; Public static final int MTRANS_X = 2; Public static final int MSKEW_Y = 3; Public static final int MSCALE_Y = 4; Public static final int MTRANS_Y = 5; Public static final int MPERSP_0 = 6; Public static final int MPERSP_1 = 7; Public static final int MPERSP_2 = 8;