Android BlurMaskFilter Issues

Question

I'm creating a drawing app, and I want on of the brushes the user can draw with to have the following effect:

Currently, to achieve this effect, I'm drawing 5 separate Paths, each with the same X values but a small Y offset, and each with a BlurMaskFilter. Here's the code from the PaintBrush class:

public PaintBrush(int initColor, int initSize) {
    strokeRadius = ((10 * initSize) + 20) / 2;
    currentColor = initColor
    setupPaths();
}

private void setupPaths(){
    paths = new Path[5];
    paints = new Paint[5];
    for (int i = 0; i < 5; i++){
        paths[i] = new Path();
        Paint curPaint =  new Paint();
        curPaint.setColor(currentColor);
        curPaint.setAntiAlias(true);
        curPaint.setDither(true);
        curPaint.setStyle(Paint.Style.STROKE);
        curPaint.setStrokeJoin(Paint.Join.ROUND);
        curPaint.setStrokeCap(Paint.Cap.ROUND);
        paints[i] = curPaint;
    }
    Paint paint1 = paints[0];
    paint1.setStrokeWidth(strokeRadius / 3);
    paint1.setMaskFilter(new BlurMaskFilter(Math.max(strokeRadius / 5, 1), BlurMaskFilter.Blur.NORMAL));
    Paint paint2 = paints[1];
    paint2.setStrokeWidth(strokeRadius / 6);
    paint2.setMaskFilter(new BlurMaskFilter(Math.max(strokeRadius / 7, 1), BlurMaskFilter.Blur.NORMAL));
    Paint paint3 = paints[2];
    paint3.setStrokeWidth(strokeRadius / 5);
    paint3.setMaskFilter(new BlurMaskFilter(Math.max(strokeRadius / 7, 1), BlurMaskFilter.Blur.NORMAL));
    Paint paint4 = paints[3];
    paint4.setStrokeWidth(strokeRadius / 3);
    paint4.setMaskFilter(new BlurMaskFilter(Math.max(strokeRadius / 4, 1), BlurMaskFilter.Blur.NORMAL));
    Paint paint5 = paints[4];
    paint5.setStrokeWidth(strokeRadius / 4);
    paint5.setMaskFilter(new BlurMaskFilter(Math.max(strokeRadius / 4, 1), BlurMaskFilter.Blur.NORMAL));
}

public void drawBrush(Canvas canvas){
    for (int i = 0; i < 5; i++) {
        canvas.drawPath(paths[i], paints[i]);
    }
}



public void startStroke(float x, float y){
    paths[0].moveTo(x, y - (strokeRadius * 4 / 6));
    paths[1].moveTo(x, y - (strokeRadius / 3));
    paths[2].moveTo(x, y - (strokeRadius / 8));
    paths[3].moveTo(x, y + (strokeRadius / 3));
    paths[4].moveTo(x, y + (strokeRadius * 3 / 4));
    prevX = x;
    prevY = y;
}

public void moveStroke(float x, float y){
    float dx = Math.abs(x - prevX);
    float dy = Math.abs(y - prevY);
    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        paths[0].quadTo(prevX, prevY - (strokeRadius * 4 / 6), (x + prevX) / 2, ((y + prevY) / 2) - (strokeRadius * 4 / 6));
        paths[1].quadTo(prevX, prevY - (strokeRadius / 3), (x + prevX) / 2, ((y + prevY) / 2) - (strokeRadius / 3));
        paths[2].quadTo(prevX, prevY - (strokeRadius / 8), (x + prevX) / 2, ((y + prevY) / 2) - (strokeRadius / 8));
        paths[3].quadTo(prevX, prevY + (strokeRadius / 3), (x + prevX) / 2, ((y + prevY) / 2) + (strokeRadius / 3));
        paths[4].quadTo(prevX, prevY + (strokeRadius * 3 / 4), (x + prevX) / 2, ((y + prevY) / 2) + (strokeRadius * 3 / 4));
    }
    prevX = x;
    prevY = y;
}

public void endStroke(Canvas canvas){
    drawBrush(canvas);
    paths[0].reset();
    paths[1].reset();
    paths[2].reset();
    paths[3].reset();
    paths[4].reset();
}

And the code for the custom View:

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(drawingCanvas, 0, 0, canvasPaint);
    currentBrush.drawBrush(canvas);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (!activity.isPaused()) {
        float touchX = event.getX();
        float touchY = event.getY();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                currentBrush.startStroke(touchX, touchY);
                break;
            case MotionEvent.ACTION_MOVE:
                currentBrush.moveStroke(touchX, touchY);
                break;
            case MotionEvent.ACTION_UP:
                currentBrush.endStroke(touchX, touchY, drawingCanvas);
                break;
            default:
                return false;
        }
        invalidate();
    }
    return true;
}

I'm aware that BlurMaskFilter is not compatible with hardware accelerations, so in my main activity i have the following code:

drawingView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

This code works, however, with hardware acceleration disabled, my drawing activity took a massive (and unacceptable) performance hit; it draws with a extremely noticeable lag, especially as the paths get longer. My question is: is there a way I could increase the performance, without using hardware acceleration, enough to decrease the lag? If not, is there any way to emulate this same effect in ways that are compatible with hardware acceleration?

Answer 1

Keep a Bitmap of the size of the entire screen. Keep a list of all points that the finger moved through. Have some minimal threshold for the distance from the previous touch point to the last one. You essentially break the drawing motion into a list of points.

Now, every time the finger moves, find the bounding rectangle of the area that was changed since the last touch event you handled, clear this rectangle, and redraw only the lines on the list that are in this rectangle with your drawPath.

Answer 2

You can try using the RasmView library: github.com/Raed-Mughaus/DrawingVie