Question

I need to combine 2 images into one. Basically all i need to do is to overlay one of them on top of the other in the center of the image. This needs to work on all major android devices.

I have tried a number of things, but here is my code snippet as of right now (and yes I know it’s messed up, we need to figure out delx and dely):

/* Rotate our original photo */
//  final float scale = getResources().getDisplayMetrics().density;
    canvas.drawBitmap(bmp, 0f, 0f, null);
    final float overlay_scale_factor = .5f;
    final int overlaywidth = (int)(overlay.getWidth() * overlay_scale_factor);
    final int overlayheight = (int)(overlay.getHeight() * overlay_scale_factor);
    final int delx = overlaywidth;
    final int dely = overlayheight;
    Matrix mat = new Matrix();
    mat.postRotate(270);
    mat.postScale(overlay_scale_factor, overlay_scale_factor);
    //mat.postTranslate(-delx, -dely);
    canvas.drawBitmap(overlay, mat, null);
    /* Bottom image 'composite' is now a composite of the two. */

Any help is appreciated. I know this is just math, but I’m not good at this kind of stuff.

The first image, ‘bmp’ is 100% the size of the canvas.
The second image, ‘overlay’ is the overlay that needs to be centered after it’s rotated 270 degrees.

Answer 1

Totally untested, but I’d expect something like this to work:

// Set the origin (0,0) in the middle of the view
canvas.translate(width/2, height/2);

// Draw the first bitmap so it is centered at (0,0)
canvas.drawBitmap(bmp, -bmp.getWidth()/2, -bmp.getHeight()/2, null);

// Rotate & scale
canvas.save();
canvas.rotate(270);
canvas.scale(.5f);

// Draw the overlay
canvas.drawBitmap(overlay, -overlay.getWidth()/2, -overlay.getHeight()/2, null);
canvas.restore();