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 always 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 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 on (1,1):

  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 general GeometryElement attributes is given.

Attributes

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});