自定義控制項詳解（四）：Paint 畫筆路徑效果

Paint 畫筆，即用來繪製圖形的"筆" 前面我們知道了Paint的一些基本用法：不過我們會發現，這樣畫出的線條都是筆筆直直的，能滿足需求，但是美觀上並不好看。這就需要使用到Paint類更多的一些方法了首先，看下最簡單設置的線條一、線條路徑樣式設置路徑樣式;取值類型是所有派生自Path ...

Paint 畫筆，即用來繪製圖形的"筆"

前面我們知道了Paint的一些基本用法：

paint.setAntiAlias(true);//抗鋸齒功能
paint.setColor(Color.RED);  //設置畫筆顏色    
paint.setStyle(Style.FILL);//設置填充樣式
paint.setStrokeWidth(10);//設置畫筆寬度 ，單位px
paint.setShadowLayer(10, 15, 15, Color.GREEN);//設置陰影

不過我們會發現，這樣畫出的線條都是筆筆直直的，能滿足需求，但是美觀上並不好看。

這就需要使用到Paint類更多的一些方法了

首先，看下最簡單設置的線條

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);
//繪製一個紅色，線條寬度50px 的折線
canvas.drawPath(path,paint);

一、線條路徑樣式

public void setPathEffect(PathEffect effect);

　　設置路徑樣式;取值類型是所有派生自PathEffect的子類

　從第二個到最後一個，每一個都表示一個樣式，其中用的最多的是 CornerPathEffect--圓形拐角效果，DashPathEffect——虛線效果

　（1）、CornerPathEffect--圓形拐角效果

　　new CornerPathEffect(float radius) // radius 表示彎曲的半徑程度

Path path = new Path();
path.moveTo(100,500);
path.lineTo(200,200);
path.lineTo(300,500);
//繪製一個紅色，線條寬度50px 的折線
paint.setPathEffect(new CornerPathEffect(5));
canvas.drawPath(path,paint);

可以看到原來直線的折角現在已經有一個彎曲程度了

拓展：我們可以根據這個方法來進行曲線圖的實現

　　（2）、DashPathEffect——虛線效果

public DashPathEffect(float intervals[], float phase)  
intervals[]：表示組成虛線的各個線段的長度；整條虛線就是由intervals[]中這些基本線段迴圈組成的。
phase：      開始繪製的偏移值

　註意： intervals[ ] 裡面個數不限，但至少為2個。

　　　　可以為單數個，也可以為雙數個，如果為單數個，多出來的最後一個無效果

　　雙數個，表示一個實現長度，一個空線長度

　　　　比如 new DashPathEffect(new float[]{30,10,20,10},10);

　　　　那麼每一段都分為4部分，先是30px的實線，再是10px的空心線，再是20px的實線，再是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);

至於其他的效果，大家可以自己嘗試。

二、ComposePathEffect與SumPathEffect 疊加路徑效果

從英文上可以看出這兩個方法是用來合併路徑效果的，但既然是兩個方法，就有相應的區別

　　(1)、ComposePathEffect

　　　　這種合併路徑效果是先將paint 設置成第二個參數的路徑效果，然後在此基礎上在設置成第一個參數對應的路徑效果

　　　　我們給一個線條，設置圓形拐角路徑和一個虛線路徑看一下

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(3);
Path path = new Path();
path.moveTo(100,600);
path.lineTo(200,200);
path.lineTo(300,600);
//虛線路徑
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{30, 10, 20, 10}, 0);
//圓角拐點路徑
CornerPathEffect cornerPathEffect = new CornerPathEffect(10);
//合併後的路徑
ComposePathEffect composePathEffect = new ComposePathEffect(dashPathEffect, cornerPathEffect);
//設置路徑
paint.setPathEffect(composePathEffect);
canvas.drawPath(path,paint);

　　（2）、SumPathEffect

　　　　這種合併路徑效果是分別將兩個路徑的效果疊加的顯示出現

　　　　我們給一個線條，設置圓形拐角路徑和一個虛線路徑看一下

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(3);
Path path = new Path();
path.moveTo(100,600);
path.lineTo(200,200);
path.lineTo(300,600);
//虛線路徑
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{30, 10, 20, 10}, 0);
//圓角拐點路徑
CornerPathEffect cornerPathEffect = new CornerPathEffect(50);
//合併後的路徑
SumPathEffect sumPathEffect = new SumPathEffect(dashPathEffect,cornerPathEffect);
//設置路徑
paint.setPathEffect(sumPathEffect);
canvas.drawPath(path,paint);

可以看出一個虛線路徑和一個圓形拐角路徑疊加顯示起來的效果

三、setStrokeCap(Paint.Cap cap)

　　設置線帽樣式，取值有Cap.ROUND(圓形線帽)、Cap.SQUARE(方形線帽)、Paint.Cap.BUTT(無線帽)

　　線冒，可以理解為一條線兩個端點，設置線冒樣式使線條兩端不看起來不那麼死板

　　這裡繪製3條不同樣式的直線來看一下效果

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);

四、setStrokeJoin(Paint.Join join)

　　設置結合處效果取值：

1、Join.MITER（結合處為銳角）
2、Join.Round(結合處為圓弧)
3、Join.BEVEL(結合處為直線)

　　舉例：

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);