GraphicsBuilder Tutorial I: Shapes
Areas
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
ADD | SUBTRACT |
INTERSECT | XOR |
Conclusion
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.
- « first
- ‹ previous
- 1
- 2
- 3
- 4
- Login or register to post comments
- 11388 reads
- Printer-friendly version
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
Comments
Christopher Brown replied on Mon, 2008/02/04 - 3:45am
Hi Andres,
How does this relate to https://scenegraph.dev.java.net/ ?
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?
Thanks,
Chris
Mahesh Kumar Nayak replied on Mon, 2008/02/04 - 5:46am
Hi,
I do complite agree with Christopher.
http://www.forum.eatak.com
Andres Almiray replied on Mon, 2008/02/04 - 12:44pm
in response to: chrisbrown
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.
Cheers,
Andres
Andres Almiray replied on Mon, 2008/02/04 - 12:48pm
in response to: chrisbrown
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).
Cheers,
Andres