7 path drawing effects of path

1. The code is as follows:

public class Main3Activity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        LinearLayout layout = new LinearLayout(this);
        setContentView(layout);
        MyPathView view = new MyPathView(this);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT));
        layout.addView(view);
    }

    class MyPathView extends View{
        float phase;
        //In addition to the default no path effect, plus 6 kinds of PathEffect, there are 7 kinds of path effects in total
        PathEffect[] effects = new PathEffect[7];
        int[] colors;
        private Paint paint;
        Path path;

        public MyPathView(Context context) {
            super(context);
            paint = new Paint();
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(4);

            path = new Path();
            path.moveTo( 0 , 0 );
            //After connecting 40 points, the y coordinate is randomly generated, the x coordinate keeps moving to the right, and there is no path effect
            for (int i = 1 ; i <= 40 ; i++){
                path.lineTo(i * 10 , (float) (Math.random()*60));
            }
            //CYAN blue-green magenta fuchsia, magenta
            colors = new int[]{Color.BLACK , Color.BLUE , Color.CYAN , Color.GREEN , Color.MAGENTA , Color.RED , Color.YELLOW};
        }


        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawColor(Color.WHITE);
            //7 kinds of path effects, drawn in turn
            effects[0] = null;
            effects[1] = new CornerPathEffect(10);
            effects[2] = new DiscretePathEffect(3f , 5f);
            effects[3] = new DashPathEffect(new float[] {20 , 10 , 5, 10} , phase);
            Path p = new Path();
            p.addRect(0 , 0 , 8 , 8 ,Path.Direction.CCW);
            effects[4] = new PathDashPathEffect(p , 12 , phase , PathDashPathEffect.Style.ROTATE);
            effects[5] = new ComposePathEffect(effects[2] , effects[4]);
            effects[6] = new SumPathEffect(effects[4] , effects[3]);
            canvas.translate(8 , 8);//Move the origin to 8,8
            for (int i = 0 ; i < effects.length ; i++) {
                paint.setPathEffect(effects[i]);
                paint.setColor(colors[i]);
                canvas.drawPath(path , paint); //Draw 7 paths in turn, (path is the relative origin 0,0 written before)
                canvas.translate(0 , 60); //The origin keeps moving down, which is equivalent to changing the style of the path and redrawing it after moving down
            }
            phase += 1;
            invalidate(); //Re ondraw method
        }
    }

}

2. The effect is as follows:


3. Explain as follows:

public class Main3Activity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        LinearLayout layout = new LinearLayout(this);
        setContentView(layout);
        MyPathView view = new MyPathView(this);
        view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT , ViewGroup.LayoutParams.MATCH_PARENT));
        layout.addView(view);
    }

    class MyPathView extends View{
        float phase;
        //In addition to the default no path effect, plus 6 kinds of PathEffect, there are 7 kinds of path effects in total
        PathEffect[] effects = new PathEffect[7];
        int[] colors;
        private Paint paint;
        Path path;

        public MyPathView(Context context) {
            super(context);
            paint = new Paint();
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(4);

            path = new Path();
            path.moveTo( 0 , 0 );
            //After connecting 40 points, the y coordinate is randomly generated, the x coordinate keeps moving to the right, and there is no path effect
            for (int i = 1 ; i <= 40 ; i++){
                path.lineTo(i * 10 , (float) (Math.random()*60));
            }
            //CYAN blue-green magenta fuchsia, magenta
            colors = new int[]{Color.BLACK , Color.BLUE , Color.CYAN , Color.GREEN , Color.MAGENTA , Color.RED , Color.YELLOW};
        }


        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawColor(Color.WHITE);
            //7 kinds of path effects, drawn in turn
            // By default there is no path effect
            effects[0] = null;
            //CornerPathEffect :
            //The first parameter radius, which means the degree of smoothness at the corner. In the above picture, you can clearly feel the smoothness of the corner.
            effects[1] = new CornerPathEffect(10);
            //DiscretePathEffect : draws a lot of noise around the original path, making the path look rusty
            // The first parameter specifies the density of these prominent "noise", the smaller the value, the denser the noise;
            //The second parameter is the size of the "noise" protrusion, the larger the value, the greater the protrusion distance, and vice versa
            effects[2] = new DiscretePathEffect(3f , 5f);
            //DashPathEffect : The path effect is a dotted line, you can specify the length of the solid line and the dotted line, as follows (the solid line is 20, the dotted line is 10, then the solid line is 5, the dotted line is 10,) and then loop
            //The number of elements of the first parameter array must be at least 2, specifying the length of the solid dotted line respectively
            //The second parameter is the offset value, changing this value constantly can make the path produce animation effect, because there are virtual and real, so that the path feels flowing
            effects[3] = new DashPathEffect(new float[] {20 , 10 , 5, 10} , phase);
            Path p = new Path();
            p.addRect(0 , 0 , 8 , 8 ,Path.Direction.CCW);
            //PathDashPathEffect : similar to DashPathEffect
            //The first parameter: Let us define the style of the path filling, here is a square P. It can be a circle, etc. .
            //The second parameter: the length of the whitespace between the two styles
            //The third parameter: offset value, let the path flow
            //The fourth parameter: processing at the corner, such as how the square p passes at the corner. There are three ways (Style.ROTATE, Style.MORPH and Style.TRANSLATE)
            //Style.ROTATE means to rotate past
            //Style.MORPH indicates that the past is deformed by stretching or compression
            //Style.TRANSLATE represents the past in the way of position translation
            effects[4] = new PathDashPathEffect(p , 12 , phase , PathDashPathEffect.Style.ROTATE);
            //ComposePathEffect : Combine path effect
            //To pass in two patheffects, the effect is to add the effect of the first parameter to the effect of the second parameter
            effects[5] = new ComposePathEffect(effects[2] , effects[4]);
            //SumPathEffect : overlay path effect
            //The effects of both parameters will be displayed and then superimposed
            effects[6] = new SumPathEffect(effects[4] , effects[3]);
            canvas.translate(8 , 8);//Move the origin to 8,8
            for (int i = 0 ; i < effects.length ; i++) {
                paint.setPathEffect(effects[i]);
                paint.setColor(colors[i]);
                canvas.drawPath(path , paint); //Draw 7 paths in turn, (path is the relative origin 0,0 written before)
                canvas.translate(0 , 60); //The origin keeps moving down, which is equivalent to changing the style of the path and redrawing it after moving down
            }
            phase += 1;
            invalidate(); //Re ondraw method
        }
    }

}



Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324731299&siteId=291194637