Change path color without changing previous paths

Question

I wanted to create a small paint app where i can use some colors to draw and i tested only one color change till now it is not working properly. When i click the button and start drawing with the new color, all previous drawings i had made also changes colors. Can someone help me?

public class MyTouchEventView extends View {

    private Paint paint = new Paint();
    private Path path = new Path();



    public Button btnChange;
    public LayoutParams params;

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

        paint.setAntiAlias(true);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeWidth(1f);


        btnChange = new Button(context);
        btnChange.setText("Chaneg color");

        params = new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT);
        btnChange.setLayoutParams(params);

        btnChange.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {


                paint.setColor(Color.GREEN);
            }
        });


    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawPath(path, paint);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float pointX = event.getX();
        float pointY = event.getY();

        // Checks for the event that occurs
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(pointX, pointY);

            return true;
        case MotionEvent.ACTION_MOVE:
            path.lineTo(pointX, pointY);

            break;
        default:
            return false;
        }


        postInvalidate();
        return true;
    }

}

Answer 1

The problem here is you only use one Path.

You should create a new Path on every ACTION_DOWN. And for each of theses path you have to store the Paint as well.

For example you can define a class with both elements as members:

public class Stroke {
    private Path _path;
    private Paint _paint;
}// add constructor(Path, Paint) and accessors

And a list of Stroke in your Context:

List<Stroke> allStrokes = new ArrayList<Stroke>();

So on every ACTION_DOWN, you create an new Stroke (so a new Path, and a new Paint with your choosen color).

And on every ACTION_MOVE, you have retreive the last added Path, then you can lineTo the last point.

Then on your onDraw, just draw all created Stroke:

for (Stroke s : allStrokes) {
     canvas.drawPath(s.getPath(), s.getPaint());
}

Note that with this simple solution, you can not do a multiTouch drawing. To do so you will have to store and handle MotionEvent IDs as well.

EDIT: Here is a working multitouch paint example that creates strokes filled with random colors:

DrawArea.java:

import android.content.Context;
import android.graphics.*;
import android.util.SparseArray;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class DrawArea extends View {

    private List<Stroke> _allStrokes; //all strokes that need to be drawn
    private SparseArray<Stroke> _activeStrokes; //use to retrieve the currently drawn strokes
    private Random _rdmColor = new Random();

    public DrawArea(Context context) {
        super(context);
        _allStrokes = new ArrayList<Stroke>();
        _activeStrokes = new SparseArray<Stroke>();
        setFocusable(true);
        setFocusableInTouchMode(true);
        setBackgroundColor(Color.WHITE);
    }

    public void onDraw(Canvas canvas) {
        if (_allStrokes != null) {
            for (Stroke stroke: _allStrokes) {
                if (stroke != null) {
                    Path path = stroke.getPath();
                    Paint painter = stroke.getPaint();
                    if ((path != null) && (painter != null)) {
                        canvas.drawPath(path, painter);
                    }
                }
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int action = event.getActionMasked();
        final int pointerCount = event.getPointerCount();

        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                pointDown((int)event.getX(), (int)event.getY(), event.getPointerId(0));
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                for (int pc = 0; pc < pointerCount; pc++) {
                    pointMove((int) event.getX(pc), (int) event.getY(pc), event.getPointerId(pc));
                }
                break;
            }
            case MotionEvent.ACTION_POINTER_DOWN: {
                for (int pc = 0; pc < pointerCount; pc++) {
                    pointDown((int)event.getX(pc), (int)event.getY(pc), event.getPointerId(pc));
                }
                break;
            }
            case MotionEvent.ACTION_UP: {
                break;
            }
            case MotionEvent.ACTION_POINTER_UP: {
                break;
            }
        }
        invalidate();
        return true;
    }

    private void pointDown(int x, int y, int id) {
        //create a paint with random color
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(_rdmColor.nextInt());

        //create the Stroke
        Point pt = new Point(x, y);
        Stroke stroke = new Stroke(paint);
        stroke.addPoint(pt);
        _activeStrokes.put(id, stroke);
        _allStrokes.add(stroke);
    }

    private void pointMove(int x, int y, int id) {
        //retrieve the stroke and add new point to its path
        Stroke stroke = _activeStrokes.get(id);
        if (stroke != null) {
            Point pt = new Point(x, y);
            stroke.addPoint(pt);
        }
    }
}

Stroke.java:

import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;

public class Stroke {
    private Path _path;
    private Paint _paint;

    public Stroke (Paint paint) {
        _paint = paint;
    }

    public Path getPath() {
        return _path;
    }

    public Paint getPaint() {
        return _paint;
    }

    public void addPoint(Point pt) {
        if (_path == null) {
            _path = new Path();
            _path.moveTo(pt.x, pt.y);
        } else {
            _path.lineTo(pt.x, pt.y);
        }
    }
}

MyActivity.java:

import android.app.Activity;
import android.os.Bundle;

public class MyActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        DrawArea da = new DrawArea(this);
        setContentView(da);
    }
}

Answer 2

My solution:

public class PaintView extends ImageView {
    private class Holder {
        Path path;
        Paint paint;

        Holder(int color) {
            path = new Path();

            paint = new Paint();
            paint.setAntiAlias(true);
            paint.setStrokeWidth(4f);
            paint.setColor(color);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeJoin(Paint.Join.ROUND);
            paint.setStrokeCap(Paint.Cap.ROUND);
        }
    }

    private int color = Color.WHITE;
    private List<Holder> holderList = new ArrayList<Holder>();

    public PaintView(Context context) {
        super(context);
        init();
    }

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

    public PaintView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        holderList.add(new Holder(color));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (Holder holder : holderList) {
            canvas.drawPath(holder.path, holder.paint);
        }
    }

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

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                holderList.add(new Holder(color));
                holderList.get(holderList.size() - 1).path.moveTo(eventX, eventY);
                return true;
            case MotionEvent.ACTION_MOVE:
                holderList.get(holderList.size() - 1).path.lineTo(eventX, eventY);
                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                return false;
        }

        invalidate();
        return true;
    }

    public void resetPaths() {
        for (Holder holder : holderList) {
            holder.path.reset();
        }
        invalidate();
    }

    public void setBrushColor(int color) {
        this.color = color;
    }
}