Geometry Element

JXG.GeometryElement is the base template object for all gemeotric objects in JSXGraph. It holds all properties and methods shared by all geometric elements. Of course you'd never create a GeometryElement on your board, so to visualize all it's attributes other elements are taken such as points or circles.

Create geometric element

To create a geometric element you first need a board (you should be already familiar with the initBoard parameters. If not, please read the Introduction page):

  var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});

To put elements on this board, we use the board-method createElement(). The parameters of this function are for all elements the same:

  JXG.Board.createElement = function(<string> elementType, <array> parents, <object> attributes);

• <string> elementType

This describes the object to create as a string. At the moment there are these element types implement (linked to the corresponding wiki page, if available): point, glider, intersection, line, segment, arrow, axis, tangent, group, circle, polygon, curve, functiongraph, spline, riemannsum, arc, sector, angle, arrowparallel, bisector, circumcircle, circumcirclemidpoint, integral, midpoint, mirrorpoint, normal, parallel, parallelpoint, perpendicular, perpendicularpoint, reflection, text, image, slider, chart, transform, turtle, ticks, centroid, triangle

• <array> parents

parents contains all objects on that the current object dependends on (more or less). What you have to put in here highly depends on the object, e.g. a (free) point requires two coordinates where it is drawn initially. A circle requires two points or a point and a line or a point and another circle or a point and a number. You see, in some geometric elements there are many variations to construct them so you'd better look for the above linked wiki pages to see which combinations of parent elements are required to construct a specific element.

• <object> attributes

With this parameter you can adjust visual properties like colors, visibility, labeling or logical options like tick distance on an axis etc. Just like above you have plenty of options. Some of the attributes are available for most of the geometric elements, that will be described here. For specific attributes (like ticks distance on an axis) you should read the corresponding wiki pages. Unlike parents in most cases attributes is not required so you can just omit it or give an empty object {}.

So, now we know how to create elements in theory, let's see how it works in practice by creating a point. A free point in most cases depends on no other element. But to create it initial coordinates are required so the parents array of our example point just consists of two numbers: the initial x and y coordinate of the point. The point should look like a green X and should be placed at (1,1). Don't worry about that attribute named 'style', it's just to make the point look like a X. You'll learn about that on the next page:

p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});

To ease the use of createElement it is advantageous to use anonymous arrays and objects like above. Let's look what we've just constructed:

Of course the style attribute is point specific, but strokeColor is available for alle geometric elements. Below an overview of all general GeometryElement attributes and methods is given.

Properties

Colors

In JSXGraph there are four important color attributes:

• strokeColor: main color for "thin" objects like a line or the point created above. Is used as a border color for "thick" objects like a circle or a polygon.
• fillColor: nomen est omen, fill color for "thick" objects and ignored for "thin" objects.
• highlightStrokeColor: same as strokeColor but is used when the mouse is near the object.
• highlightFillColor: same as fillColor but only used when the mouse is near the object.

The value of a color attribute can be any html compatible color string, e.g.: '#ff0000', 'red', 'navy', ...

Let's see these attributes in action:

The code for this construction:

var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
p = board.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = board.createElement('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});

Opacity

Analogous to the four main color attributes there are four opacity attributes

• strokeOpacity,
• fillOpacity.
• highlightStrokeOpacity,
• highlightFillOpacity

that are used completely analogous to the color attributes. The following example is pretty obvious but for the sake of completeness let's see what opacity does:

The code for this construction:

var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
p1 = board.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
// A point with default attributes
p2 = board.createElement('point', [0, 0]);
l = board.createElement('line', [p1, p2], {strokeColor: 'red'});
c = board.createElement('circle', [p1, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc', fillOpacity: 0.5});

As you can see the opacity value is given as a float number between 0 and 1.

Width

Because setting the width of an objects fill makes no sense there is only one width property you can set and it's called strokeWidth. Like the properties name implies it regulates the width of the stroke of an object. It's value is given as the amount of pixels, e.g.:

l = board.create('line', [p1, p2], {strokeColor: 'red', strokeWidth: 4});

or just

l = board.create('line', [p1, p2], {strokeColor: 'red', strokeWidth: 4});

Visibility

Visibility of an element is controlled by the property visible. Visible is of type boolean, so you can just set it true or false. If it's true, the element is shown on the board, else the element is hidden.

p1 = board.createElement('point', [3, 0], {visible: true});
p2 = board.createElement('point', [0, 0], {visible: false});

As you can see you can't see the second point (that should be labelled B).

Draft

This is a draft mode taken over from GEONExT that is just another predefined default scheme to draw an element. Default JSXGraph points are filled red with a deep blue border, let's see how draft points are drawn:

p1 = board.createElement('point', [3, 0], {draft: true});
p2 = board.createElement('point', [0, 0], {draft: false});

As you can see it is filled grey with no border.

Trace

When a point is moved and a construction is updated, the moved elements are just moved. With the boolean property trace set to true (default is false) the element is copied to it's board on every move so it leaves a permanent trail of it's movement. This can be used to visualize geometric loci like Watt's Curve or Limaçon of Pascal. There are no restriction to the element, every element can be traced (even free points):

p1 = board.createElement('point', [3, 0], {trace: true});
p2 = board.createElement('point', [0, 0], {trace: false});

See also: clearTrace()