×
Namespaces

Variants
Actions
(Difference between revisions)

Draw Gradient in Java ME

From Nokia Developer Wiki
Jump to: navigation, search
valderind4 (Talk | contribs)
m (moved J2ME Draw Gradient to Draw Gradient in Java ME: change J2ME to Java ME)
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor change to format better)
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]]
+
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]][[Category:Graphics]]
 +
{{Abstract|Here is a [[J2ME]] class for gradients drawing, supporting both horizontal and vertical gradients.}}
  
Here is a [[J2ME]] class for gradients drawing, supporting both horizontal and vertical gradients.
+
[[File:J2me_gradients.jpg]]
 
+
[[Image:J2me_gradients.jpg]]
+
  
 
This could be useful to substitute background gradient images with graphics drawn by code.
 
This could be useful to substitute background gradient images with graphics drawn by code.
  
 
<code java>
 
<code java>
package com.jappit.wiki.gradientrect.graphics;
 
 
 
import javax.microedition.lcdui.Graphics;
 
import javax.microedition.lcdui.Graphics;
  
Line 20: Line 17:
 
{
 
{
 
int max = orientation == VERTICAL ? height : width;
 
int max = orientation == VERTICAL ? height : width;
+
 
for(int i = 0; i < max; i++)
+
int color1RGB[] = new int[]{(color1>>16) & 0xff,(color1>>8) & 0xff,color1 & 0xff};
 +
int color2RGB[] = new int[]{(color2>>16) & 0xff,(color2>>8) & 0xff,color2 & 0xff};
 +
 
 +
int colorCalc[] = new int[]{
 +
(( color2RGB[0] - color1RGB[0] )<<16)/max,
 +
(( color2RGB[1] - color1RGB[1] )<<16)/max,
 +
(( color2RGB[2] - color1RGB[2] )<<16)/max
 +
};
 +
 
 +
for(int i = max; i > -1; i--)
 
{
 
{
int color = midColor(color1, color2, max * (max - 1 - i) / (max - 1), max);
+
 
+
g.setColor(
g.setColor(color);
+
(color1RGB[0]+((i*colorCalc[0])>>16)) <<16 |
+
(color1RGB[1]+((i*colorCalc[1])>>16)) <<8  |
 +
(color1RGB[2]+((i*colorCalc[2])>>16))
 +
);
 +
 
 
if(orientation == VERTICAL)
 
if(orientation == VERTICAL)
 
g.drawLine(left, top + i, left + width - 1, top + i);
 
g.drawLine(left, top + i, left + width - 1, top + i);
Line 32: Line 41:
 
g.drawLine(left + i, top, left + i, top + height - 1);
 
g.drawLine(left + i, top, left + i, top + height - 1);
 
}
 
}
}
 
 
static int midColor(int color1, int color2, int prop, int max)
 
{
 
int red =
 
(((color1 >> 16) & 0xff) * prop +
 
((color2 >> 16) & 0xff) * (max - prop)) / max;
 
 
int green =
 
(((color1 >> 8) & 0xff) * prop +
 
((color2 >> 8) & 0xff) * (max - prop)) / max;
 
 
int blue =
 
(((color1 >> 0) & 0xff) * prop +
 
((color2 >> 0) & 0xff) * (max - prop)) / max;
 
 
int color = red << 16 | green << 8 | blue;
 
 
return color;
 
 
}
 
}
 
}
 
}
Line 59: Line 49:
  
 
<code java>
 
<code java>
package com.jappit.wiki.gradientrect.display;
 
  
 
import javax.microedition.lcdui.Canvas;
 
import javax.microedition.lcdui.Canvas;
 
import javax.microedition.lcdui.Graphics;
 
import javax.microedition.lcdui.Graphics;
 
import com.jappit.wiki.gradientrect.graphics.Gradient;
 
  
 
