EasyCoder documentation

    

Graphics commands

Graphical commands make use of a limited subset of SVG and allow you to create and animate illustrations based on simple graphic primitives; circles, ellipses, rectangles, lines and text. See Examples for samples of usage.

circle

Declares a variable to represent a circle. To add your circle to the screen use create.

Example:
circle BigCircle

ellipse

Declares a variable to represent an ellipse.

line

Declares a variable to represent a line.

rect

Declares a variable to represent a rectangle.

svgtext

Declares a variable to represent a graphical text string. The special name is needed because there's already a text type in the browser package.

svg

Declares a variable to represent an area of the screen that will be used to draw graphics using the primitives above.

group

Declares a variable to represent a group of graphical objects that all move when the group moves.

create

Create an item from those listed above. We have some example pages - see Examples - but here's a simple introduction to using the graphics features. Assume the following declarations have been made:

circle Circle
rect Box
text Text
group Group
svg Stage
div Div

First we attach the Div variable to the DOM container we want to use for graphics. Here we assume it has the id ec-container and its styles include width and height specifiers.

attach Div to `ec-container`

Now create the Stage (an SVG object that will hold all the drawing elements):

create Stage in Div

If no size information is given the system will set it to fill its container. You can add explicit sizing:

create Stage in Div
style `width:300;height:200`

The values here (and everywhere else in the graphics domain) are standard CSS declarations. You can use sizing values such as 25em or 75% but most of the group functions will then not work properly as they have to perform arithmetic on the values given.

Next we create the group:

create Group in Stage

Groups are invisible; all you see is their contents, whose positions are relative to the group. When you move a group all its contents move in step. This is very handy when working with visual objects made of many component parts.

Now we can create the various graphical objects:

create Rect in Group
style `x:40;y:20;width:250;height:150;fill:pink;stroke:red;stroke-width:5;rx:10;ry:10`
create Circle in Group
style `cx:40;cy:75;r:30;fill:blue;stroke:white;stroke-width:5`
create Text in Stage
style `x:310;y:120;fill:white`
text `Invisible text`

The rectangle and the circle are created in the Group but the text is in the Stage. Since the text is positioned well to the right and is colored white it will be invisible - hence its content - but if you move the group or one of its component parts to the right it will at some point reveal the text. Likewise with the stroke for the circle, which is also white so it only shows where the circle overlaps the rectangle.

Items are placed in the order they are created; from back to front. So the last item created will be in front of all the others.

move

Allows you to move an element or group and all its contents. As mentioned above, when defining the positions of objects stick with plain integer values or the arithmetic involved with moving objects will probably fail.

Examples:
move Group to N 200
move MyRectangle to 12 44

Interacting with graphics

Because graphic elements are all HTML entities you can interact with them in the same ways as with any other browser element. The on click command allows you to set up event handlers for clicks on any of your elements, or on a group. In the latter case a click handler will be set up on each of the component parts of the group, so a click on each one of them has the same effect.

Example:
on click Group alert `Click on Group`