c++ - Bitmap loses quality when stretched/shrinked on buttons background

Question

INTRODUCTION AND RELEVANT INFORMATION:

I have an owner drawn static control.

It should have bitmap on top of a gradient background.

Static controls dimensions are not fixed, they are calculated during the creation of parent window.

I load a bitmap with background color of RGB( 255, 163, 94 ) from resource file.

Using TransparentBlt( ... , RGB( 255, 163, 94 ) ) API I stretch/shrink bitmap to fit the static controls client area ( bitmap is Device Dependant Bitmap, not a DIB, if that matters ).

Bitmap picture has both horizontal and vertical resolution 150 DPI, 24 color bit depth, width 4395 pixels, and height 5613 pixels.

Bitmap is loaded via LoadBitmap( ... ) API on WM_CREATE.

The original picture is bellow, but I have reduced its size, so I can upload it:

THE PROBLEM:

The problem is in quality of the picture.

Bellow is the result I get after owner drawing the static control:

The pixelation is obvious.

Aspect ratio is lost as well, since I use TransparentBlt().

MY EFFORTS TO SOLVE THIS PROBLEM:

Browsing through SO archive, I have found similar questions, but they were related to Android. None of them helped me. Maybe my inexperience prevents me to see useful information.

Following one link from those questions I have learned about existence of image scaling algorithms. This is the page I have in mind: http://en.wikipedia.org/wiki/Resampling_%28bitmap%29

I have tried to use smaller bitmap, but picture is then blurry, even though I resolve pixelation to some point.

It seems that my problem lies in insufficient, or to much, data in bitmap so when I try to "push" large bitmap into small button, it just can't fit so I get pixelation and jagged effects, yet If I try to put small bitmap into big button, then data is missing which results in a blurry picture.

After browsing through Internet, I have seen advices and suggestions that this can be solved with vector graphics and meta files.

Since I am dumbstruck by this, I will ask several questions.

If the topic is broad then I ask the community to inform me of it through comments, and I will remove it and will try to rephrase it to fit the SO rules of posting questions better.

QUESTIONS:

This problem really happened unexpected to me, so I do not know how to start solving it, since I am fairly new to WIN32.

I must admit I am shocked, since I have expected that TransparentBlt() would do all the work for me.

How can I solve this problem, so I can keep aspect ratio and quality of the picture ?

I will consider the following solutions:

1. Combining certain GDI API calls into my existing handler for stretching/shrinking, so I can achieve high quality and preserve aspect ratio of the picture, without modifying the code too much ?

2. Using GDI+ to solve my problem. I haven't used GDI+ so far, but one has to start some day, why not now, if that is what will solve my problems ?

3. If vector graphics can solve my problem I must URGE the community to do me the following favor: ANY recommendation of book/tutorial/documentation/article/code example on Vector Graphics in PURE WIN32 would be greatly appreciated, since I myself haven't found any.

4. If I must implement one of the scaling algorithms please recommend some books/tutorials/links/code example, since I myself haven't found any.

I can't use libraries, it is the restriction imposed upon me, however, if the solution is acceptable and can be implemented fast, I could try to convince my employers to loosen their criteria, so libraries can be used.

If my criteria to preserve both aspect ratio and quality of the picture is too much, I will choose the quality of the picture then. I can always post a new question about aspect ratio, and maybe I will find a solution myself in the meanwhile.

That would be all. Thank you for your patience and time.

Regards.

Answer 1

Since the target size is less than the image's original size, GDI just leaves out certain pixels. This is efficient but the results are often poor quality. To do this better, you need to enable anti-aliasing. With anti-aliasing enabled, pixels that are too much are not just dropped, but merged (averaged) together with adjacent pixels.

In GDI you basically have to call

SetStretchBltMode (HALFTONE);

before calling StretchBlt/TransparentBlt to achieve an anti-aliased effect.

EDIT: I think I remember that TransparentBlt ignores the StretchBltMode. If this is true, you'll have to do without transparency. Possible solution: Create a memory DC that's as large as your original image, draw the background, render the image on top using TransparentBlt. Later, use StretchBlt to draw the image from the mem DC to the screen.

Answer 2

I have "battled" this problem for nearly three months, and after all that research I must admit that Mr.Passant was right-crisp images like the one above will simply lose on quality when scaled.

Therefore, I have decided to use vector graphics.

Maybe I will use Enhanced Windows Metafiles or will try with some library for SVG.

I hereby thank to everyone trying to help.

Best regards.