这篇文章和上篇同为Paint中PathEffect的子类使用。DashPathEffect这个类的应用很有意思,也很实用,这里简单说一下。然后通知一个例子了解一下。
public DashPathEffect(float intervals[], float phase)
这个就是它的方法,可以看到它有两个参数,现在简单说一下。
第一个,float intervals[],它是一个数组,这里用来存放,显示的实线与虚线的长度。
这里要说明一点,这里的虚线和我们平时说的虚线有点不一样,这里的虚线,其实就是我们平时说的虚线之是的空。这个在之后的例子中,你可以到
第二个,phase,它是一个偏移的数值,就是左右偏移量,正数向左,负数向右。
好了,下成看一下例子,就一切都明白了。
public class PathLine extends View {
private Path mPath;
private Path mPath1;
private Path mPath2;
private Path mPath3;
private Path mPath4;
private Path mPath5;
private Paint mPaint;
private Paint mPaint1;
private Paint mPaint2;
private Paint mPaint3;
private Paint mPaint4;
private Paint mPaint5;
private PathEffect mPathEffect;
private PathEffect dashPathEffect;
private PathEffect dashPathEffect1;
private PathEffect dashPathEffect2;
private PathEffect dashPathEffect3;
private PathEffect dashPathEffect4;
private PathEffect dashPathEffect5;
private PathMeasure mPathMeasure;
private float mlength;
private float animValue;
public PathLine(Context context) {
this(context,null);
}
public PathLine(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public PathLine(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
mPaint.setColor(Color.RED);
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint1.setStyle(Paint.Style.STROKE);
mPaint1.setStrokeWidth(5);
mPaint1.setColor(Color.RED);
mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint2.setStyle(Paint.Style.STROKE);
mPaint2.setStrokeWidth(5);
mPaint2.setColor(Color.RED);
mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint3.setStyle(Paint.Style.STROKE);
mPaint3.setStrokeWidth(5);
mPaint3.setColor(Color.RED);
mPaint4 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint4.setStyle(Paint.Style.STROKE);
mPaint4.setStrokeWidth(5);
mPaint4.setColor(Color.RED);
mPaint5 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint5.setStyle(Paint.Style.STROKE);
mPaint5.setStrokeWidth(5);
mPaint5.setColor(Color.RED);
mPath = new Path();
mPath.moveTo(0,300);
mPath.lineTo(200,300);
mPath.lineTo(400,100);
mPath.lineTo(600,400);
mPath1 = new Path();
mPath1.moveTo(0,350);
mPath1.lineTo(200,350);
mPath1.lineTo(400,150);
mPath1.lineTo(600,450);
mPath2 = new Path();
mPath2.moveTo(0,400);
mPath2.lineTo(200,400);
mPath2.lineTo(400,200);
mPath2.lineTo(600,500);
mPath3 = new Path();
mPath3.moveTo(0,450);
mPath3.lineTo(200,450);
mPath3.lineTo(400,250);
mPath3.lineTo(600,550);
mPath4 = new Path();
mPath4.moveTo(0,500);
mPath4.lineTo(200,500);
mPath4.lineTo(400,300);
mPath4.lineTo(600,600);
mPath5 = new Path();
mPath5.moveTo(0,550);
mPath5.lineTo(200,550);
mPath5.lineTo(400,350);
mPath5.lineTo(600,650);
mPathMeasure = new PathMeasure(mPath5,false);
mlength = mPathMeasure.getLength();
//这里的值越大,折角处的圆角就越光滑
// mPathEffect = new CornerPathEffect(50);
// mPaint.setPathEffect(mPathEffect);
dashPathEffect = new DashPathEffect(new float[]{20,5},0);
mPaint.setPathEffect(dashPathEffect);
/**
* 通知验证啊,实线就是我们能看到的线断,虚线就是中间的空白。这个感觉解释有点坑
* new float[]{} 中正常应该是偶数个数出现,奇数位为实数,偶数位为虚线,也就是空
* 如果是奇数个数,哪么它不会任何作用
*/
dashPathEffect1 = new DashPathEffect(new float[]{20,30},0);
mPaint1.setPathEffect(dashPathEffect1);
dashPathEffect2 = new DashPathEffect(new float[]{20,30,10,20},0);
mPaint2.setPathEffect(dashPathEffect2);
dashPathEffect3 = new DashPathEffect(new float[]{20,30,10},0);
mPaint3.setPathEffect(dashPathEffect3);
/**
* DashPathEffect第二个参数phase,位移,它根据数值进行左右移动,正数向左,负数向右
* 它其实是将开始位置进行了位移,看一下,dashPathEffect4的线段你就明白了,
* 第一个实线和dashPathEffect3的第一个实线比,是不是小了一半,因为我们向左移动了10
*/
dashPathEffect4 = new DashPathEffect(new float[]{20,30,10},20);
mPaint4.setPathEffect(dashPathEffect4);
/**
* 这里加了一个好玩的动画,网上也有关的例子
* 它是利用DashPathEffect来实现一个线段动画画出的效果
* 原理简单说一下:
* 1、mlength是整条线的长度,这个大家使用PathMeasure就可以得到
* 2、在DashPathEffect中我们将实线的长度与虚线的长度设置成和整条线的长度一样,
* 就是画了一条实线。因为根本就没有画空的地方。如果我们把phase这个偏移量也改成整条线的长度,那它就全是空了也就是(虚线)
* 3、在动画中,我们将animValue的值从1变成0,而且和mlength进行相乘
* 这样它的偏移量就是在不断的变小,这个时候,实线就不断的出来了。
*/
ValueAnimator animator = ValueAnimator.ofFloat(1,0);
animator.setDuration(2000);
animator.setRepeatCount(0);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
animValue = (float)animation.getAnimatedValue();
dashPathEffect5 = new DashPathEffect(new float[]{mlength,mlength},mlength*animValue);
mPaint5.setPathEffect(dashPathEffect5);
invalidate();
}
});
animator.start();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath,mPaint);
canvas.drawPath(mPath1,mPaint1);
canvas.drawPath(mPath2,mPaint2);
canvas.drawPath(mPath3,mPaint3);
canvas.drawPath(mPath4,mPaint4);
canvas.drawPath(mPath5,mPaint5);
// canvas.drawLine(0,300,200,300,mPaint);
// canvas.drawLine(200,300,400,100,mPaint);
// canvas.drawLine(400,100,600,400,mPaint);
}
}
这里说明一下,最后一个线是哪个动画,我的切屏软件不好用了,没切成动画,就放了一张静态图。
图如下: