Hey there! Let's get that background image fitting perfectly on your Canvas. I’ve dealt with this exact issue before—getting images to scale without overflowing or stretching weirdly takes a bit of calculation, but it’s totally manageable.

The Core Issue #

When you use BitmapFactory.decodeResource() directly, you’re loading the image at its original resolution. If that’s way larger than your Canvas (like 10x bigger in your case), it’ll spill outside the view. We need to scale the image proportionally so it fills the Canvas entirely without going over the edges.

Step-by-Step Solution #

1. Get Your Canvas’s Actual Dimensions #

First, you need to know the real width and height of your Canvas. The best place to get this is in the onSizeChanged() method of your custom View—this gets called when the View’s size is finalized (after layout inflation, or if the screen rotates).

2. Calculate Proportional Scaling & Crop #

We’ll scale the image so it’s large enough to cover the Canvas, then crop the excess to fit exactly. Here’s the code to implement this:

private Bitmap mBitmap;

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // Resize the background bitmap to fit the Canvas's new size
    resizeBackgroundToCanvas(w, h);
}

private void resizeBackgroundToCanvas(int canvasWidth, int canvasHeight) {
    // Load the original background image
    Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.my_background_pic);
    if (originalBitmap == null) {
        return; // Handle null case if the resource doesn't exist
    }

    // Calculate scaling factors for width and height
    float scaleX = (float) canvasWidth / originalBitmap.getWidth();
    float scaleY = (float) canvasHeight / originalBitmap.getHeight();

    // Use the larger scale factor to ensure the image covers the entire Canvas
    float scale = Math.max(scaleX, scaleY);

    // Compute the scaled image dimensions
    int scaledWidth = Math.round(originalBitmap.getWidth() * scale);
    int scaledHeight = Math.round(originalBitmap.getHeight() * scale);

    // Create the scaled bitmap
    Bitmap scaledBitmap = Bitmap.createScaledBitmap(originalBitmap, scaledWidth, scaledHeight, true);

    // Crop the scaled bitmap to match the Canvas's size (centered)
    int xOffset = (scaledWidth - canvasWidth) / 2;
    int yOffset = (scaledHeight - canvasHeight) / 2;
    mBitmap = Bitmap.createBitmap(scaledBitmap, xOffset, yOffset, canvasWidth, canvasHeight);

    // Clean up temporary bitmaps to avoid memory leaks
    originalBitmap.recycle();
    scaledBitmap.recycle();
}

3. Draw the Background in onDraw() #

Now, in your onDraw() method, just draw the resized bitmap at (0,0)—it’ll fit perfectly:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mBitmap != null) {
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }
    // Add your other drawing code here (shapes, text, etc.)
}

Key Notes #

• Proportional Scaling: Using Math.max(scaleX, scaleY) ensures the image maintains its aspect ratio while covering the entire Canvas. The excess is cropped from the center, which is usually the desired behavior.
• Memory Management: Always recycle temporary bitmaps (originalBitmap and scaledBitmap) to prevent OutOfMemoryErrors, especially if your background image is large.
• Dynamic Resizing: Handling this in onSizeChanged() means the background will automatically adjust if the Canvas size changes (like when the user rotates their device).

If you wanted to stretch the image to fit without maintaining aspect ratio (not recommended for most cases), you could skip the crop step and just use Bitmap.createScaledBitmap(originalBitmap, canvasWidth, canvasHeight, true) directly. But proportional scaling will keep your background looking crisp and undistorted.

内容的提问来源于stack exchange，提问作者C. Crt