更改笔触颜色会更改以前的笔触颜色

Question

I'm trying to make an android kids coloring book app, and when I'm firstly drawing with one color its ok, but when I change the brush color, all the previous coloring changes color as well. What can be the solution of this problem?

Starting to paint with one color:

After changing the color and making another stroke this is what's happens

Here is my SignatureView class that is for this drawing surface:

public class SignatureView extends View {

    private float STROKE_WIDTH = 5;

    /** Need to track this so the dirty region can accommodate the stroke. **/
    private final float HALF_STROKE_WIDTH = STROKE_WIDTH / 2;

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

    /**
     * Optimizes painting by invalidating the smallest possible area.
     */
    private float lastTouchX;
    private float lastTouchY;
    private final RectF dirtyRect = new RectF();

    public SignatureView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint.setAntiAlias(true);
        paint.setColor(Color.CYAN);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeWidth(STROKE_WIDTH);
    }

    public float getBrushSize() {
        return STROKE_WIDTH;
    }

    public void setBrushSize(float brushSize) {
        this.STROKE_WIDTH = brushSize;
    }

    public void setColor(int color) {
        paint.setColor(color);
    }

    /**
     * Erases the signature.
     */
    public void clear() {
        path.reset();

        // Repaints the entire view.
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);
    }

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

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(eventX, eventY);
            lastTouchX = eventX;
            lastTouchY = eventY;
            // There is no end point yet, so don't waste cycles invalidating.
            return true;

        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:
            // Start tracking the dirty region.
            resetDirtyRect(eventX, eventY);

            // When the hardware tracks events faster than they are delivered,
            // the
            // event will contain a history of those skipped points.
            int historySize = event.getHistorySize();
            for (int i = 0; i < historySize; i++) {
                float historicalX = event.getHistoricalX(i);
                float historicalY = event.getHistoricalY(i);
                expandDirtyRect(historicalX, historicalY);
                path.lineTo(historicalX, historicalY);
            }

            // After replaying history, connect the line to the touch point.
            path.lineTo(eventX, eventY);
            break;

        default:
            // Log.("Ignored touch event: " + event.toString());
            return false;
        }

        // Include half the stroke width to avoid clipping.
        invalidate((int) (dirtyRect.left - HALF_STROKE_WIDTH),
                (int) (dirtyRect.top - HALF_STROKE_WIDTH),
                (int) (dirtyRect.right + HALF_STROKE_WIDTH),
                (int) (dirtyRect.bottom + HALF_STROKE_WIDTH));

        lastTouchX = eventX;
        lastTouchY = eventY;

        return true;
    }

    /**
     * Called when replaying history to ensure the dirty region includes all
     * points.
     */
    private void expandDirtyRect(float historicalX, float historicalY) {
        if (historicalX < dirtyRect.left) {
            dirtyRect.left = historicalX;
        } else if (historicalX > dirtyRect.right) {
            dirtyRect.right = historicalX;
        }
        if (historicalY < dirtyRect.top) {
            dirtyRect.top = historicalY;
        } else if (historicalY > dirtyRect.bottom) {
            dirtyRect.bottom = historicalY;
        }
    }

    /**
     * Resets the dirty region when the motion event occurs.
     */
    private void resetDirtyRect(float eventX, float eventY) {

        // The lastTouchX and lastTouchY were set when the ACTION_DOWN
        // motion event occurred.
        dirtyRect.left = Math.min(lastTouchX, eventX);
        dirtyRect.right = Math.max(lastTouchX, eventX);
        dirtyRect.top = Math.min(lastTouchY, eventY);
        dirtyRect.bottom = Math.max(lastTouchY, eventY);
    }

    public int getColor() {
        return paint.getColor();
    }

}

I'm changing the color using

public void colorpicker() {
        AmbilWarnaDialog dialog = new AmbilWarnaDialog(this,
                signature.getColor(), new OnAmbilWarnaListener() {

                    @Override
                    public void onCancel(AmbilWarnaDialog dialog) {
                    }

                    @Override
                    public void onOk(AmbilWarnaDialog dialog, int color) {
                        signature.setColor(color);
                    }
                });
        dialog.show();
    }

Answer 1

Use a new path & paint object for each stroke.

Or, once you lift your finger, render the path to a Bitmap and use that for drawing.

Bitmap drawing;
final Path path = new Path();

public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    Bitmap newDrawing = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Config.ARGB_8888);
    if(drawing != null){
        Canvas c = new Canvas(newDrawing);
        c.drawBitmp(drawing);
    }
    drawing = newDrawing;
}

public boolean onTouchEvent(MotionEvent e){
    int action = e.getAction();
    if(action == MotionEvent.ACTION_DOWN){
        path.reset();
    }else if(MotionEvent.ACTION_MOVE){
        if(path.isEmpty()){
            path.moveTo(e.getX(), e.getY());
        }else{
            path.lineTo(e.getX(), e.getY());
        }
    }else if(MotionEvent.ACTION_UP){
        drawing.drawPath(path);
    }
}