Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 05:57, 8 August 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to create an image reflection effect in Java ME

From Wiki
Jump to: navigation, search
Article Metadata
Article
Created: jappit (25 Jan 2009)
Last edited: hamishwillee (08 Aug 2013)

This article explains how to create a nice reflection effect starting from a simple Image.

J2me image reflection.gif

You can see a live sample of this code here: Java ME Image reflection effect sample MIDlet

Contents

Source code

1. Method declaration

Let's start from method declaration:

public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
{
}

We have 3 arguments:

  • the original image to be reflected
  • the background color (used for transparent images)
  • the height of the reflection effect

2. The mutable Image

Now, let's create the mutable Image that will hold the resulting effect:

int w = image.getWidth();
 
int h = image.getHeight();
 
Image reflectedImage = Image.createImage(w, h + reflectionHeight);

We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

3. Copy the original Image

Now, first drawing steps are:

  • Getting the Graphics object of the mutable image
  • Filling the image with the background color
  • Drawing the original image on the upper part of the mutable one
Graphics g = reflectedImage.getGraphics();
 
g.setColor(bgColor);
 
g.fillRect(0, 0, w, h + reflectionHeight);
 
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

4. Create the reflection effect

Now, let's get to the important part of this article, that is the reflection effect itself:

  • for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
  • get the RGBA data of the corresponding horizontal line of the original image
  • calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
  • draw the RGB data into the reflected image, by using its Graphics object

And here is the source code:

int[] rgba = new int[w];
int currentY = -1;
 
for(int i = 0; i < reflectionHeight; i++)
{
int y = (h - 1) - (i * h / reflectionHeight);
 
if(y != currentY)
image.getRGB(rgba, 0, w, 0, y, w, 1);
 
int alpha = 0xff - (i * 0xff / reflectionHeight);
 
for(int j = 0; j < w; j++)
{
int origAlpha = (rgba[j] >> 24);
int newAlpha = (alpha & origAlpha) * alpha / 0xff;
 
rgba[j] = (rgba[j] & 0x00ffffff);
rgba[j] = (rgba[j] | (newAlpha << 24));
}
 
g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
}

in the above code, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

Sample usage

Using the above method is really simple, since it's only necessary to:

  • Create the original Image to be reflected
  • Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height
Image originalImage = Image.createImage("/cap_man1.png");
 
Image reflectedImage = ReflectedImage.create(originalImage, 0xffffff, 64);

Downloads

You can download the complete source code of this article here:

This page was last modified on 8 August 2013, at 05:57.
84 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×