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 I: Shapes

  • submit to reddit


If the previous list of predefined shapes is not enough for your drawings then it will be worth mentioning that you can create complex shapes based on simpler ones by applying any of the following area operations: add, subtract, intersect, xor. Area operations in GraphicsBuilder require at least 2 shapes, as you can stack more than 2 as exemplified by the following images. Let's start with a group of 3 shapes with no area operation applied to them

group( borderColor: 'blue', borderWidth: 4, fill: 'cyan' ){
rect( x: 10, y: 10, width: 200, height: 80, arcWidth: 20, arcHeight: 20 )
circle( cx: 80, cy: 70, radius: 50 )
regularPolygon( cx: 135, cy: 90, radius: 60, sides: 5, angle: 90 )

Now onto the operations, to get the desired effect substitute group from the previous code with the operation's name






This is all for the first part, there are two more shapes yet to be explored (morph and text) as well as outlines (curves and lines) which we will look further in the next installment of this series. I hope you enjoy playing with the code found on this tutorial, please feel free to drop by the forums or leave a comment, feedback is always appreciated.

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


Christopher Brown replied on Mon, 2008/02/04 - 3:45am

Hi Andres,

How does this relate to ?

I'm assuming that with the Groovy graphics builder, you would need to use the builder on every UI repaint to completely repaint the image.  The scene graph API aims to create shapes that stay defined in memory between repaints, a bit like SVG without the XML, so with the SGAPI you define your circle once then have the choice of manipulating it through time.

Other questions: if not SGAPI-compatible, is there clipping support for the groovy graphics (i.e.: ways of making it easier to deal with) so that you don't waste time drawing shapes outside of the painting area?



Mahesh Kumar Nayak replied on Fri, 2011/05/20 - 3:48pm


I do complite agree with Christopher.

Andres Almiray replied on Mon, 2008/02/04 - 12:44pm in response to: Christopher Brown

Chris, GraphicsBuilder and SceneGraph share many traits but they are essentially two different and unrelated implementations. When I saw the announcement of SceneGraph my first reaction was to rework GraphicsBuilder to support it but because their API is still in flux I refrained to do so. Perhaps when their API goes to 1.0 GraphicsBuilder will be able to export/import SGAPI code, that would be great.

On the UI repaint, it depends on what you are trying to accomplish, GB includes a basic component where you can place your drawings: GraphicsPanel. This component is smart enough to redraw whenever it needs to, and only those places that have actually changed, which means it honors the clip. All shapes take into consideration the curret clip, no need to waste cycles, there is also an option to specify custom clips with the clip() node. You can also render to images directly and use your own cache mechanism.

GB can also reuse shape definitions, either with a normal Groovy variable or with an special 'asShape' property which I didn't show in this tutorial, but now that the topic has surfaced I will make sure it is included in the next part.

If you care to know more about GraphicsBuilder before I finish the other parts of the tutorial, please visit the project's site, you will also find more info at my blog, you'll see that GB has more to offer that what has been shown so far here. 


Andres Almiray replied on Mon, 2008/02/04 - 12:48pm in response to: Christopher Brown

You may also find this link useful, the images are snapshots of GraphicsPanel in action, a custom clip has been set (so that the radial lines do not extend beyond the rounded rectangle), you will also see other options as paints (and multipaints, a unique feature so far).


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.