Android 除了可以将 N 个点连成一条路径,还为路径绘制提供了 PathEffect 来定义绘制效果,PathEffect 包含了如下子类(每个子类代表一种绘制效果):
- ComposePathEffect 可以用来组合两种路径效果,就是把两种效果二合一。它是先将路径变成innerpe的效果,再去复合outerpe的路径效果,即:outerpe(innerpe(Path))。
- CornerPathEffect 将路径的转角变得圆滑,CornerPathEffect的构造方法只接受一个参数radius,意思就是转角处的圆滑程度。
- DashPathEffect 它包含了两个参数:第一个参数是一个浮点型的数组,偶数参数定义了每一条实线的长度,而奇数参数则表示每一条虚线的长度;第二个参数(phase)我称之为偏移值,动态改变其值会让路径产生动画的效果。
- DiscretePathEffect (离散路径效果)相对来说则稍微复杂点,它会在路径上绘制很多“杂点”的突出来模拟一种类似生锈铁丝的效果。其构造方法有两个参数:第一个呢指定这些突出的“杂点”的密度,值越小杂点越密集;第二个参数呢则是“杂点”突出的大小,值越大突出的距离越大反之反之。
- PathDashPathEffect 它和DashPathEffect是类似的,不同的是PathDashPathEffect可以让我们自己定义路径虚线的样式
- SumPathEffect 可以用来组合两种路径效果,就是把两种效果二合一。它是把两种路径效果加起来再作用于路径。
下面使用一个简单示例来演示上面 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 的值形成动画效果
invalidate();
}
}
}
上面示例的运行效果图:
除此之外,Android 的 Canvas 还提供了一个 drawTextOnPath 方法,该方法可以沿着 Path 绘制文本。下面是该方法的简单示例:
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);
}
}
}
该示例的运行效果:
参考文献:《疯狂Android讲义(第2版)》
参考链接:详解Paint的setPathEffect(PathEffect effect)