Android 绘制一条匀速线段 2020-11-24

Android 绘制一条匀速线段

需求：
根据不同的坐标点绘制出一条匀速且不断延伸的路线（虚线）

效果图：

直接上代码

public class PathView extends View {
    private  Path path;
    private  Paint paint;
    private  float length;
    private boolean isClean = false;
    private ObjectAnimator animator;
    
    public PathView(Context context) {
        super(context);
    }
    public PathView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public PathView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public  void init() {
        paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeJoin(Paint.Join.ROUND);
        path = new Path();
    }

    public  void drawPath( List<PathBean> list,int time){
        isClean = false;
        path = new Path();
        path.moveTo(list.get(0).getX(), list.get(0).getY());
        for (int i=1;i<list.size();i++){
            path.lineTo(list.get(i).getX(),list.get(i).getY());
        }
        PathMeasure measure = new PathMeasure(path, false);
        length = measure.getLength();
        if (animator ==null){
            animator = ObjectAnimator.ofFloat(PathView.this, "phase", 1.0f, 0.0f);
        }
        animator.setDuration(time);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
    }

    //is called by animtor object
    public void setPhase(float phase) {
//        Log.d("pathview", "setPhase called with:" + String.valueOf(phase));
        paint.setPathEffect(createPathEffect(length, phase, 0.0f));
        invalidate();//will calll onDraw

    }

    private PathEffect createPathEffect(float pathLength, float phase, float offset) {
//        return new DashPathEffect(new float[]{pathLength,pathLength},
//                Math.max(phase * pathLength, offset));

        DashPathEffect a = new DashPathEffect(new float[]{pathLength,pathLength},
                Math.max(phase * pathLength, offset));
        DashPathEffect b = new DashPathEffect(new float[]{1,10},
                5);
        return new ComposePathEffect(b,a);
    }
    public void clearAll(){
        isClean = true;
        if (animator!=null){
            animator.cancel();
        }
        invalidate();
    }


    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isClean){
        //这里如果采用这个办法，会变成黑色背景
//            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
            path = new Path();
            canvas.drawPath(path, paint);
        }else {
            canvas.drawPath(path, paint);
        }
    }
}

获取所有路径时间的方法

public class Utils {
    /*
    * 获取路径所有时间
    * */
    public static int getTimes(List<PathBean> list) {
        int times = 0;
        float distance = 0;
        for (int i = 0; i < list.size() - 1; i++) {
            float x1 = list.get(i).getX();
            float x2 = list.get(i + 1).getX();
            float y1 = list.get(i).getY();
            float y2 = list.get(i + 1).getY();
            double path = 0;
            path = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
            distance += path;
        }
        times = (int) distance * 1200 / 100;
        return times;
    }
}

调用的时候,定义两个按钮

pathView = findViewById(R.id.pathView);
pathView.init();

case R.id.draw:
	List<PathBean> list = new ArrayList<>();
    PathBean pathBean = null;
    pathBean = new PathBean(200,300);
    list.add(pathBean);
	pathBean = new PathBean(400,500);
	list.add(pathBean);
	pathBean = new PathBean(600,500);
	list.add(pathBean);
	pathBean = new PathBean(600,300);
    list.add(pathBean);
    pathView.drawPath(list, Utils.getTimes(list));
break;
case R.id.clean:
	pathView.clearAll();
break;

修改PathView这个方法

private PathEffect createPathEffect(float pathLength, float phase, float offset) {
        return new DashPathEffect(new float[]{pathLength,pathLength}, Math.max(phase * pathLength, offset));
}

得到的效果图：
大家根据个人需求选择

参考了无名大神的方法(https://cloud.tencent.com/developer/ask/151686)

***转载请标明出处 ***