Search code examples
javaandroidgraphicspaint

Android Paint: how to get "airbrush" effect?


I am following the "FingerPaint" demo in the API Demos.

I would need to get an "airbrush" effect, in the sense that when I draw over the same spot it gets darker and darker.

Please see the image:

as you can see the center is darker because I passed with the paint on the same spot more than one time.

Please how do I get the same effect, of getting darker a spot if drawn over more than one time?

enter image description here

EDIT EDIT EDIT

the suggested

mPaint.setAlpha(0x80) 

kind of work, but only if I release touch and then touch again, if I do not release and keep the finger on the screen the effect is not reached.

The point is that you do not reach the effect if you do not release your finger from the screen, if you keep on drawing without releasing the touch it doesn't get darker when paint over. If you release the touch and then draw again you get the effect

This is the result I get. And I do not want:

enter image description here

this would be the desired result:

enter image description here


this is is the code taken form the API Demos:

public class FingerPaint extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new MyView(this));

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(0x44FF0000);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(12);

}

private Paint mPaint;

public class MyView extends View {

    private static final float MINP = 0.25f;
    private static final float MAXP = 0.75f;

    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Path mPath;
    private Paint mBitmapPaint;

    public MyView(Context c) {
        super(c);

        mPath = new Path();
        mBitmapPaint = new Paint(Paint.DITHER_FLAG);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(0xFFAAAAAA);

        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

        canvas.drawPath(mPath, mPaint);
    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

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

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

    private void touch_up() {
        mPath.lineTo(mX, mY);
        // commit the path to our offscreen
        mCanvas.drawPath(mPath, mPaint);
        // kill this so we don't double draw
        mPath.reset();
    }

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

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();
            invalidate();
            break;
        }
        return true;
    }
}

}

Solution

  • Found the solution. For those who might be interested:

    public class DrawView extends View {
    public Paint mPaint;
    private Paint mPaint1;
    private Paint mPaint2;
    
    private Bitmap mBitmap;
    private Canvas mCanvas;
    private Path mPath;
    private Paint mBitmapPaint;
    
    public DrawView(Context context, AttributeSet attrs) {
        super( context,  attrs);
    
        mPath = new Path();
        mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        mPaint = new Paint();
        mPaint.setAlpha(0x80);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(0x44000000);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.BUTT);
        mPaint.setStrokeWidth(5);
    
    }
    
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(0xFF00B8F5);
    
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
    }
    
    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;
    
    private void touch_start(float x, float y) {
        mPath.reset();
        mPath.moveTo(x, y);
        mX = x;
        mY = y;
        //mCanvas.drawPoint(x, y, mPaint);
    
    }
    
    private void touch_move(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        Path npath=new Path();
        npath.moveTo(mX, mY);
        npath.lineTo( x ,y );
        mX=x;
        mY=y;
        mCanvas.drawPath(npath, mPaint);
        npath.reset();
        //Log.e("","sto disegando");
    }
    
    private void touch_up() {
    
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
    
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(event);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();
            invalidate();
            break;
        }
        return true;
    }
    }
    

    Edit: Attaching snap shot of my emulator (Raghunandan). I used your code no changes except increased the stroke width and it looks like below.

    Does not look good when you draw slowly.

    enter image description here

    Screen shot stroke width 12 if you draw a striaght line no problem. But when you draw zig zag you can see it does not look good

    enter image description here