View is unresponsive after applying a long list of Paths

Question

I'm trying to draw with multiple color, bitmaps files with undo/redo operation in a view. Here's my setup for the undo/redo and color/bitmap setup,

private ArrayList<Path> paths = new ArrayList<Path>();
private ArrayList<Path> undonePaths = new ArrayList<Path>();

private Map<Path, Integer> colorMap = new HashMap<>();
private Map<Path, Bitmap> colorFillMap = new HashMap<Path, Bitmap>();

Paint configurations:

        drawPath = new Path();
        drawPaint = new Paint(Paint.DITHER_FLAG);
        drawPaint.setAntiAlias(true);
        drawPaint.setFilterBitmap(true);
        drawPaint.setDither(true);
        drawPaint.setColor(paintColor);
        drawPaint.setStrokeWidth(brushSize);
        drawPaint.setStyle(Paint.Style.STROKE);
        drawPaint.setStrokeJoin(Paint.Join.ROUND);
        drawPaint.setStrokeCap(Paint.Cap.ROUND);
        drawPaint.setAlpha(100);

        setLayerType(View.LAYER_TYPE_SOFTWARE, drawPaint);

I'm simply storing the modified color/bitmap inside the path list whenever there's a change. This helps to recover the exact same color/bitmap used in a previous state.

private void touch_start(float x, float y) {
        undonePaths.clear();
        drawPath.reset();
        drawPath.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y, float x2, float y2) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            drawPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }
    }

    private void touch_up() {

        // commit the path to our offscreen
        drawPath.lineTo(mX, mY);
        drawCanvas.drawPath(drawPath, drawPaint);

        // kill this so we don't double draw
        paths.add(drawPath);
        // the selectedColor is dynamically changeable
        colorMap.put(drawPath, selectedColor);
        drawPath = new Path();
        drawPath.reset();
    }

    public void onClickUndo() {
        if (paths.size() > 0) {
            undonePaths.add(paths.remove(paths.size() - 1));
            invalidate();
        }
    }

    public void onClickRedo() {
        if (undonePaths.size() > 0) {
            paths.add(undonePaths.remove(undonePaths.size() - 1));
            invalidate();
        }
    }

and finally inside the onDraw() method I'm drawing each path based on the stored values,

protected void onDraw(Canvas canvas) {
        canvas.save();

        try {
            for (Path p : paths) {

            if (colorFillMap.get(p) != null) {
                // the colorFillMap is dynamically changeable
                canvas.drawBitmap(colorFillMap.get(p), 0, 0, drawPaint);
            } else {
                    if (colorMap.get(p) != null) {
                        drawPaint.setColor(colorMap.get(p));
                    }
                        if (p != null) {
                            canvas.drawPath(p, drawPaint);

                            drawPaint.setColor(selectedColor);

                            canvas.drawPath(drawPath, drawPaint);
                        }
                }
            }
        }

        canvas.restore();
    }

However, after applying a couple of paths the view becomes slow and the touch responsiveness becomes unresponsive. I wonder because of the large number of paths inside the list is causing this. Is there anyway I can speed up the process ? Am I doing something wrong?

Answer 1

Is there anyway I can speed up the process ?

You can perform your drawings on a bitmap, so you only need to draw your bitmap in onDraw(). For example:

private Canvas mCanvas;
private Bitmap mCanvasBitmap;
@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mCanvasBitmap == null) {
            mCanvasBitmap = Bitmap.createBitmap(w,h, Bitmap.Config.ARGB_8888);
            mCanvas = new Canvas(mCanvasBitmap);
        }
        
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mCanvasBitmap == null) return;
        canvas.drawBitmap(mCanvasBitmap,0,0,null);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
    ....
    
    mCanvas.draw(...);
    invalidate();   
    
    ....

    }

However you will need to find a new way for redo/undo operation.