GraphicsBuilder Tutorial I: Shapes

Arrows

If you thought we would be finished by now, there are other shapes we can explore! Arrows can be found almost anywhere so it makes sense to have a shape for them. Arrows have a tail and a head, depth controls how much the tail and head share from the total width, rise controls how much the tail takes from the total height, finally arrows can also be quick rotated with an angle property.

def values = [0,0.25,0.5,0.75]
def colors = ['red','darkOrange','blue','darkGreen']
def angles = [0,45,150,240]
(0..3).each { index ->
   arrow( x: 10 + (index*110), y: 10, width: 80, height: 50, depth: values[index],
          borderColor: 'black', fill: colors[index] )
   arrow( x: 10 + (index*110), y: 80, width: 80, height: 50, rise: values[index],
          borderColor: 'black', fill: colors[index] )
   arrow( x: 10 + (index*110), y: 150, width: 90, height: 50, angle: angles[index],
          borderColor: 'black', fill: colors[index] )
}

Crosses

If arrows are common, crosses are too (nothing related to religious ones), you can find them as plus signs or as error indicators. they can have a round finish and can also be rotated with an angle property.

def roundness = [0,0.5,1]
def colors = ['red','blue','darkGreen']
def angles = [0,45,60]
(0..2).each { index ->
   cross( cx: 50 + (index*110), cy: 50, radius: 40, borderColor: 'black',
          roundness: roundness[index], fill: colors[index] )
   cross( cx: 50 + (index*110), cy: 160, radius: 40, borderColor: 'black',
          roundness: roundness[index], fill: colors[index], angle: angles[index] )
}

Pins

Pins can be described as a mix between a semi-circle and an isosceles triangle, you may find a similar shape while using an online map provider known for it's "do no evil" mantra. Pins can also be rotated with an angle property (see a trend here :-)) and they can change the height of the triangle.

def heights = [40,10,60]
def colors = ['red','blue','darkGreen']
def angles = [0,45,60]
(0..2).each { index ->
   pin( cx: 50 + (index*110), cy: 50, radius: 40, borderColor: 'black',
          height: heights[index], fill: colors[index] )
   pin( cx: 50 + (index*110), cy: 160, radius: 40, borderColor: 'black',
          height: heights[index], fill: colors[index], angle: angles[index] )
}

Multi Rounded Rectangles

The last shape (or is it?) is the multi rounded rectangle. It gives you more control over how each corner will or will not be rounded. Opposed to just arcWidth and arcHeight properties found on the rect shape, roundRect allows 2 round properties for each corner.

roundRect( x: 10, y: 10, width: 140, height: 100, borderColor: 'black',
   topLeftWidth: 20, bottomLeftWidth: 20, topRightWidth: 50, bottomRightWidth: 50,
   fill: 'red' )
roundRect( x: 160, y: 10, width: 140, height: 100, borderColor: 'black',
   topLeftWidth: 20, topLeftHeight: 40, bottomLeftWidth: 40, bottomLeftHeight: 20,
   topRightWidth: 0, topRightHeight: 0, bottomRightWidth: 60, bottomRightHeight: 70,
   fill: 'blue' )
}