Question

I would like to draw an image (as a family picture i.e.) inside another image (as a frame).

I’m using ImageView to handle this. I can drag my background image around, but the View didn’t draw the front image again.

This is my code for loading two images. mFrontImage is the ‘frame’ and mBackImage is the ‘background’ which we will drag. These lines of code have no issue.

// Create a new bitmap scaled from original bitmap
mFrontImage = Bitmap.createBitmap(bmpTemp, 0, 0, fw, fh, fmatrix, true);

mCanvas = new Canvas(mFrontImage);
mPaint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_OVER));
mCanvas.drawBitmap(mFrontImage, 0, 0, mPaint);
mCanvas.drawBitmap(mBackImage, 0, 0, mPaint);

mImageV = (ImageView) this.findViewById(R.id.image_view);
mImageV.setImageBitmap(mFrontImage);
mImageV.setOnTouchListener(this);

And these are code to handle touch movement:

case MotionEvent.ACTION_DOWN:
downx = event.getX();
downy = event.getY();
_moving = true;
break;

case MotionEvent.ACTION_MOVE:
if (_moving)
{
    dx = event.getX() - downx;
    dy = event.getY() - downy;
    downx = event.getX();
    downy = event.getY();
    x += dx;
    y += dy;

    mCanvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
    mCanvas.drawBitmap(mFrontImage, 0, 0, mPaint);
    mCanvas.drawBitmap(mBackImage, x, y, mPaint);
    mImageEdit.invalidate();
}
break;

case MotionEvent.ACTION_UP:
_moving = false;
break;

The line drawColor will erase the canvas then drawBitmap(mBackImage ~) but not drawBitmap(mFrontImage ~).

What I want to achieve is drawing both mFrontImage at 0, 0 and mBackImage at new position x, y.

Answer 1

I think there’s no way other than create new class implement SurfaceView. I did try and succeed. Here’s my sample code for those who wanted to try similar way.

This code is combined from many sources over internet and myself implementation. You can load both images to the view, then resize/move the background image. I did try rotate but still not finish it yet.

class MyCanvasView extends SurfaceView implements SurfaceHolder.Callback {
    private DrawingThread _thread;
    private Bitmap _frontbmp;
    private Bitmap _backbmp;
    private Matrix _matrix;
    float x, y, downx, downy, oldx, oldy;
    float dx, dy, bw, bh;
    boolean _moving = false;
    ScaleGestureDetector sgdetector;
    float scalefactor = 1.0f;
    float oldscalefactor = 1.0f;

    public MyCanvasView(Context context) {
        super(context);
        x = oldx = 0;
        y = oldy = 0;
        getHolder().addCallback(this);
        _thread = new DrawingThread(getHolder(), this);
        setFocusable(true);
    }

    public void initView(Bitmap front, Bitmap back){
        _matrix = new Matrix();
        sgdetector = new ScaleGestureDetector(getContext(), new ScaleListener());
        _frontbmp = front;
        _backbmp = back;
        bw = _backbmp.getWidth();
        bh = _backbmp.getHeight();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        synchronized (_thread.getSurfaceHolder()) {
            int action = event.getAction();
            sgdetector.onTouchEvent(event);
            switch (action & MotionEvent.ACTION_MASK)
            {
                case MotionEvent.ACTION_DOWN:
                    downx = event.getX();
                    downy = event.getY();
                    if((downx > oldx && downx < (oldx + bw)) && (downy > oldy && downy < (oldy + bh)))
                    {
                        _moving = true;
                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (_moving && !sgdetector.isInProgress())
                    {
                        dx = event.getX() - downx;
                        dy = event.getY() - downy;
                        downx = event.getX();
                        downy = event.getY();
                        oldx = x;
                        oldy = y;
                        x += dx;
                        y += dy;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    _moving = false;
                    oldx = x;
                    oldy = y;
                    break;
                case MotionEvent.ACTION_CANCEL:
                    break;
                case MotionEvent.ACTION_POINTER_DOWN:
                    _moving = false;
                    break;
                case MotionEvent.ACTION_POINTER_UP:
                    break;
                default:
                    break;
            }
            return true;
        }
    }

    @Override
    public void onDraw(Canvas canvas) {
        if (_backbmp != null && _frontbmp != null){
            canvas.drawColor(Color.WHITE);
            _matrix.postTranslate(x - oldx, y - oldy);
            _matrix.postScale(scalefactor/oldscalefactor, scalefactor/oldscalefactor, x + bw/2, y + bh/2);
            canvas.drawBitmap(_backbmp, _matrix, null);
            oldscalefactor = scalefactor;
            canvas.drawBitmap(_frontbmp, 0, 0, null);
        }

    }

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

    }

    public void surfaceCreated(SurfaceHolder holder) {
        _thread.setRunning(true);
        _thread.start();
    }

    public void surfaceDestroyed(SurfaceHolder holder) {
        // we have to tell thread to shut down & wait for it to finish, or else
        // it might touch the Surface after we return and explode
        boolean retry = true;
        _thread.setRunning(false);
        while (retry) {
            try {
                _thread.join();
                retry = false;
            } catch (InterruptedException e) {
                // we will try it again and again...
            }
        }
    }

    class DrawingThread extends Thread {
        private SurfaceHolder _surfaceHolder;
        private MyCanvasView _panel;
        private boolean _run = false;

        public DrawingThread(SurfaceHolder surfaceHolder, MyCanvasView panel) {
            _surfaceHolder = surfaceHolder;
            _panel = panel;
        }

        public void setRunning(boolean run) {
            _run = run;
        }

        public SurfaceHolder getSurfaceHolder() {
            return _surfaceHolder;
        }

        @Override
        public void run() {
            Canvas c;
            while (_run) {
                c = null;
                try {
                    c = _surfaceHolder.lockCanvas(null);
                    synchronized (_surfaceHolder) {
                        _panel.onDraw(c);
                    }
                } finally {
                    if (c != null) {
                        _surfaceHolder.unlockCanvasAndPost(c);
                    }
                }
            }
        }
    }

    class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
        @Override
        public boolean onScale(ScaleGestureDetector detector) {
            oldx = x;
            oldy = y;
            scalefactor *= detector.getScaleFactor();
            // Don't let the object get too small or too large.
            scalefactor = Math.max(0.1f, Math.min(scalefactor, 5.0f));
            return true;
        }
    }
}

Hope someone will find this useful.