Andres is a DZone Zone Leader and has posted 143 posts at DZone. You can read more from them at their website. View Full User Profile

GraphicsBuilder Tutorial II: Outlines & Shapes

02.10.2008
| 17583 views |
  • submit to reddit

Second part of the GraphicsBuilder tutorial series, this time outlines and the missing shapes from the previous part are shown.

Introduction

On the first part of this series, basic and extra shapes were introduced, now let's continue with outlines and revisit the missing shapes: text and morph. There are 4 basic outlines you can choose from:

  • line: draws a straight line
  • polyline: draws a sequence of connected lines defined by arrays of x and y coordinates.
  • cubicCurve: draws a cubic parametric curve segment.
  • quadCurve: draws a quadratic parametric curve segment.

All outlines share similar properties as shapes, like borderColor, borderWidth and opacity, making the code easily interchangeable if needed be. Before we get into the proper examples you may have noticed that the pics on the first part show some jaggies in the corners of each shape, because we are going to display outlines the jaggies will make the pics look uglier. It is a good thing that Java2D supports antialiasing to get rid of those nasty jaggies and because setting antialiasing options is so common when it comes to drawings, GraphicsBuilder includes a handy shortcut for setting them, just use an antialias() node. The following pics will show what happends before and after applying antialiasing settings to each set of lines.

The Outlines

Let's start with the most basic one, straight lines. They require 2 anchor points and nothing more.

rect( x:0, y: 0, width: 310, height: 60, borderColor: 'none', fill: 'white' )
line( x1: 10, y1: 10, x2: 300, y2: 10, borderColor: 'black', borderWidth: 3 )
line( x1: 10, y1: 20, x2: 300, y2: 40, borderColor: 'red', borderWidth: 3 )
antialias on
line( x1: 10, y1: 40, x2: 300, y2: 20, borderColor: 'blue', borderWidth: 3 )
line( x1: 10, y1: 50, x2: 300, y2: 50, borderColor: 'black', borderWidth: 3 )

You will notice that antialias accepts on as a parameter, it is actually an alias for the boolean true, and yes in case you are wondering off is an alias for false, so are yes and no too. These aliases make your code more readable in some situations. The next outline is polyline, which draws a sequence of linear segments connected by each pair of points.

rect( x:0, y: 0, width: 200, height: 120, borderColor: 'none', fill: 'white' )
polyline( points: [30, 100, 80, 100, 70, 10, 50, 10, 50, 30, 60, 30],
borderColor: 'black', borderWidth: 3 )
antialias on
polyline( points: [120, 100, 170, 100, 160, 10, 140, 10, 140, 30, 150, 30],
borderColor: 'darkGreen', borderWidth: 3 )

No surprises here, though you may be wondering what kind of color is 'none', well it is actually black with full alpha settings, meaning it is a transparent color. You may also set false, off, no to skip drawing the border. Now to the curve segments, quadCurve perhaps being the easiest to configure as it it requires just 3 anchor points

rect( x:0, y: 0, width: 250, height: 120, borderColor: 'none', fill: 'white' )
quadCurve( x1: 20, y1: 20, ctrlx: 300, ctrly: 60, x2: 20, y2: 100,
borderColor: 'red', borderWidth: 4 )
antialias on
quadCurve( x1: 100, y1: 20, ctrlx: 380, ctrly: 60, x2: 100, y2: 100,
borderColor: 'blue', borderWidth: 4 )

The last outline is cubicCurve, it requires 4 anchor points

rect( x:0, y: 0, width: 310, height: 160, borderColor: 'none', fill: 'white' )
cubicCurve( x1: 10, y1: 10, ctrlx1: 10, ctrly1: 100, ctrlx2: 300, ctrly2: 10,
x2: 300, y2: 100, borderColor: 'blue', borderWidth: 2 )
antialias on
cubicCurve( x1: 10, y1: 50, ctrlx1: 10, ctrly1: 140, ctrlx2: 300, ctrly2: 50,
x2: 300, y2: 150, borderColor: 'blue', borderWidth: 2 )

Granted outlines look pretty dull compared to shapes, but once we visit custom strokes and paints they will look much better.

Published at DZone with permission of its author, Andres Almiray.