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