Drawing bitmap to the size of the canvas

Question

I have bitmap that need to draw to canvas. The image is of a fixed size, but the canvas will change according to the user's screen size and density (bitmap coule be larger/smaller than the canvas).

I need to draw the bitmap to canvas scaling all the way into the canvas size (without distorting the image), I have done the code as below but the bitmap still filling only a portion of the screen.

Rect dest = new Rect(0, 0, drawCanvas.getWidth(), drawCanvas.getHeight());
Paint paint = new Paint();
paint.setFilterBitmap(true);
drawCanvas.drawBitmap(canvasBitmap, null, dest, paint);

May I know if anybody can shed light on a good solution? Thanks.

Answer 1

This example is in javascript but it should still help you out scale an image

jsFiddle : https://jsfiddle.net/CanvasCode/7oghuwe2/3/

javascript

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d')
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

var image1 = new Image();
image1.src = "http://media.giphy.com/media/iNk83OBPzlA8o/giphy.gif";

image1.onload = function () {
    context1.fillStyle = "#F00";
    context1.fillRect(0, 0, canvas1.width, canvas1.height);
    context2.fillStyle = "#00F";
    context2.fillRect(0, 0, canvas2.width, canvas2.height);
    ratio(context1, canvas1, image1);
    ratio(context2, canvas2, image1);
}

function ratio(context1, canvas1, image1) {
    var imageRatio = image1.width / image1.height;

    var newHeight = canvas1.width / imageRatio;
    var newWidth = canvas1.height * imageRatio;

    var heightDiff = newHeight - canvas1.height;
    var widthDiff = newWidth - canvas1.width;

    if (widthDiff >= heightDiff) {
        context1.drawImage(image1, 0, 0, canvas1.width, canvas1.width / imageRatio);
    } else {
        context1.drawImage(image1, 0, 0, canvas1.height * imageRatio, canvas1.height);
    }
}

Basically you need to calculate what the width would be if you scaled the image by the canvas height and what the height would be if you scale the image by the canvas width, and which ever is smaller, then you scale by that dimension.

Answer 2

The reason why it might not work for you might be because the function drawBitmap() ignores the density of the bitmap. The following is from the documentation.

public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint)

This function ignores the density associated with the bitmap. This is because the source and destination rectangle coordinate spaces are in their respective densities, so must already have the appropriate scaling factor applied.

What you could do is use public void drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint) instead. First you need to map the source Matrix with the desination Matrix. You do this via Matrix.setRectToRect() or Matrix.setPolyToPoly(). This will give you an accurate mapping. Just make sure you map them correctly, otherwise things will be distorted.

For more info refer here: What code should I use with 'drawMatrix.setPolyToPoly' to manipulate and draw just a rectangular part of a bitmap, rather than the entire bitmap?