1574325821921.gif

自定义控件

public class drawView extends View {
    private ArrayList<ImageView>dotViews;
    private Point startPoint;
    private Point endPoint;
    private Paint mPaint;
    private ArrayList<Path>paths;
    private ArrayList<ImageView>selected;

    public drawView(Context context) {
        super(context);

        mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.STROKE);

        paths=new ArrayList<>();

        selected=new ArrayList<>();
    }

    public drawView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public drawView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setDotView(ArrayList<ImageView>dotViews){
        this.dotViews=dotViews;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x=event.getX();
        float y=event.getY();

        ImageView dot;
        switch(event.getAction()){
            case MotionEvent.ACTION_DOWN:
                dot=viewContainedPoint(x,y);
                if(dot!=null){
                    dot.setVisibility(VISIBLE);
                    selected.add(dot);
                    //设置起始点
                    startPoint=new Point((int)(dot.getPivotX()
                    +dot.getX()),(int)(dot.getPivotY()+
                            dot.getY()));
                }
                break;
            case MotionEvent.ACTION_MOVE:
                dot=viewContainedPoint(x,y);
                if(dot==null){
                    //划线
                    endPoint=new Point((int)x,(int)y);
                    //刷新
                    invalidate();
                }else{
                    //判断是第一个点还是其他
                    if(startPoint==null){
                        //第一个点
                        dot.setVisibility(VISIBLE);
                        //设置起始点
                        startPoint=new Point((int)(dot.getPivotX()
                                +dot.getX()),(int)(dot.getPivotY()+
                                dot.getY()));
                    }else{
                        //点亮点
                        dot.setVisibility(VISIBLE);
                        //在之前和现在的点之间产生一个path
                        Path path=new Path();
                        path.moveTo(startPoint.x,startPoint.y);
                        path.lineTo(dot.getPivotX()+dot.getX(),
                                dot.getPivotY()+dot.getY());
                        paths.add(path);

                        //当前这个点就是起始点
                        //设置起始点
                        startPoint=new Point((int)(dot.getPivotX()
                                +dot.getX()),(int)(dot.getPivotY()+
                                dot.getY()));
                        endPoint=startPoint;

                        //刷新
                        invalidate();
                    }
                    selected.add(dot);
                }
                break;
            case MotionEvent.ACTION_UP:
                clear();
                break;
        }
        return true;
    }

    private void clear(){
        for(ImageView dot:selected){
            dot.setVisibility(INVISIBLE);
        }

        selected.clear();
        paths.clear();
        startPoint=null;
        endPoint=null;

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(paths.size()>0){
            for (Path path:paths){
                canvas.drawPath(path,mPaint);
            }
        }

        if(startPoint!=null&&endPoint!=null){
            canvas.drawLine(startPoint.x,startPoint.y,
                    endPoint.x,endPoint.y,mPaint);

        }
    }

    //判断触摸点是否在某个dot内
    private ImageView viewContainedPoint(float x,float y){
        for(ImageView dot:dotViews){
            int[] point=new int[2];
            dot.getLocationOnScreen(point);

            int px=(int)dot.getX();
            int py=(int)dot.getY();
            if((x>=px&&x<=px+dot.getWidth())&&
                    (y>=py&&y<=py+dot.getHeight())){
                return dot;
            }
        }
        return null;
    }

}

MainActivity

public class MainActivity extends AppCompatActivity {

    RelativeLayout rl;
    ArrayList<ImageView>dotViews;
    drawView drawView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        rl=findViewById(R.id.rl_root);
        dotViews=new ArrayList<>();

        //正常显示的点
        initNineDot(R.drawable.normal, View.VISIBLE);
        //绘制视图
        initDrawView();
        //点亮的点
        initNineDot(R.drawable.selected,View.INVISIBLE);

        //将所有点的数组传递给drawView
        drawView.setDotView(dotViews);

    }

    private void initDrawView(){
        drawView=new drawView(this);

        RelativeLayout.LayoutParams params=new
                RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);

        rl.addView(drawView,params);
    }

    //图片 隐藏tag
    private void initNineDot(int res,int visible){
        float padding=pixelFromDp(40);

        //计算两个点中心点之间的差距
        Point p=new Point();

        getWindowManager().getDefaultDisplay().getSize(p);

        //获取图片
        Bitmap bitmap= BitmapFactory.decodeResource(getResources(),res);
        float space=(p.x-2*padding-bitmap.getWidth())/2;

        //确定第一个点
        float x=padding;
        float y=p.y/2-space-bitmap.getHeight();

        int index=1;
        for(int i=0;i<3;i++){
            for(int j=0;j<3;j++){
                createDot(res,(int)(x+space*j),
                        (int)(y+space*i),visible);
            }
        }

    }

    private void createDot(int res,int left,int top,int visible){
        //创建图片视图
        ImageView iv=new ImageView(this);
        iv.setBackgroundResource(res);
        iv.setVisibility(visible);

        RelativeLayout.LayoutParams params=new
                RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        params.leftMargin=left;
        params.topMargin=top;

        //添加视图
        rl.addView(iv,params);

        //判断res对应的是selected还是normal
        if(res==R.drawable.selected){
            dotViews.add(iv);
        }
    }

    //计算dp对应的像素值
    private float pixelFromDp(int size){
        //获取屏幕密度
        return size*getResources().getDisplayMetrics().density;
    }

}