Android 除了可以將 N 個(gè)點(diǎn)連成一條路徑，還為路徑繪制提供了 PathEffect 來定義繪制效果，PathEffect 包含了如下子類（每個(gè)子類代表一種繪制效果）：
- ComposePathEffect 可以用來組合兩種路徑效果，就是把兩種效果二合一。它是先將路徑變成innerpe的效果，再去復(fù)合outerpe的路徑效果，即：outerpe(innerpe(Path))。
- CornerPathEffect 將路徑的轉(zhuǎn)角變得圓滑，CornerPathEffect的構(gòu)造方法只接受一個(gè)參數(shù)radius，意思就是轉(zhuǎn)角處的圓滑程度。
- DashPathEffect 它包含了兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)浮點(diǎn)型的數(shù)組，偶數(shù)參數(shù)定義了每一條實(shí)線的長(zhǎng)度，而奇數(shù)參數(shù)則表示每一條虛線的長(zhǎng)度；第二個(gè)參數(shù)（phase）我稱之為偏移值，動(dòng)態(tài)改變其值會(huì)讓路徑產(chǎn)生動(dòng)畫的效果。
- DiscretePathEffect （離散路徑效果）相對(duì)來說則稍微復(fù)雜點(diǎn)，它會(huì)在路徑上繪制很多“雜點(diǎn)”的突出來模擬一種類似生銹鐵絲的效果。其構(gòu)造方法有兩個(gè)參數(shù)：第一個(gè)呢指定這些突出的“雜點(diǎn)”的密度，值越小雜點(diǎn)越密集；第二個(gè)參數(shù)呢則是“雜點(diǎn)”突出的大小，值越大突出的距離越大反之反之。
- PathDashPathEffect 它和DashPathEffect是類似的，不同的是PathDashPathEffect可以讓我們自己定義路徑虛線的樣式
- SumPathEffect 可以用來組合兩種路徑效果，就是把兩種效果二合一。它是把兩種路徑效果加起來再作用于路徑。
下面使用一個(gè)簡(jiǎn)單示例來演示上面 6 種效果。
下面是主程序的代碼：
package com.toby.personal.testlistview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposePathEffect;
import android.graphics.CornerPathEffect;
import android.graphics.DashPathEffect;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.PathEffect;
import android.graphics.SumPathEffect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
public class MainActivity extends AppCompatActivity {
final private static String TAG = "Toby_Test";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new TestView(this));
}
class TestView extends View {
private float phase;
private PathEffect[] effects;
private int[] colors;
private Paint paint;
private Path path;
private Path path1;
public TestView(Context context) {
super(context);
paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);
path = new Path();
path.moveTo(0, 0);
for (int i = 1; i <= 15; i++) {
path.lineTo(i * 20, (float) Math.random() * 60);
}
path1 = new Path();
path1.addRect(0, 0, 8, 8, Path.Direction.CCW);
colors = new int[]{Color.BLACK, Color.BLUE, Color.CYAN, Color.GREEN,
Color.MAGENTA, Color.RED, Color.YELLOW};
effects = new PathEffect[7];
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);
effects[0] = null;
effects[1] = new CornerPathEffect(10);
effects[2] = new DiscretePathEffect(3.0f, 5.0f);
effects[3] = new DashPathEffect(new float[]{20, 10, 5, 10}, phase);
effects[4] = new PathDashPathEffect(path1, 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);
for (int i = 0; i < effects.length; i++) {
paint.setPathEffect(effects[i]);
paint.setColor(colors[i]);
canvas.drawPath(path, paint);
canvas.translate(0, 60);
}
phase += 1; // 改變 phase 的值形成動(dòng)畫效果
invalidate();
}
}
}
上面示例的運(yùn)行效果圖：
顯示效果
除此之外，Android 的 Canvas 還提供了一個(gè) drawTextOnPath 方法，該方法可以沿著 Path 繪制文本。下面是該方法的簡(jiǎn)單示例：
package com.toby.personal.testlistview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ComposePathEffect;
import android.graphics.CornerPathEffect;
import android.graphics.DashPathEffect;
import android.graphics.DiscretePathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathDashPathEffect;
import android.graphics.PathEffect;
import android.graphics.RectF;
import android.graphics.SumPathEffect;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
public class MainActivity extends AppCompatActivity {
final private static String TAG = "Toby_Test";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new TestTextView(this));
}
class TestTextView extends View {
final private static String DRAW_TEXT = "This is a test text.";
Path[] paths = new Path[3];
Paint paint;
public TestTextView(Context context) {
super(context);
paths[0] = new Path();
paths[0].moveTo(0, 0);
for (int i = 0; i <= 7; ++i) {
paths[0].lineTo(i * 30, (float) Math.random() * 30);
}
paths[1] = new Path();
RectF rectF = new RectF(0, 0, 200, 120);
paths[1].addOval(rectF, Path.Direction.CCW);
paths[2] = new Path();
paths[2].addArc(rectF, 60, 180);
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.CYAN);
paint.setStrokeWidth(1);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.GRAY);
canvas.translate(40, 40);
paint.setTextAlign(Paint.Align.RIGHT);
paint.setTextSize(30);
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(paths[0], paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawTextOnPath(DRAW_TEXT, paths[0], -8, 20, paint);
canvas.translate(0, 60);
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(paths[1], paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawTextOnPath(DRAW_TEXT, paths[1], -20, 20, paint);
canvas.translate(0, 120);
paint.setStyle(Paint.Style.STROKE);
canvas.drawPath(paths[2], paint);
paint.setStyle(Paint.Style.FILL);
canvas.drawTextOnPath(DRAW_TEXT, paths[2], -10, 20, paint);
}
}
}
該示例的運(yùn)行效果：
顯示效果
參考文獻(xiàn)：《瘋狂Android講義（第2版）》
參考鏈接：詳解Paint的setPathEffect(PathEffect effect)
