Here I was reviewing the recent changes in GraphicsBuilder before making the next release when I felt like playing around with shapes and see what would come out. Eventually decided to try a web 2.0 like button, you know, those fancy images with gradient and glossy effects. After 10 minutes of hacking around...



Something tells me I should stick to programming and leave the design stuff to more creative people than me. Anyway you may notice gradients applied almost everywhere, and as a matter of fact I'm relaying heavily on multipaints, they are useful for providing a base color and then applying one or more gradients on top. Here is the source
antialias( 'on' ) roundRect( x: 10, y: 10, width: 300, height: 100, borderColor: false, topLeft: 20, bottomLeft: 20, topRight: 50, bottomRight: 50 ){ multiPaint { colorPaint( 'red' ) linearGradient( x2: 0, y2: 50 ) { stop( offset: 0, color: color('darkOrange').brighter().derive(alpha:0.6) ) stop( offset: 1, color: color('darkOrange').darker().derive(alpha:0.6) ) } } } roundRect( x: 15, y: 15, width: 287, height: 50, borderColor: false, topLeft: 20, bottomLeft: 10, topRight: 40, bottomRight: 10 ){ linearGradient( x2: 0, y2: 50 ) { stop( offset: 0, color: color('white').derive(alpha:0.6) ) stop( offset: 1, color: color('white').derive(alpha:0.1) ) } } def fontFile = new File("WHOOPASS.TTF") font( Font.createFont(Font.TRUETYPE_FONT,fontFile).deriveFont(58.0f) ) text( text: 'Groovy', x: 27, y: 36, borderColor: false ){ colorPaint( color('black') ) } text( text: 'Groovy', x: 25, y: 34, borderColor: false ){ multiPaint { colorPaint( 'white' ) linearGradient( x2: 0, y2: 50 ) { stop( offset: 0, color: color('darkGray').brighter().derive(alpha:0.0) ) stop( offset: 1, color: color('darkGray').brighter().derive(alpha:0.4) ) } } } star( cx: 262, cy: 62, or: 25, ir: 12, fill: 'black' ) star( cx: 260, cy: 60, or: 25, ir: 12, borderColor: 'red' ){ basicStroke( width: 2 ) multiPaint { colorPaint( 'red' ) radialGradient( cx: 260, cy: 50, radius: 30, ) { stop( offset: 0, color: color('white').derive(alpha:0.4) ) stop( offset: 1, color: color('white').derive(alpha:0.0) ) } } }I don't I mentioned previously but Color has been groovified with a derive method, which is a cool way to obtain a new color from a base one. Notice also another new shape: roundRect. It is based on RoundedRectangleComplex from Degrafa, simply put it is a rectangle that may have different round values for each corner.

Now that I have proven that GrahicsBuilder is an option for creating webby buttons and that it can also render to offscreen images the next logic step would be to cook up a Grails plugin to serve custom-made on-the-fly images

Keep on Groovying!