12,249,797 members (52,758 online)
alternative version

55.2K views
68 bookmarked
Posted

Image Glass Table Effect (Reflection) Using GDI+

, 28 Feb 2008 CPOL
 Rate this:
This article introduces a simple algorithm to do a glass table effect using GDI+.

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+.

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.

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
Color.FromArgb(255 - _Reflectivity, _BackgroundColor),
_BackgroundColor, 90, false);
graphics.FillRectangle(brush, imageRectangle);
}

return newImage;
}

History

• 28/02/08 – Initial release.

Share

 Chief Technology Officer Misakai Ltd. Ireland
Roman Atachiants is the guy behind www.spike-engine.com project, a real-time, client-server networking layer (SOA, RPC) for .NET developers. Also the founder of Misakai Ltd..

He is a software engineer and scientist with extensive experience in different computer science domains, programming languages/principles/patterns & frameworks.

His main expertise consists of C# and .NET platform, game technologies, cloud, human-computer interaction, big data and artificial intelligence. He has an extensive programming knowledge and R&D expertise.

You may also be interested in...

 View All Threads First Prev Next
 This is so FAKE, that doen't even look like reflection akirilov30-May-08 2:21 akirilov 30-May-08 2:21
 Re: This is so FAKE, that doen't even look like reflection Biswas, Sumit17-Feb-09 19:09 Biswas, Sumit 17-Feb-09 19:09
 Last Visit: 31-Dec-99 18:00     Last Update: 3-May-16 22:43 Refresh 1