Draw multiple paths following to user touch

Question

So, I'm experimenting with "painting" paths that follow the users finger on touch. I first referred to this tutorial which worked yet had an obvious problem that it wouldn't connect the points of touch. So, I found this question that referred directly to the same tutorial and problem. I used johncarl's solution on this link on the part dealing with cubic splines and found it very useful. However, I noticed that when you remove your finger from the screen (ACTION_UP) and then place it back down again (ACTION_DOWN), it connects the last point to this new point and changes the path a bit.

Now, my question is, how would you be able to start a new path once the user removes there finger and places it back on the screen? What I mean is that the new point will not connect to the last point.

I've tried a few things, my newest attempt being this:

    else if (event.getAction() == MotionEvent.ACTION_UP){
        for (int i = 0; i <= points.size() - 1; i++){
            points.remove(i);
        }
    }

The above code was an add on to the if statement in the onTouch() method. Though, this doesn't seem to do much at all. If you could provide any help it would be greatly appreciated, thanks!

score 0 · Accepted Answer · answered Nov 27 '12 at 23:32

After awhile of trial and error, I found out how to start a "new" path. In fact, I could just use the same path. The code I placed in the question would just have removed all the values in the arraylist (what I thought would be the first step to start a new path). Though, for some reason, it was not even doing that. What I found does work, however, is just using the clear() method, like so:

points.clear();

Though, as I found out, this does not solve my problem. It only removes the previously drawn path. What I needed to do was use the moveTo() method which will allow breaks in the path creating a look as if there were multiple paths. So, every time I removed my finger from the screen (ACTION_UP), I added the size of the 'points' arraylist as a value in another arraylist:

startValues.add(points.size());

This would give me the index values where I would call the moveTo() method. Now, in the onDraw() method I added the following code (look at links in the question I asked to see all the code I was using):

    boolean first = true;
    for(int i = 0; i < points.size(); i++){
        Point point = points.get(i);

        for (int index = 0; index <= startValues.size() - 1; index++){
            if (i == startValues.get(index)){
                lineChange = true;
                endNumber = (startValues.get(index) - 1);
                break;
            }
        }

        if(first || lineChange){
            first = false;
            lineChange = false;
            path.moveTo(point.x, point.y);
        }else{
            Point prev = points.get(i - 1);
            path.cubicTo(prev.x + prev.dx, prev.y + prev.dy, point.x - point.dx, point.y - point.dy, point.x, point.y);
        }

    }

    canvas.drawPath(path, paint);

This way there will be breaks in the path before the first point and on every point from where I lifted up my finger from the screen until I placed it back down again. This solves the initial problem I had when I asked this question but it had led to some other ones. Such as, the beginning and end points of a line changing upon replacement of my finger onto the screen. I will ask about that in another question if I can't find the solution my self. I hope this is useful for anyone faced with a similar problem!

Draw multiple paths following to user touch

1 Answers1