Outline-session 11 (20-April-2009)>>Low level User Interface >> Graphics

-Introduction

-Obtaining a Graphics Object-Setting Colors-Getting Colors-Using Grayscale

-Stroke Style-Drawing Lines-Drawing Arcs-Drawing Rectangles-Drawing Text

-Fonts-Anchor point

-Drawing Images-Clipping Regions

Introduction>>Graphics object is the instrument for drawing on to a Canvas.>>over 30 methods ,there is an abundance of operation from

drawing of shapes and text to specifying fonts and Colors.

Obtaining Graphics Object>>There are two way to acquire the Graphics Object.1.First way is inside paint method – Graphics class as a parameter.

>> public void paint(Graphics g){}

2.Second way using Mutable Image.Mutable Image:

>> These images are created by requesting block of memory.>>we have to specify the height and width of the image

// Create mutable image and get graphics object for imageImage tmpImg = Image.createImage(80, 20);Graphics g = tmpImg.getGraphics();

Graphics Object>>fundamental difference between the lifetime of a Graphics objects acquired inside paint()

versus a Graphics object acquired through an Image.1. Through paint() method The Graphics reference is valid only inside paint(). Onceleaving (even if you save a reference to the variable), the object cannot be used to draw ontothe

Canvas.2. Through an image The Graphics reference is valid as long as the Image and the variable that

references the Graphics object are in scope. For example, depending on where the following declaration is made, image and g may be available for the lifetime of the MIDlet.

Colors Introduction:

>> 24 bits are allocated for color support; 8 bits to each of the colors: red, green, and blue>>If a device does not support all possible colors in the range, it will map color requests to the

closest possible match available.>>This includes mapping a color request to an appropriate shade of gray for non-colordevices..

Setting Colors:

>>Colours API in Graphics class:

Setting Colors:>> When setting the color, we have two choices:

-- combine the three color components into one integer--value or specify each color as a separate integer

>> When combining colors, blue occupies the lower eight bits, followed by green, ending with red

• >> // Assume 'g' is a valid Graphics object• int red = 0,• green = 126,• blue = 255;>>g.setColor((red << 16) | (green << 8) | blue);>>g.setColor(red, green, blue);

Getting Colors:

>> To get the current color configuration the options are the reverse of setting the colors

>> For separate color values use getRedComponent(), getGreenComponent() and getBlueComponent()

>> Masking off the appropriate color– int colors, red, green, blue;– colors = g.getColor();– // Return the highest 8 bits– red = colors & 0xFF0000– // Return middle eight bits– green = colors & 0xFF00;– // Return lowest 8 bits– blue = colors & 0xFF

Using Gray Scale

>> setGrayScale(int) allows selection of a shade of gray in the range of 0 to 255. As with a color device, if the value is outside the supported range, an appropriate match will be selected

Stroke Style

>> When drawing lines, arcs and rectangles we can choose between a solid or dashed stroke style.

>> Implementation• g.setStrokeStyle(Graphics.DOTTED);• or• g.setStrokeStyle(Graphics.SOLID);>> Once the stroke style is set, every line, arc and rectangle drawn with the associated

Graphics that will use that stroke style.Important notes:>> A dotted line is drawn by skipping pixels in drawing path>> Which pixels are skipped is determined by the implementation>> End points (of lines and arcs) and corners (of rectangles) are not guaranteed to be

drawn

Drawing Line>> Each line has a starting point, (x1 y1) and ending (x2 y2)

point.>> Regardless of the stroke style, the thickness of a line is always

one pixel wide>> The starting location of the line and the current location of

the mouse were specified as the parameters to drawLine().// Draw with black peng.setColor(0, 0, 0);// Draw lineg.drawLine(startx, starty, currentx, currenty);>>example doodle.java

Drawing Arcs>> There are two methods to draw arcs: one to create an "outline" of an arc and the

second to fill an arc.

• >> The startAngle is the location to start the arc, where 0 is found at 3o'clock. Positive values go counter-clockwise startAngle of 90 the arc would begin at 12 o'clock.

>> The arcAngle is how many degrees to rotate from the startAngle>> A startAngle of 0 and arcAngle of 180 would begin at 3 o'clock and rotate counter-

