1、paint线帽

   private void drawStrokeCap( Canvas canvas ) {
    Paint paint = new Paint();

    paint.setAntiAlias( true );
    paint.setStrokeWidth( 100 );
    paint.setColor(Color.parseColor("#00ff00") );
    paint.setStrokeCap( Paint.Cap.BUTT );       // 线帽，即画的线条两端是否带有圆角，butt，无圆角
    canvas.drawLine( 100,100,400, 100, paint );

    paint.setColor(Color.parseColor("#ff0000") );
    paint.setStrokeCap( Paint.Cap.ROUND );       // 线帽，即画的线条两端是否带有圆角，ROUND，圆角
    canvas.drawLine( 100,300,400, 300, paint );

    paint.setColor(Color.parseColor("#0000ff") );
    paint.setStrokeCap( Paint.Cap.SQUARE );       // 线帽，即画的线条两端是否带有圆角，SQUARE，矩形
    canvas.drawLine( 100,600,400, 600, paint );
}

Paste_Image.png

2、Paint与Path接合，多线条连接拐角弧度，StrokeJoin

private void drawStrokeJoin( Canvas canvas ) {
    Paint paint = new Paint();

    paint.setAntiAlias( true );
    paint.setStrokeWidth( 20 );
    paint.setStyle(Paint.Style.STROKE ); // 默认是填充 Paint.Style.FILL
    paint.setColor( Color.parseColor("#0000ff") );

    Path path = new Path();
    path.moveTo( 100, 100 ); // 路径path默认是在原点(0,0)，当前移植到(100,100)
    path.lineTo( 400, 100 );
    path.lineTo( 200, 200 );
    paint.setStrokeJoin(Paint.Join.BEVEL );

    canvas.drawPath( path, paint );

    paint.setStyle(Paint.Style.STROKE );
    path.moveTo( 100, 300 ); // 路径path默认是在原点(0,0)，当前移植到(100,300)
    path.lineTo( 500, 300 );
    path.lineTo( 100, 500 );
    paint.setStrokeJoin(Paint.Join.ROUND );

    canvas.drawPath( path, paint );
}

Paste_Image.png

3、Paint与Path接合之PathEffect

PathEffect有6个子类，分别为DashPathEffect，PathDashPathEffect，SumPathEffect，CornerPathEffect，DiscretePathEffect，ComposePathEffect，下面会一一讲解

Paste_Image.png

具体的绘制流程都交由native完成

Paste_Image.png

private void drawPathEffect( Canvas canvas ) {

    Path path = new Path();
    path.moveTo( 100, 600 ); // 路径path默认是在原点(0,0)，当前移植到(100,600)
    path.lineTo( 400, 100 );
    path.lineTo( 500, 600 );

    Paint paint = new Paint();
    paint.setColor( Color.RED );
    paint.setStrokeWidth( 3 );
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE );

    // 50,圆角, 像素
    paint.setPathEffect( new CornerPathEffect(50) );
    canvas.drawPath( path,paint );
    
    paint.setPathEffect( new CornerPathEffect(100) );
    canvas.drawPath( path,paint );
}

Paste_Image.png

具体的圆角构成，其实就相当于在顶部放置了一个半径为radius/2的圆

4、利用path绘制简单的路径

private void drawMutilCornerPathEffect( Canvas canvas ) {
    Paint paint = new Paint();
    paint.setStrokeWidth( 3 );
    paint.setColor( Color.RED );
    paint.setStyle(Paint.Style.STROKE );
    paint.setAntiAlias( true );

    Path path = getPath();
    canvas.drawPath( path, paint );
    // canvas.save(); // 保存上一次绘制(画布)，保证下一次绘制不受影响
    
    paint.setPathEffect( new CornerPathEffect(10) );
    canvas.translate( 0,300 );
    canvas.drawPath( path, paint );

}

private Path getPath() {
    Path path = new Path();
    path.moveTo(0,0);
    for( int i = 1; i <= 50; i++ ) {
        path.lineTo( 20 * i, (float) (( Math.random() * 50 * i) % 200));
    }
    return path;
}

Paste_Image.png

5、DashPathEffect虚线的简单绘制

private void drawDashPathEffect( Canvas canvas ) {
    Paint paint = new Paint();
    paint.setStrokeWidth( 3 );
    paint.setColor( Color.RED );
    paint.setStyle(Paint.Style.STROKE );
    paint.setAntiAlias( true );

    Path path = getPath();
    // DashPathEffect 画虚线，{10,15,20,25}  10 实线，15虚线，20实线，25虚线，
    // 虚线绘制的时候会不断的循环这个数组，０表示偏移量
    paint.setPathEffect( new DashPathEffect( new float[]{10,15,20,25}, 0) );
    canvas.translate( 0,300 );
    canvas.drawPath( path, paint );
}

Paste_Image.png