Click here to Skip to main content
6,594,932 members and growing! (14,868 online)
Email Password   helpLost your password?
Multimedia » GDI+ » General     Intermediate License: The Code Project Open License (CPOL)

Image Glass Table Effect (Reflection) Using GDI+

By Kel_

This article introduces a simple algorithm to do a glass table effect using GDI+.
C# (C# 1.0, C# 2.0, C# 3.0), .NET (.NET 2.0), GDI+, VS2008, Dev
Posted:28 Feb 2008
Updated:28 Feb 2008
Views:23,369
Bookmarked:43 times
Announcements
Loading...
 
Search    
Advanced Search
Add to IE Search
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
19 votes for this article.
Popularity: 5.03 Rating: 3.94 out of 5
2 votes, 10.5%
1
2 votes, 10.5%
2
1 vote, 5.3%
3
2 votes, 10.5%
4
12 votes, 63.2%
5

GlassTableGDI_src

Introduction

Recently, while writing an e-commerce web application, I needed to transform the product’s images in some “professional” way, so I decided to add to each product image a well known glass effect table. Since I’m broke, I can’t afford having an artist to modify each image, so I decided to write some simple algorithm to do it automatically using GDI+.

This article is more like a code snippet, for you who want do the same in your applications or websites. It’s simple, yet useful!

Using the code

To transform the image, simply use the static method of the helper, like this:

Image newImage = ImageEffectsHelper.DrawReflection(pOriginal.Image, Color.White, 90);

The parameters of this method are quite self-explanatory, but still, here they are:

  • Image – It’s the original image you want to make the reflection of.
  • BackgroundColor – The background color of the image, used to paint the reflection by using a gradient brush.
  • Reflectivity – From 0 to 255, it’s the reflectivity of the image (gradient brush alpha).

Example

I prepared a small example project, containing two Windows forms, so you will be able to select the image you want to process and preview the processed image.

original.png

Algorithm

Now, the algorithm itself; it calculates the height of the new image based on the desired Reflectivity. After that, it creates a new graphics buffer, draws the original image on it, and on a second graphics buffer, it draws the reflected image, then flips it. At the end, it simply merges both the images and uses a gradient brush (with the given alpha and BackgroundColor) on it. Here’s the code:

public static Image DrawReflection(Image _Image, Color _BackgroundColor, int _Reflectivity)
{
    // Calculate the size of the new image
    int height = (int)(_Image.Height + (_Image.Height * ((float)_Reflectivity / 255)));
    Bitmap newImage = new Bitmap(_Image.Width, height, PixelFormat.Format24bppRgb);
    newImage.SetResolution(_Image.HorizontalResolution, _Image.VerticalResolution);

    using (Graphics graphics = Graphics.FromImage(newImage))
    {
        // Initialize main graphics buffer
        graphics.Clear(_BackgroundColor);
        graphics.DrawImage(_Image, new Point(0, 0));
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
        Rectangle destinationRectangle = new Rectangle(0, _Image.Size.Height, 
                                         _Image.Size.Width, _Image.Size.Height);

        // Prepare the reflected image
        int reflectionHeight = (_Image.Height * _Reflectivity) / 255;
        Image reflectedImage = new Bitmap(_Image.Width, reflectionHeight);

        // Draw just the reflection on a second graphics buffer
        using (Graphics gReflection = Graphics.FromImage(reflectedImage))
        {
            gReflection.DrawImage(_Image, 
               new Rectangle(0, 0, reflectedImage.Width, reflectedImage.Height),
               0, _Image.Height - reflectedImage.Height, reflectedImage.Width, 
               reflectedImage.Height, GraphicsUnit.Pixel);
        }
        reflectedImage.RotateFlip(RotateFlipType.RotateNoneFlipY);
        Rectangle imageRectangle = 
            new Rectangle(destinationRectangle.X, destinationRectangle.Y,
            destinationRectangle.Width, 
            (destinationRectangle.Height * _Reflectivity) / 255);

        // Draw the image on the original graphics
        graphics.DrawImage(reflectedImage, imageRectangle);

        // Finish the reflection using a gradiend brush
        LinearGradientBrush brush = new LinearGradientBrush(imageRectangle,
               Color.FromArgb(255 - _Reflectivity, _BackgroundColor),
                _BackgroundColor, 90, false);
        graphics.FillRectangle(brush, imageRectangle);
    }

    return newImage;
}

Points of interest

The algorithm presented in this article is quite simple. If you're searching for something more advanced (yet less automatic), try this one:

History

  • 28/02/08 – Initial release.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Kel_


Member
Kel, passionate by 3D Graphics and gaming developement since his young age. Now a professional 3D Software Developer & Architect, worked for a flight simulator projects and collaborated to a 3D Engine developement projects.
Hobbies: Mangas & Animes, Playing and getting out with friends.

Blog: http://roman.ae-labs.org
Occupation: Software Developer (Senior)
Location: Belgium Belgium

Other popular GDI+ articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh)FirstPrevNext
GeneralNice Code PinmemberNNTBIZ0:16 29 Jun '09  
GeneralGreat Article but problem with Transparent Background Pinmemberf r i s c h4:19 21 Mar '09  
GeneralI made a slightly improved version... PinmemberDanBystrom21:57 16 Jan '09  
GeneralRe: I made a slightly improved version... PinmemberBiswas, Sumit20:20 17 Feb '09  
GeneralRe: I made a slightly improved version... PinmemberKel_2:37 18 Feb '09  
GeneralThis is so FAKE, that doen't even look like reflection Pinmemberakirilov3:21 30 May '08  
GeneralRe: This is so FAKE, that doen't even look like reflection PinmemberBiswas, Sumit20:09 17 Feb '09  
Generalnice Pinmember gdcoder 10:42 28 Feb '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 28 Feb 2008
Editor: Smitha Vijayan
Copyright 2008 by Kel_
Everything else Copyright © CodeProject, 1999-2009
Web13 | Advertise on the Code Project