public class GradientRectCanvas extends Canvas {
 
public class GradientRectCanvas extends Canvas {
Line 84: Line 71:
 
}
 
}
 
</code>
 
</code>
 +
<!-- Translation --> [[pt:Desenho gradiente, em Java ME]]
 +
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= [[Media:GradientRectMIDletSource.zip]]
 +
|installfile= [[Media:GradientRectMIDletBinaries.zip]]
 +
|devices= Nokia 7373, Nokia N82
 +
|sdk= [http://www.developer.nokia.com/Develop/Java/ Nokia SDK 1.0 for Java]
 +
|platform= Series 40, Symbian
 +
|devicecompatability= MIDP2.0/CLDC 1.1
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Draw, Gradient, Canvas, Graphics
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= [[User:tiviinik]]
 +
|update-timestamp= 20120116
 +
|creationdate= 20080411
 +
|author= [[User:jappit]]
 +
}}

Revision as of 01:05, 23 January 2012

Here is a J2ME class for gradients drawing, supporting both horizontal and vertical gradients.

J2me gradients.jpg

This could be useful to substitute background gradient images with graphics drawn by code.

import javax.microedition.lcdui.Graphics;
 
public class Gradient
{
public static final int VERTICAL = 0;
public static final int HORIZONTAL = 1;
 
public static void gradientBox(Graphics g, int color1, int color2, int left, int top, int width, int height, int orientation)
{
int max = orientation == VERTICAL ? height : width;
 
int color1RGB[] = new int[]{(color1>>16) & 0xff,(color1>>8) & 0xff,color1 & 0xff};
int color2RGB[] = new int[]{(color2>>16) & 0xff,(color2>>8) & 0xff,color2 & 0xff};
 
int colorCalc[] = new int[]{
(( color2RGB[0] - color1RGB[0] )<<16)/max,
(( color2RGB[1] - color1RGB[1] )<<16)/max,
(( color2RGB[2] - color1RGB[2] )<<16)/max
};
 
for(int i = max; i > -1; i--)
{
 
g.setColor(
(color1RGB[0]+((i*colorCalc[0])>>16)) <<16 |
(color1RGB[1]+((i*colorCalc[1])>>16)) <<8 |
(color1RGB[2]+((i*colorCalc[2])>>16))
);
 
if(orientation == VERTICAL)
g.drawLine(left, top + i, left + width - 1, top + i);
else
g.drawLine(left + i, top, left + i, top + height - 1);
}
}
}

and here is a sample Canvas using the gradientBox method (the final effect is shown in the screenshot at beginning of this article):

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
 
public class GradientRectCanvas extends Canvas {
 
protected void paint(Graphics g)
{
int halfWidth = getWidth() / 2;
int halfHeight = getHeight() / 2;
 
Gradient.gradientBox(g, 0xffffff, 0xff0000, 0, 0, halfWidth, halfHeight, Gradient.HORIZONTAL);
 
Gradient.gradientBox(g, 0xff0000, 0xffffff, halfWidth, 0, halfWidth, halfHeight, Gradient.VERTICAL);
 
Gradient.gradientBox(g, 0xffff00, 0x00ffff, 0, halfHeight, halfWidth, halfHeight, Gradient.VERTICAL);
 
Gradient.gradientBox(g, 0x00ff00, 0x0000ff, halfWidth, halfHeight, halfWidth, halfHeight, Gradient.VERTICAL);
}
 
}
Article Metadata
Code ExampleTested with
Devices(s): Nokia 7373, Nokia N82
Compatibility
Platform(s): Series 40, Symbian
Series 40
Symbian
S60 3rd Edition FP2
Device(s): MIDP2.0/CLDC 1.1
Article
Keywords: Draw, Gradient, Canvas, Graphics
Created: jappit (11 Apr 2008)
Updated: tiviinik (16 Jan 2012)
Last edited: hamishwillee (23 Jan 2012)
182 page views in the last 30 days.
×