Android Paint API - PathEffect (path effect)

Introduction to this section:

This section continues to learn the API of Paint——PathEffect (path effect). We set the style of the brush to Stroke, and we can draw graphics composed of lines. These lines occasionally appear monotonous, right? For example, if you want to use these Change it to a dotted line first, or if you want to make the corner of the path smooth, etc., then you can consider using this PathEffect to achieve it!

Official API documentation: PathEffect Go in and look at the documentation, you can find that this PathEffect is the same as the MaskFilter (mask) and ColorFilter (color filter) we learned earlier, and there are almost no available methods:

We generally use his six subclasses:

ComposePathEffect

CornerPathEffect

DashPathEffect

DiscretePathEffect

PathDashPathEffect

SumPathEffect

Let's analyze their functions and construction methods in turn!

1. Subclass function and construction method parameter analysis:

1)CornerPathEffect

CornerPathEffect(float radius)

Connect the angles between the connecting line segments of the Path in a smoother way, similar to the effect of arcs and tangents. radius is the radius of the specified arc!

2)DashPathEffect

DashPathEffect(float[] intervals, float phase)

Make the line segment of Path dashed, intervals is an array of ON and OFF of the dashed line, the number of elements in the array needs to be >= 2; and phase is the offset when drawing!

3)DiscretePathEffect

DiscretePathEffect(float segmentLength, float deviation)

Disperse the line segments of the Path, so that the disintegration effect will occur on the basis of the original path. segmentLength specifies the maximum segment length, and deviation is the deviation when drawing.

4)PathDashPathEffect

PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)

The function is to use Path graphics to fill the current path, shape refers to the filling graphics, advance is the interval between each graphics, style is the free enumeration value of this type, there are three situations: ROTATE , MORPH and TRANSLATE .

In the case of ROTATE: the graphic transformation at the connection of the line segment is connected by rotating to an angle consistent with the moving direction of the next segment

In the case of MORPH: the graphics will be connected to the next segment with deformation such as stretching or compression

In the case of TRANSLATE: the graphics will be connected to the next segment by position translation

5)ComposePathEffect

ComposePathEffect(PathEffect outerpe, PathEffect innerpe)

The function is: the combination effect will first realize the innerpe, and then increase the outerpe effect on the basis of the innerpe!

6)SumPathEffect

SumPathEffect(PathEffect first, PathEffect second)

The function is: the superimposed effect, which is different from ComposePathEffect, will display the effects of the two parameters independently during performance, and then simply overlap and display the two effects together!

2. Write code to verify their respective effects

It's useless to say more, writing code is the most practical, let's write down the code to try the effects of these subclasses!

Running effect diagram :

Implementation code :

Let's write a View by ourselves. The effect of the line movement in it is caused by the phase increase, each time + 2, and then invalidate redraws, so don't be surprised! PathEffectView.java :

/**
 * Created by Jay on 2015/10/30 0030.
 */
public class PathEffectView extends View {

    private Paint mPaint;
    private Path mPath;
    private float phase = 0;
    private PathEffect[] effects = new PathEffect[7];
    private int[] colors;

    public PathEffectView(Context context) {
        this(context, null);
    }

    public PathEffectView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PathEffectView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //初始化画笔
    private void init() { 
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //anti-aliasing 
        mPaint.setStyle(Paint.Style.STROKE); //painting style: hollow 
        mPaint.setStrokeWidth(5); //stroke thickness 
        mPath = new Path(); 
        mPath.moveTo(0, 0); 
        for (int i = 1; i <= 15; i++) { 
            // Generate 15 points, randomly generate their coordinates, and connect them into a Path 
            mPath .lineTo(i * 40, (float) Math.random() * 100); 
        } 
        // Initialize 7 colors 
        colors = new int[] { Color.RED, Color.BLUE, Color.GREEN, 
                Color.YELLOW, Color .BLACK, Color.MAGENTA, Color.CYAN }; 
    } 


    @Override  
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.WHITE);
        //Initialize the path effect: 
        effects[0] = null; //no effect 
        effects[1] = new CornerPathEffect(10); //CornerPathEffect 
        effects[2] = new DiscretePathEffect(3.0f, 5.0f); //DiscretePathEffect 
        effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase); //DashPathEffect 
        Path p = new Path(); 
        p.addRect(0, 0, 8, 8, Path. Direction.CCW); 
        effects[4] = new PathDashPathEffect(p, 12, phase, 
                PathDashPathEffect.Style.ROTATE); //PathDashPathEffect 
        effects[5] = new ComposePathEffect(effects[2], effects[4]);    //ComposePathEffect
        effects[6] = new SumPathEffect(effects[2], effects[4]); // SumPathEffect 
        // Move the canvas to (10,10) and start drawing 
        canvas.translate(10, 10); 
        // Use 7 different path effects and 7 different colors to draw the path 
        for (int i = 0; i < effects.length; i++) { 
            mPaint.setPathEffect(effects[i]); 
            mPaint.setColor(colors[i]); 
            canvas.drawPath(mPath, mPaint); 
            canvas.translate(0 , 60); 
        } 
        // Change the phase value to form an animation effect 
        phase += 2; 
        invalidate(); 
    } 
}