2d graphics: part 1. android graphics libraries 2d graphics –custom 2d graphics library in...

2D Graphics: Part 1

©SoftMoore Consulting

Android Graphics Libraries

• 2D Graphics– custom 2D graphics library in packages

• android.graphics• android.graphics.drawable• android.graphics.drawable.shapes• android.view.animation

• 3D Graphics– OpenGL ES (subset of OpenGL for embedded systems) in

packages• android.opengl• javax.microedition.khronos.opengles

Slide 2

The slides in this section will concentrate on the 2D graphics library.


Hardware Acceleration

• Android 3.0 (Honeycomb) included a new 2D rendering pipeline designed to support hardware acceleration.– primarily for tablets originally– all drawing operations carried out using the GPU

• Android 4.0 (Ice Cream Sandwich) contained an improved version of the hardware-accelerated 2D rendering pipeline.– extended hardware acceleration to phones– on by default for all applications at API levels 4.0 and above– can be turned on for applications at lower API levels by adding android:hardwareAccelerated="true" to the <application> element in AndroidManifest.xml

Slide 3


Drawing – Basic Concepts

• An application that does not require a significant amount of processing or frame-rate speed will typically create a custom View component and draw onto a Canvas in the view’s onDraw() callback method.– A Canvas is passed as a parameter to this method.

• The onDraw() method is called by the Android framework to request that a View draw itself.

• An application can request that it’s View be redrawn by calling invalidate(), which causes Android to then call the onDraw() method.– Note that the callback to onDraw() is not guaranteed to be

instantaneous.

Slide 4


Main Classes Used in 2D Graphics

• Color – alpha (opaqueness), red, green, blue

• Paint – brush, style, fill, paint, font, font metrics….

• Bitmap – holds the actual pixels being drawn

• Canvas – a way to draw to the screen or bitmap– supports 2D transforms (scale, translate, rotate)– drawing is actually performed on an underlying Bitmap– has primitives for drawing lines, circles, rectangles, text, etc.

• Path – circles, rectangles, shape text, clipping shapes

• Drawable – for things that know how to draw on a canvas

Slide 5


Class Color

• Colors are implemented as four bytes representing the alpha, red, green, and blue components– all four bytes are packed into a 32-bit integer (type int)– each component has a value between 0 and 255 (00 and FF

hex)– alpha is a measure of transparency – 0 for fully transparent

• Constants in class Color (type int)– BLACK – BLUE – CYAN– DKGRAY – GRAY – GREEN– LTGRAY – MAGENTA – RED– TRANSPARENT – WHITE – YELLOW

• Static method to create a color objectstatic int argb(int alpha, int red, int green, int blue)

Slide 6


Obtaining a Color Object(All color values below are equal.)

• Use one of the predefined constants in class Colorint color1 = Color.MAGENTA;

• Use the static method argb()int color2 = Color.argb(255, 255, 0, 255);int color3 = Color.argb(0xFF, 0xFF, 0x00, 0xFF);

• Defined in a resource file (colors.xml)<?xml version="1.0" encoding="utf-8"?><resources> <color name="magenta">#FFFF00FF</color></resources>...int color4 = getResources().getColor(R.color.magenta);

Slide 7

Note: If only three values are specified for a color, thenthe alpha component is assumed to be 255 (i.e., opaque).

(* see note)


Class Paint

• A Paint object holds the style and color information about how to draw geometries, text, and bitmaps.

• Selected methods in class Paint– void setColor(int color)– void setStrokeWidth(float width)– void setStyle(Paint.Style style)– void setTextAlign(Paint.Align align)– void setTextSize(float textSize)– Typeface setTypeface(Typeface typeface)– void setUnderlineText(boolean underlineText)

Slide 8


Example: Using Class Paint

Paint paint = new Paint();paint.setAntiAlias(true);paint.setColor(Color.MAGENTA);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(2);

Slide 9

Notes:

1. Antialiasing reduces jagged edges for bitmap images togive a smoother appearance.

2. Calling setAnitAlias(true) is equivalent to callingsetFlags(Paint.ANTI_ALIAS_FLAG);

3. Style STROKE is used to paint the perimeter of the circle.The default style is FILL.


Class Canvas

• Think of a Canvas as representing the surface on which you draw, but technically drawing is actually performed on an underlying Bitmap.

• Features provided by class Canvas– contains primitives for drawing lines, circles, rectangles, text, etc.– provides support for clipping (restriction of an image to a

specified subregion of the canvas in order to protect other portions of the canvas. Primitives lying outside the clip region are not drawn.

– implements 2D transforms scale, translate, and rotate

Slide 10


Selected Methods in Class Canvas

• void drawCircle(float cx, float cy, float radius, Paint paint)– Draw the specified circle using the specified paint.

• void drawColor(int color)– Fill the entire canvas bitmap with the specified color.

• public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint)– Draw a line segment with the specified coordinates and paint.

• void drawLines(float[] pts, Paint paint)– Draw a series of lines. Each line is taken from 4 consecutive

values in the pts array.

Slide 11


Selected Methods in Class Canvas(continued)

• void drawPath(Path path, Paint paint)– Draw the specified path using the specified paint.

• void drawRect(float left, float top, float right, float bottom, Paint paint)– Draw the specified Rect using the specified paint.

• void drawRoundRect(RectF rect, float rx, float ry, Paint paint)– Draw the specified rounded rectangle using the specified paint.

