BB drawing

advertisement
Cosc 5/4730
Blackberry
Drawing
Screen size
• With Blackberry devices, they have a known
screen size in pixels. If you are programming for
specific device then it’s easy.
• To program for multi devices (many have the
same size anyway), but you can always ask.
– int height = Display.getHeight(); //in pixels
– int width = Display.getWidth(); //in pixels
• Note this also takes into account which mode: landscape or
portrait.
• Note 2, these will come back as zero, until after pushScreen!
– So it does not work to get them in the constructor.
Drawing
• To draw on a blackberry screen or image,
you’ll need to get the Graphics object from
the system.
• To draw on the screen, override the paint
method
– protected void paint( Graphics graphics )
• Now when the screen redraws, you control it.
• To have all fields drawn, call super.paint(graphics) from
your method.
– Before or after you do your drawing.
Drawing (2)
• You can also draw on things like a bitmap.
– Bitmap myImage = new Bitmap(360,480);
• Full screen image for a storm 1 & 2 in portrait mode.
– Graphics myImageG = Graphics.create(myImage);
– Using myImageG, we can now draw on the bitmap
image. When the screen refreshes, the image will
be drawn (within a BitmapField)
• You can use invalidate() to cause a screen redraw.
– Which actually calls the paint(Graphics) method.
Graphics
• The top left of the screen/graphics area is 0,0 and
the bottom right is getWidth(), getHeight()
• clear()
– clears the entire graphics area to the current
background color
• setBackgroundColor(int RGB)
– Sets the current background color.
• setColor(int RGB)
– Sets the current color to for drawing.
Color class
• The color class has a set of predefined RGB
colors that you can use.
– Some examples:
– Color.BLACK
– Color.WHITE
– Color.BLUE
– Color.RED
• etc… there are a lot of them.
quick example
paint(Graphics graphics) {
graphics.setBackgroundColor(Color.WHITE);
graphics.clear(); //clear screen to white
//now read to draw on it.
graphics.setColor(Color.BLACK);
…
}
Drawing lines and rectangles
• drawPoint(int x, int y)
– Draws a point.
• drawLine(int x1, int y1, int x2, int y2)
– Draws a line.
• drawRect(int x, int y, int width, int height)
– Draws a rectangle.
• drawRoundRect(int x, int y, int width, int height, int arcWidth, int
arcHeight)
– Draws a rectangle with rounded edges.
• fillRect(int x, int y, int width, int height)
– Fills a rectangle.
• fillRoundRect(int x, int y, int width, int height, int arcWidth, int
arcHeight)
– Fills a rectangle with rounded edges.
drawing arcs, ellipse, and circles
• drawArc(int x, int y, int width, int height, int startAngle, int
arcAngle)
– Draws an arc through a specified rectangle.
– Drawing a circle: drawArc(x,y,width,height,0,360)
• drawEllipse(int cx, int cy, int px, int py, int qx, int qy, int
startAngle, int arcAngle)
– Draws an ellipse.
• fillArc(int x, int y, int width, int height, int startAngle, int
arcAngle)
– Fills a circular or elliptical arc covering a specified rectangle.
• fillEllipse(int cx, int cy, int px, int py, int qx, int qy, int
startAngle, int arcAngle)
– Fills an ellipse.
Drawing images
• drawBitmap(int x, int y, int width, int height, Bitmap bitmap, int left,
int top)
– Draws a bitmap. left and top refer to the bitmap for drawing
• drawBitmap(XYRect dest, Bitmap bitmap, int left, int top)
– Draws a bitmap on a region specified by an XYRect object.
• drawImage(int x, int y, int width, int height, EncodedImage image,
int frameIndex, int left, int top)
– Draws an encoded image.
• drawImage(XYRect dest, EncodedImage image, int frameIndex, int
left, int top)
– Draws an encoded image on a region specified by an XYRect object.
• Also drawARGB and drawRGB
– Draws raw RGB (or ARGB) data from an int array
Drawing images example
Bitmap alien;
alien = Bitmap.getBitmapResource("alien.png");
…
• in paint method
graphics.drawBitmap(x, y, alien.getWidth(),
alien.getHeight(), alien,0,0);
– start drawing the image at the x,y location for the
full height and width of the image.
Drawing Text
• There are 8 methods for drawText, but I’m not going to cover all of
them.
– int drawText(String aText, int aX, int aY)
• Draws the text in a string using the current font, clipping to the current
clipping region and using the TOP baseline and LEFT alignment.
– int drawText(String aText, int aX, int aY, int aFlags)
• Draws the text in a string using the current font, clipping to the current
clipping region and using the baseline specified by aFlags.
– int drawText(String aText, int aX, int aY, int aFlags, int aWidth)
• Draws the text in a string using the current font, clipping to the current
clipping region, and using the baseline and alignment specified by aFlags and
aWidth.
• There all return an int, which is the linear advance, in pixels, of the
text drawn, so you know where start drawing again, for more text
or something to be drawn after the text.
invert
• For highlighting and varying other reasons two
more useful graphics functions that flip the
colors in a region of an image/screen.
• invert(int x, int y, int width, int height)
– Inverts a region.
• invert(XYRect rect)
– Inverts a region specified by an XYRect object.
Graphics
• This is not a complete list, see the
net.rim.device.api.ui.Graphics for the rest of
the functions.
double buffering.
• Blackberry Graphics objects are drawn to an
off-screen bitmap by the system.
– When the screen is repainted, it draws the off
screen bitmap
– So double buffering is inherently implemented.
• This is also true for true for all fields and
managers using the UI.
Loading a “bitmap”
• Remember a bitmap doesn’t necessary mean
a .bmp picture. More likely a .png image.
• Assuming the images are in res/ directory in
eclipse project
• To load up a bitmap
Bitmap bg = Bitmap.getBitmapResource(
"bg.png" );
Creating a blank bitmap
• To create a blank image
– Bitmap myImage = new Bitmap(X,Y)
• Where X and Y are the size of the image you want
• To draw on that bitmap image
– You need to create the graphics object for it.
– Graphics myGraphics = Graphics.create(myImage);
– Now use myGraphics just like you would graphics
in the paint method.
Q&A
Download