Custom Controls (4): Paint paint Paint path effect, paint Paint

Custom Controls (4): Paint paint Paint path effect, paint Paint

Paint brush, that is, the "pen" used to draw a graph"

We have learned some basic usage of Painting:

Paint. setAntiAlias (true); // The anti-aliasing function paint. setColor (Color. RED); // set the paint color. setStyle (Style. FILL); // set the FILL style paint. setStrokeWidth (10); // you can specify the paint width in pxpaint. setShadowLayer (10, 15, 15, Color. GREEN); // sets the shadow.

However, we will find that the lines drawn in this way are straight and can meet the needs, but they are not beautiful.

This requires more methods of the Paint class.

 

First, let's look at the simplest set line.

Paint paint = new Paint ();
Paint. setStyle (Paint. Style. STROKE );
Paint. setColor (Color. RED );
Paint. setStrokeWidth (50 );

Path path = new Path ();
Path. moveTo (100,500 );
Path. lineTo (200,200 );
Path. lineTo (300,500 );
// Draw a red line with a 50 PX line width
Canvas. drawPath (path, paint );

 

 

I,Line path Style

public void setPathEffect(PathEffect effect);

Set the path style. The value type is all subclasses derived from PathEffect.

 

From the second to the last one, each of which represents a style, the most used isCornerPathEffect -- circular Corner Effect, DashPathEffect -- dotted line Effect

　(1) CornerPathEffect -- circular Corner Effect

New CornerPathEffect (float radius) // radius indicates the Bending radius

Path path = new Path (); path. moeto (100,500); path. lineTo (200,200); path. lineTo (300,500); // draw a red, 50 PX line paint. setPathEffect (new CornerPathEffect (5); canvas. drawPath (path, paint );

　　

We can see that the original straight line has a degree of bending.

Expansion: we can implement the graph based on this method.

 

　(2) DashPathEffect-dotted line Effect

Public DashPathEffect (float intervals [], float phase) intervals []: represents the length of each line segment that forms a dotted line. The entire dotted line is composed of the cycle of these basic line segments in intervals.
Phase: Offset Value for starting plotting

Note: The number of intervals [] is unlimited, but at least two.

It can be a singular number or a double number. If it is a singular number, the last one is ineffective.

Double represents an implementation length and an empty line length.

For example, new DashPathEffect (new float [] {30,10, 20,10}, 10 );

Each segment is divided into four parts: a solid line of 30px, a hollow line of 10px, a solid line of 20px, and a blank line of 10px.

 

Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setColor(Color.RED);paint.setStrokeWidth(10);Path path = new Path();path.moveTo(100,500);path.lineTo(800,500);paint.setPathEffect(new DashPathEffect(new float[]{30,10,20,10},10));        canvas.drawPath(path,paint);

 

You can try other effects on your own.

 

II,Effect of overlapping paths between ComposePathEffect and SumPathEffect

We can see from English that these two methods are used to merge the path effect, but since they are two methods, there is a corresponding difference.

(1 ),ComposePathEffect

The effect of this merge path is to first set the effect of painting to the path of the second parameter, and then set the effect of the path corresponding to the first parameter.

Let's take a look at a line, set a circular corner path and a dotted line path.

Paint paint = new Paint (); paint. setStyle (Paint. style. STROKE); paint. setColor (Color. RED); paint. setStrokeWidth (3); Path path = new Path (); path. moeto (100,600); path. lineTo (200,200); path. lineTo (300,600); // dotted line path DashPathEffect dashPathEffect = new DashPathEffect (new float [] {30, 10, 20, 10}, 0 ); // corner inflection point path CornerPathEffect cornerPathEffect = new CornerPathEffect (10); // merged path Signature = new ComposePathEffect (dashPathEffect, cornerPathEffect); // you can specify the path paint. setPathEffect (composePathEffect); canvas. drawPath (path, paint );

 

(2 ),SumPathEffect

The effect of this merge path is to display the effect of the two paths separately.

Let's take a look at a line, set a circular corner path and a dotted line path.

Paint paint = new Paint (); paint. setStyle (Paint. style. STROKE); paint. setColor (Color. RED); paint. setStrokeWidth (3); Path path = new Path (); path. moeto (100,600); path. lineTo (200,200); path. lineTo (300,600); // dotted line path DashPathEffect dashPathEffect = new DashPathEffect (new float [] {30, 10, 20, 10}, 0 ); // corner inflection point path CornerPathEffect cornerPathEffect = new CornerPathEffect (50); // The merged path SumPathEffect sumPathEffect = new SumPathEffect (ignore, cornerPathEffect); // you can specify the path paint. setPathEffect (sumPathEffect); canvas. drawPath (path, paint );

We can see the effect of overlapping a dotted path and a circular corner path.

 

 

3. setStrokeCap (Paint. Cap cap)

Set the line Cap style. The options include Cap. ROUND (Circle Line Cap), Cap. SQUARE (SQUARE Line Cap), and Paint. Cap. BUTT (Wireless Cap)

It can be understood as a line of two endpoints, set the line style so that the two ends of the line do not look so rigid

Draw three lines of different styles to see the effect.

　　

Paint paint = new Paint();paint.setStyle(Paint.Style.STROKE);paint.setColor(Color.RED);paint.setStrokeWidth(50);Path pathBUTT = new Path();pathBUTT.moveTo(100,200);pathBUTT.lineTo(600,200);paint.setStrokeCap(Paint.Cap.BUTT);canvas.drawPath(pathBUTT,paint);Path pathSQUARE = new Path();pathSQUARE.moveTo(100,400);pathSQUARE.lineTo(600,400);paint.setStrokeCap(Paint.Cap.SQUARE);canvas.drawPath(pathSQUARE,paint);Path pathROUND = new Path();pathROUND.moveTo(100,600);pathROUND.lineTo(600,600);paint.setStrokeCap(Paint.Cap.ROUND);canvas.drawPath(pathROUND,paint);

 

　　

 

Iv. setStrokeJoin (Paint. Join join)

Set the effect value of the combiner:

1. Join. MITER (the combination is an acute angle) 2. Join. Round (the combination is an arc) 3. Join. BEVEL (the combination is a straight line)

Example:

Paint paint = new Paint();paint.setColor(Color.RED);paint.setStrokeWidth(30);paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(true);Path pathROUND = new Path();pathROUND.moveTo(100,300);pathROUND.lineTo(600,300);pathROUND.lineTo(150,100);paint.setStrokeJoin(Paint.Join.ROUND);canvas.drawPath(pathROUND,paint);Path pathMITER = new Path();pathMITER.moveTo(100,600);pathMITER.lineTo(600,600);pathMITER.lineTo(150,400);paint.setColor(Color.GREEN);paint.setStrokeJoin(Paint.Join.MITER);canvas.drawPath(pathMITER,paint);Path path = new Path();path.moveTo(100,900);path.lineTo(600,900);path.lineTo(150,700);paint.setColor(Color.BLUE);paint.setStrokeJoin(Paint.Join.BEVEL);canvas.drawPath(path,paint);