• void drawText(String text, float x, float y, Paint paint)– Draw the text, with origin at (x,y), using the specified paint.

Slide 12


Example: Drawing a Circle

public class GraphicsView extends View { public GraphicsView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { ... } }

Slide 13

(implementation continued to next slide)

Basic Idea: Extend the View class. Putdrawing code in the onDraw() method.


Example: Drawing a Circle(continued)

protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); float centerX = getWidth()/2; float centerY = getHeight()/2; float radius = (centerX <= centerY ? centerX : centerY)/2; canvas.drawColor(Color.WHITE); canvas.drawCircle(centerX, centerY, radius, paint); }

Slide 14



public class MainActivity extends ActionBarActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new GraphicsView(this)); } }

Slide 15

Note: This activity does not use a layout file.



Slide 16


Custom View Class in XML Resource File

• Refer to the custom View class in an XML layout file using the “view” tag.

• Example<LinearLayout ... <view class="edu.citadel.android.graphics2d.GraphicsView" android:id="@+id/graphics_view" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout>

Slide 17

If you use regular (non-inner) classes, you can replace <view class="edu.citadel.android.graphics2d.GraphicsView" …/>with <edu.citadel.android.graphics2d.GraphicsView …/>


Class Path

• Class Path encapsulates compound geometric paths consisting of straight line segments and curves.– can be drawn with canvas.drawPath(path, paint)

• Enum Path.Direction– CCW (for counter-clockwise)– CW (for clockwise)

• Enum Path.FillType– EVEN_ODD– INVERSE_EVEN_ODD– INVERSE_WINDING– WINDING

Slide 18


Selected Methods in Class Path

• void addCircle(float x, float y, float radius, Path.Direction dir)– Add a closed circle contour to the path.

• void addOval(RectF oval, Path.Direction dir)– Add a closed oval contour to the path.

• void addRect(float left, float top, float right, float bottom, Path.Direction dir)– Add a closed rectangle contour to the path.

• void addRoundRect(RectF rect, float[] radii, Path.Direction dir)– Add a closed round-rectangle contour to the path.

Slide 19


Selected Methods in Class Path(continued)

• void close()– Close the current contour.

• void lineTo(float x, float y)– Add a line from the last point to the specified point (x,y).

• void moveTo(float x, float y)– Set the beginning of the next contour to the point (x,y).

• void setFillType(Path.FillType ft)– Set the path's fill type.

• void transform(Matrix matrix)– Transform the points in this path by matrix.

Slide 20


Example: Using Class Path to Draw a Circle

Same as the “Draw Circle” example except that the line canvas.drawCircle(centerX, centerY, radius, paint);

is replaced by Path circle = new Path(); circle.addCircle(centerX, centerY, radius,

Direction.CW); canvas.drawPath(circle, paint);

Slide 21


Drawing Text

• Among the most important Canvas draw methods are those used to draw text since, unlike some drawing commands, text rendering capabilities are not duplicated in other Android classes.

• The basic draw methods simply draws the text starting at coordinates passed as parameters.void drawText(String text, float x, float y, Paint paint)

• It is also possible to draw text along a Path. For a Path that defines a circle, the text is drawn in the same direction (clockwise/counterclockwise) as the circle.void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)

Slide 22


Drawing Text(continued)

• It is also possible to specify the exact position of each character in the text.void drawPosText(String text, float[] pos, Paint paint)

Slide 23


Example: Drawing Text on a Path(continued)

@Overrideprotected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.BLUE); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); float centerX = getWidth()/2; float centerY = getHeight()/2; // set radius to 3/4 of the smaller dimension float radius = (3*(centerX <= centerY ? centerX : centerY))/4;

Slide 24

(continued on next slide)



canvas.drawColor(Color.WHITE);

Path circle = new Path(); circle.addCircle(centerX, centerY, radius, Direction.CW); canvas.drawPath(circle, paint); int textSize = 35; paint.setTextSize(textSize); paint.setStyle(Paint.Style.FILL); paint.setStrokeWidth(1);

String quote = getContext().getString(R.string.quote);

Slide 25

(continued on next slide)



// draw text three fourths the distance around the circle float threeFourths = (float)(3*Math.PI*radius)/2;

// approx. path length of the quote float strPathLength = (float) quote.length()*textSize*0.205);

float hOffset = threeFourths - strPathLength; canvas.drawTextOnPath(quote, circle, hOffset, textSize, paint); }

Slide 26



Slide 27


Relevant Links

• Canvas and Drawableshttp://developer.android.com/guide/topics/graphics/2d-graphics.html

• Android Programming: 2D Drawing Part 1: Using onDrawhttp://www.coreservlets.com/android-tutorial/

• API Demos (Graphics Demos)<ANDROID_SDK_HOME>\samples\<API_LEVEL>\ApiDemos

(possibly also on your Android phone)

• Android Development: 2D Grahpicshttp://www.linuxtopia.org/online_books/android/devguide/guide/topics/graphics/2d-graphics.html

Slide 28

http://developer.android.com/guide/topics/graphics/2d-graphics.html

http://www.coreservlets.com/android-tutorial/

http://www.linuxtopia.org/online_books/android/devguide/guide/topics/graphics/2d-graphics.html

http://www.linuxtopia.org/online_books/android/devguide/guide/topics/graphics/2d-graphics.html

2d graphics: part 1. android graphics libraries 2d graphics –custom 2d graphics library in...

Documents