Paint API - PathEffect (path effect)
Introduction to this section:
This section continues to learn Paint’s API-PathEffect (path effect). We set the sytle of the brush to Stroke. Draw graphics composed of lines, and these lines occasionally look monotonous, right? For example, if you want to change these to dotted lines first, then Or if you want to make the corners of the path smoother, etc., then you can consider using this PathEffect to achieve it!
Official API document: PathEffect Go in and look at the document, you can find this PathEffect and the MaskFilter (mask) and ColorFilter (color) we learned earlier Filter), there are almost no available methods:
We generally use its six subclasses:
Let’s analyze their functions and construction methods in turn!
1. Subclass function and constructor parameter analysis:
1)CornerPathEffect
CornerPathEffect(float radius)
Connect the angles between the connecting line segments of Path in a smoother way, similar to the effect of arcs and tangents. Radius specifies the radius of the arc!
2)DashPathEffect
DashPathEffect(float[] intervals, float phase)
Change the line segments of Path Dotted, intervals are an array of dotted ON and OFF, and the number of elements in the array needs to be >= 2; And phase is the offset when drawing!
3)DiscretePathEffect
DiscretePathEffect(float segmentLength, float deviation)
break up the line segments of Path, This causes the scattering effect to occur based on the original path. segmentLength specifies the maximum segment length, and deviation is the deviation during drawing.
4)PathDashPathEffect
PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style)
The function is to use the Path graphic to fill the current path, shape refers to the filled graphic, and advance is the interval between each graphic. Style is a free enumeration value of this class, with three cases: ROTATE, MORPH and TRANSLATE.
- In the case of ROTATE: the graphic transformation at the connection of the line segments is rotated to an angle consistent with the movement direction of the next segment.
- In the case of MORPH: the graphic will be stretched or In the case of compression and other deformations, it is connected to the next segment
- In the case of TRANSLATE: the graphic will be connected to the next segment in the form of positional translation
5)ComposePathEffect
ComposePathEffect(PathEffect outerpe, PathEffect innerpe)
The function is: Combined effect, the innerpe will be realized first, and then in On the basis of innerpe, the outerpe effect is added!
6)SumPathEffect
SumPathEffect(PathEffect first, PathEffect second)
The function is: superposition effect, Different from ComposePathEffect, the effects of the two parameters will be displayed independently during presentation. Then simply overlap the two effects to display them!
2. Write code to verify their respective effects
It’s useless to say more. Writing code is the most practical. Let’s write down the code to try out the effects of each of these subcategories. Effect!
Running renderings:
Implementation code:
We will write it ourselves A View, the effect of line movement inside is caused by the increase of phase, + 2 each time, Then invalidate just redraws, so don't be surprised! PathEffectView.java:
/**
* Created by Jay on 2015/10/30 0030.
*/
public class PathEffectView extends View {
private Paint mPaint;
private Path mPath;
private float phase = 0;
private PathEffect[] effects = new PathEffect[7];
private int[] colors;
public PathEffectView(Context context) {
this(context, null);
}
public PathEffectView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PathEffectView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//初始化画笔
private void init() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); //抗锯齿
mPaint.setStyle(Paint.Style.STROKE); //绘画风格:空心
mPaint.setStrokeWidth(5); //笔触粗细
mPath = new Path();
mPath.moveTo(0, 0);
for (int i = 1; i <= 15; i++) {
// 生成15个点，随机生成它们的坐标，并将它们连成一条Path
mPath.lineTo(i * 40, (float) Math.random() * 100);
}
// 初始化7个颜色
colors = new int[] { Color.RED, Color.BLUE, Color.GREEN,
Color.YELLOW, Color.BLACK, Color.MAGENTA, Color.CYAN };
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
//初始化其中路径效果：
effects[0] = null; //无效果
effects[1] = new CornerPathEffect(10); //CornerPathEffect
effects[2] = new DiscretePathEffect(3.0f, 5.0f); //DiscretePathEffect
effects[3] = new DashPathEffect(new float[] { 20, 10, 5, 10 },phase); //DashPathEffect
Path p = new Path();
p.addRect(0, 0, 8, 8, Path.Direction.CCW);
effects[4] = new PathDashPathEffect(p, 12, phase,
PathDashPathEffect.Style.ROTATE); //PathDashPathEffect
effects[5] = new ComposePathEffect(effects[2], effects[4]); //ComposePathEffect
effects[6] = new SumPathEffect(effects[2], effects[4]); //SumPathEffect
// 将画布移动到(10,10)处开始绘制
canvas.translate(10, 10);
// 依次使用7中不同的路径效果、7中不同的颜色来绘制路径
for (int i = 0; i < effects.length; i++) {
mPaint.setPathEffect(effects[i]);
mPaint.setColor(colors[i]);
canvas.drawPath(mPath, mPaint);
canvas.translate(0, 60);
}
// 改变phase值，形成动画效果
phase += 2;
invalidate();
}
}Okay, the comments of the code are very clear, so I won’t go into details here~
3. Sample code in this section Download:
Summary of this section
There is nothing difficult in this section, it just introduces PathEffect The six subclasses play a role by simply calling setPathEffect The method is applied to the Paint object, it is very simple~ Well, that’s all, thank you~
