[移动开发]PathView手绘路径自定义控件

前言

代码很简单，看看就懂

源代码

 /**
 * 文件名：PathView
 * 描  述：
 * 作  者： 
 * 时  间：2022/3/14 14:10
 */

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Region;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;

public class PathView extends View {

    //----绘制轨迹----
    private float mX;
    private float mY;
    private final Paint mGesturePaint = new Paint();
    private final Path mPath = new Path();
    private final ArrayList<Point> mPathPoints = new ArrayList<Point>();
    Region re = new Region();

    private int Black;
    private int White;
    private final int Strokewidth;
    private final int LineWidth;
    private boolean mTouchPath;

    public PathView(Context context, AttributeSet attrs) {
        super(context, attrs);

        Black = ContextCompat.getColor(context, android.R.color.black);
        White = ContextCompat.getColor(context, android.R.color.white);
        Strokewidth = dp2px(3.0f);
        LineWidth = dp2px(1f);

        mGesturePaint.setColor(White);
        mGesturePaint.setShadowLayer(LineWidth, LineWidth, LineWidth, Black);
        mGesturePaint.setStyle(Paint.Style.STROKE);
        mGesturePaint.setStrokeWidth(Strokewidth);
    }

    public PathView(Context context) {
        this(context, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (mTouchPath) {
            canvas.drawPath(mPath, mGesturePaint);
        }
    }

    private int dp2px(float dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,
                getResources().getDisplayMetrics());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touchDown(event);
                break;
            case MotionEvent.ACTION_MOVE:
                touchMove(event);
                break;
            case MotionEvent.ACTION_UP:
                mPath.close();
                touchDone(event);
                break;
        }
        //更新绘制
        invalidate();
        return mTouchPath && true;
    }

    private void touchDone(MotionEvent event) {
        //------关键部分 判断点是否在 一个闭合的path内--------//
        //构造一个区域对象，左闭右开的。
        RectF r = new RectF();
        //计算控制点的边界
        mPath.computeBounds(r, true);
        //设置区域路径和剪辑描述的区域
        re.setPath(mPath, new Region((int) r.left, (int) r.top, (int) r.right, (int) r.bottom));
        //在封闭的path内返回true 不在返回false

        Rect bounds = new Rect();
        re.getBounds(bounds);

        PathMeasure pathMeasure = new PathMeasure(mPath, false);
        int length = (int) (pathMeasure.getLength() / 10);
        Log.e("", "--length----" + length);
        if (length > 10 && !mPathPoints.isEmpty()) {
            Point[] points = mPathPoints.toArray(new Point[0]);
            mTouchPathListener.finish(bounds, points);
        }
        mPath.reset();
        invalidate();

        Log.e("", "--判断点是否则范围内----" + re.contains((int) event.getX(), (int) event.getY()));
    }

    //---------------下边是划线部分----------------------------//
    //手指点下屏幕时调用
    private void touchDown(MotionEvent event) {
        //重置绘制路线，即隐藏之前绘制的轨迹
        mPathPoints.clear();
        mPath.reset();
        float x = event.getX();
        float y = event.getY();
        mX = x;
        mY = y;
        mPath.moveTo(x, y);
        mPathPoints.add(new Point((int)mX, (int)mY));
    }

    //手指在屏幕上滑动时调用
    private void touchMove(MotionEvent event) {
        final float x = event.getX();
        final float y = event.getY();
        final float previousX = mX;
        final float previousY = mY;
        final float dx = Math.abs(x - previousX);
        final float dy = Math.abs(y - previousY);
        //两点之间的距离大于等于3时，连接连接两点形成直线
        if (dx >= 3 || dy >= 3) {
            //两点连成直线
            mPath.lineTo(x, y);
            //第二次执行时，第一次结束调用的坐标值将作为第二次调用的初始坐标值
            mX = x;
            mY = y;

            mPathPoints.add(new Point((int)mX, (int)mY));
        }
    }

    public interface TouchPathListener {
        void finish(Rect bounds, Point[] points);
    }

    private TouchPathListener mTouchPathListener;

    public void setTouchPath(boolean touchPath, TouchPathListener touchPathListener) {
        mTouchPath = touchPath;
        mTouchPathListener = touchPathListener;
    }

    public boolean ismTouchPath() {
        return mTouchPath;
    }
}

使用

pathTouchView.setTouchPath(!pathTouchView.ismTouchPath(), new PathView.TouchPathListener() {
      @Override
      public void finish(Rect bounds, Point[] srcPoints) {
      
          pathTouchView.setTouchPath(false, null);
      }
  });

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生