Record and store a path of a curved shape

Question

I would like to record the user's input in my drawing application. It can draw whatever he wants, not only shape with straight line. How can I record, in a single path, all the moves that the user does when he draws, for example, a particular circle? This is my method, where there is the System.out.println() is where I would push the method to save the Path.

    public boolean onTouchEvent(MotionEvent event) {
        float touchX = event.getX();
        float touchY = event.getY();
        //respond to down, move and up events
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                drawPath.moveTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_MOVE:
                drawPath.lineTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_UP:
                drawPath.lineTo(touchX, touchY);
                System.out.println(touchX +", " +touchY);
                drawCanvas.drawPath(drawPath, drawPaint);
                drawPath.reset();
                break;
            default:
                return false;
        }
        //redraw
        invalidate();
        return true;
    }```

Why not just store the (x,y) points and 'redraw' them later when necessary? (Or is that what you're asking help for?) — Chrisvin Jem, Jul 23 '19 at 11:06
If I store only the X and Y point, will it draw only a straight line? They are only 2 points and I needs to draw every possible shape the user wants, not only geometrical ones. — Babbara, Jul 23 '19 at 12:37

Chrisvin Jem · Accepted Answer · 2019-07-23T14:49:51.903

Just store the (x,y) points and 'redraw' them later when necessary.

By (x,y), I mean the event getX & getY values. Store all the values in an ArrayList, and then you can use the stored values to redraw your shape. Basically, I'm suggesting you do something along the following lines,

Create a points array

ArrayList<Pair<Float,Float>> points = new ArrayList<>();

Store touch points in array

public boolean onTouchEvent(MotionEvent event) {
    float touchX = event.getX();
    float touchY = event.getY();
    //respond to down, move and up events
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            drawPath.moveTo(touchX, touchY);
            points.add(new Pair<Float, Float>(touchX, touchY));
            break;
        case MotionEvent.ACTION_MOVE:
            drawPath.lineTo(touchX, touchY);
            points.add(new Pair<Float, Float>(touchX, touchY));
            break;
        case MotionEvent.ACTION_UP:
            drawPath.lineTo(touchX, touchY);
            System.out.println(touchX +", " +touchY);

            points.add(new Pair<Float, Float>(touchX, touchY));
            //At this point you might want to
            //store this array somewhere 
            //so you can use it to redraw later if needed

            drawCanvas.drawPath(drawPath, drawPaint);
            drawPath.reset();
            break;
        default:
            return false;
    }
    //redraw
    invalidate();
    return true;
}

You can use the array to redraw the shape when needed

public void drawFromArrayList(ArrayList<Pair<Float,Float>> points) {
    int pointCount = points.size();
    if (pointCount < 2) {
        return;
    }
    for (int i=0;i<pointCount;i++) {
        float touchX = points.get(i).first, touchY = points.get(i).second;
        if(i==0) {
            drawPath.moveTo(touchX, touchY);
        }
        drawPath.lineTo(touchX, touchY);
        if(i==pointCount-1) {
            drawCanvas.drawPath(drawPath, drawPaint);
            drawPath.reset();
        }
    }
}

Record and store a path of a curved shape

1 Answers1