CODEWITHSUNDEEP
androidbitmapandroid-canvassurfaceview
wwnigel
wwnigel

Reputation: 497

Android: custom draw on an given image (with SurfaceView)

I am trying to load an image to SurfaceView, and draw some scratch upon this image.

To to that, I have create an custom SurfaceView, MySurfaceView, with the following functions:

public MySurfaceView(Context context, AttributeSet attrs)
{
    super(context, attrs);
    mHolder = getHolder();
    mHolder.addCallback(this);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(3);
    mPaint.setColor(Color.WHITE);
    setWillNotDraw(false);
}
public void setImageBitmap(Bitmap bitmap) {
    mBitmap = bitmap;
}
@Override
protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(mBitmap, x, y, null);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        mPath = new Path();
        mPath.moveTo(event.getX(), event.getY());
    } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
        mPath.lineTo(event.getX(), event.getY());
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        mPath.lineTo(event.getX(), event.getY());
    }
    if (mPath != null) {
        Canvas canvas = mHolder.lockCanvas();
        canvas.drawPath(mPath, mPaint);
        mHolder.unlockCanvasAndPost(canvas);
    }
    return true;
}
@Override
public void surfaceCreated(SurfaceHolder holder) {

}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
        int height) {

}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {

}

Basically if keep setWillNotDraw(false) in the constructor, the SurfaceView will show the bitmap that I set mBitmap. Otherwise, if I comment this out, it will allow me to draw paths on a black background.

Is there any way that I can do both, put image (mBitmap) in the background and draw paths on this image? Could you guys provide some code to do that. Thanks a lot!

Upvotes: 0

Views: 1125

Answers (1)

wwnigel
wwnigel

Reputation: 497

I got it.

It is basically put the draw path to onDraw(Canvas canvas) function as well. To make sure the SurfaceView call onDraw once a path is drew. We need to call invalidate() in on touch event. 

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawBitmap(mBitmapScaled, x, y, null);
    if (mPath != null) {
        canvas.drawPath(mPath, mPaint);
    }
}
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        mPath = new Path();
        mPath.moveTo(event.getX(), event.getY());
    } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
        mPath.lineTo(event.getX(), event.getY());
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        mPath.lineTo(event.getX(), event.getY());
    }
    invalidate();
    return true;
}

Or even better, you can change the mPath into an ArrayList, so that you can put more paths on the image.

Upvotes: 1

Related Questions