Paint中DashPathEffect的简单使用

这篇文章和上篇同为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);
    }
}

这里说明一下,最后一个线是哪个动画,我的切屏软件不好用了,没切成动画,就放了一张静态图。
图如下:
在这里插入图片描述

发布了305 篇原创文章 · 获赞 261 · 访问量 184万+

猜你喜欢

转载自blog.csdn.net/chenguang79/article/details/102495722