HTML Markup | JavaScript | Java | Home & Links

Tutorial 16 - Graphics and Imaging

Graphics brings life to applications. Java allows creation and altering of images using both awt and Java 2D architecture. Artists think in terms of a canvas as the foundation for their images and graphics. Swing JPanel and JFrame as well as awt Canvas objects are extended for use as the basic canvas. Output to the canvas is through a graphics context encapsulated by the Graphics class. This tutorial introduces the fundamental concepts of graphics and imaging. For more info read the basic and advanced 2D topics (transforms, clipping, antialiasing, etc.).

The Canvas

The canvas origin (0,0) is set at the upper left corner of its container. The graphics context is passed when the paint() or update() method is called. Use setBounds(x,y,w,h) or setSize(x,y) to set the canvas dimensions. Use Component.getGraphics() object to get the context.

Shapes and Paths

2D shapes are contained in the awt.geom library which must be imported. The paint() method must be overridden and its Graphics object cast to a Graphics2D object. Objects are first defined with one of the following 2D constructors and then drawn with either draw(obj) [outlined shape] or fill(obj) [filled shape].

2D arcs are built starting with an elliptical shape, then clipped by using a start angle and degree of rotation (think compass or clock). The final parameter defines closure using one of the Arc2D constants OPEN, CHORD or PIE.

2D polygons are represented by paths or series of line segments that enclose the polygon. A GeneralPath object is created and the start point set with the moveTo(x,y) method. The line segments are defined with lineTo(x,y). The polygon is then completed with ClosePath().

Shape awtJFC 2D
  • Line
  • Rectangle
  • (rounded)
  • Ellipse
  • Arc
  • Polygon
  • drawLine(x1,y1,x2,y2)
  • drawRect(x1,y1,x2,y2)
  • drawRoundRect(x1,y1,x2,y2,r1,r2)
  • drawOval(x,y,w,h)
  • drawArc(x,y,w,h,sdeg,ndeg)
  • drawPolygon(x[],y[],numPoints)
  • Line2D.Float(x1,y1,x2,y2)
  • Rectangle2D.Float(x1,y1,x2,y2)
  • RoundedRectangle2D.Float(x1,y1,x2,y2)
  • Ellipse2D.Float(x,y,w,h)
  • Arc2D.Float(x,y,w,h,sdeg,ndeg,clos)

Styles and Patterns

Pen strokes control the width, endpoint and junction renderings of drawn lines. A pen nib (ie. stroke style) is constructed with BasicStroke(width,endCap,joint). Width is in pixels expressed with type float. endCap and joint are optional parameters for decorative features. The BasicStroke class has special constants for these parameters. A pen nib is changed with setStroke(nib).

Fill patterns control how a drawn object is filled in with ink. Color, gradients and textures are the common fill patterns used. A gradient fill is a gradual change of color between points. It can be acyclic (default) or cyclic (ie. repeating). Two color gradient patterns are constructed with GradientPaint(x1,y1,c1,x2,y2,c2) . Adding a parameter of true will make the pattern cyclic. Multiple color patterns use the LinearGradientPaint class. Texture patterns are constructed with TexturePaint(bufferedImage, shape). Inkwells are filled with setPaint(patternOrColor) or setColor(color). (found in is an application demo of a checkerboard pattern that can easily be converted into an applet project. Possible extensions: parameters for tile dimensions and number of tiles in each direction, randomly chosen color pairs, and cycling through a list of color pairs.

Using Images

Create images with img=canvasObj.createImage(iwidth,iheight);.
Load images with File("fileName")); or with Applet class getImage:
getImage(new URL(absoluteAddressStr)
; getImage(getDocumentBase(),"image.gif") or
Display images with drawImage(imgObj,x,y,this).

ShowImg (found in is a simple applet that displays an image.

Adding Text

Font and FontMetrics classes allow selection of different typefaces and sizes as well as providing information on the geometry of the type. The TextLayout class can be used to add simple textual messages to graphics. getOutline(transformHandle) returns an outline of the text as a shape. This can then be displayed with draw(shapevar). drawString() is used to write simple text to the canvas.

The following is a Hello Graphics World app that demos how to use JFC 2D objects for text display. Included are gradient text, textured text and outlined text.

JR's HomePage | Comments [jatutorg.htm:2016 02 25]