clockwise to 9 o'clock>> AstartAngle of 90 with an arcAngle of 180 would begin at 12 o'clock and rotate

counterclockwise to 6 o'clock.>> Sample : Arc.java

Drawing Rectangles>>Rectangles can have either square or rounded corners and can be drawn as an

outline or filled.

>>The parameters for a non-rounded rectangle should be unmistakable. >>Specify the starting x and y location as well as the width and height.>> When creating a rectangle with rounded corners we also specify the horizontal

diameter (arcWidth) and the vertical diameter (arcHeight) of the arc drawn at each corner.

Drawing Text>>we draw text we must take into consideration the font style currently assigned to

the Graphics context

>> Fonts --Font support within MIDP has been slimmed down significantly compared with J2SE--A new Font is requested through the static method Font.getFont().• Font font =

Font.getFont(Font.FACE_SYSTEM,Font.STYLE_PLAIN,Font.SIZE_MEDIUM);--The idea behind using a static method is in an effort to conserve resources,

specifically, limiting garbage collection.--When requesting a Font keep in mind that the implementation may not be able to

accommodate your request.

Fonts>> There are three attributes associated with a Font: the face, style and size>> Unlike the face and size, you can combine style attributes using a logical OR (|)

operatorFont font = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD |

Font.STYLE_ITALIC,Font.SIZE_MEDIUM);

Fonts>> There are seven methods for querying a fonts attributes

>> One method worth mentioning is getStyle(), which returns an integer that may be any combination of the style attributes

Font font = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD | Font.STYLE_ITALIC | Font.STYLE_UNDERLINED,Font.SIZE_MEDIUM);

int style = font.getStyle();The variable style will have the value 7. Here's why.

Fonts Metrics>> Metrics describe information regarding various measurements of a Font.

>> The ascent is the distance from the baseline to the top of the majority of characters>>The descent is the distance from the baseline down to the bottom of the majority of

characters>>Leading is the gap between the descent of one line and the ascent of the next>>The font height is defined as the, which makes up the distance between baselines.

ascent + leading + descent>>The advance is the total "distance" occupied by a character or string of characters.>>The advance is more than just the width of the individual characters, it also takes into

consideration the gap between characters

Fonts Metrics Method>> getHeight() returns the font height>> getBaselinePosition() returns the ascent, the distance from the baseline to the top

of the tallest character.

Anchor Point>>To provide for additional flexibility and make it easier to align text,the concept of an

anchor point was introduced>>Anchor points are defined in pairs, just like x and y coordinates.>>The x (horizontal) values are LEFT, HCENTER and RIGHT>>The y (vertical) values are TOP, BASELINE and BOTTOM>>Picture these pairs as points around an imaginary box, known as the bounding box,

Anchor Point>>Anchor Point

g.drawString("core j2me", 0, 0 ,Graphics.TOP | Graphics.LEFT);g.drawString("core j2me", 0, 0 ,Graphics.TOP | Graphics.HCENTER);

Drawing Text>> drawing text is nothing more than deciding which method to call>> We can opt to draw a single character, an array (or subset of an array) of

characters, a String or subset of a String

>> Sample: Text

Drawing Image>>Drawing of images is not unlike drawing a line or text>>drawImage(Image, int x, int y, int anchor)>>we need to lay the groundwork before calling drawImage().Immutable Image1. Allocate the imageImage im = Image.createImage(“/imageTest.png”);2. Display the imageprotected void paint(Graphics g){..g.drawImage(im, 10, 10, Graphics.LEFT | Graphics.TOP);...}Mutable Image1. Allocate the imageImage im = Image.createImage(80, 20);2. Create the image content (using arcs, rectangles, lines and text)// Get Graphics object to draw onto image Graphics graphics = im.getGraphics();// Draw a filled rectangle graphics.fillRoundRect(0, 0, 50, 50, 20, 20);3. Display the image• protected void paint(Graphics g){…g.drawImage(im, 10, 10, Graphics.LEFT |

Graphics.TOP);…}

Drawing Image

>> ImmutableImage.java>>MutableImage.java

Clipping Regions>> A clipping region can be used to limit what is painted on the display>> One important benefit is a reduction in the time to refresh the display

>> sample Clip.java