View source for 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 [[point]]s or [[circle]]s.

= 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):
<source lang="javascript">
  var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
</source>
To put elements on this board, we use the <tt>board</tt>-method <tt>create()</tt>. The parameters of this function are for all elements the same:
<source lang="javascript">
  JXG.Board.create = function(<string> elementType, <array> parents, <object> attributes);
</source>
* <tt>&lt;string&gt; elementType</tt>
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]], [[line|segment]], [[line|arrow]], [[line|axis]], [[tangent]], [[grouping objects|group]], [[circle]], [[polygon]], [[curve]], [[curve|functiongraph]], [[curve|spline]], [[riemannsum]], [[arc]], [[sector]], [[angle]], [[composition|arrowparallel]], [[composition|bisector]], [[composition|circumcircle]], [[composition|circumcirclemidpoint]], [[composition|integral]], [[composition|midpoint]], [[composition|mirrorpoint]], [[composition|normal]], [[composition|parallel]], [[composition|parallelpoint]], [[composition|perpendicular]], [[composition|perpendicularpoint]], [[composition|reflection]], [[text]], [[image]], [[slider]], [[chart]], [[transform]], [[turtle]], [[line|ticks]], [[extension|centroid]], [[extension|triangle]]
* <tt>&lt;array&gt; parents</tt>
<tt>parents</tt> 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 [[point|(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.
* <tt>&lt;object&gt; attributes</tt>
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 <tt>parents</tt> in most cases <tt>attributes</tt> is not required so you can just omit it or give an empty object <tt>{}</tt>.

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 [[point|the next page]]:
<source lang="javascript">
p = board.create('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
</source>
To ease the use of create it is advantageous to use anonymous arrays and objects like above. Let's look what we've just constructed:
<jsxgraph box="jxgbox" width="300" height="300">
  var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
  p = board.create('point', [1, 1], {style: 1, strokeColor: 'green'});
</jsxgraph>

Of course the <tt>style</tt> attribute is point specific, but <tt>strokeColor</tt> 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:
* <tt>'''strokeColor'''</tt>: 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.
* <tt>'''fillColor'''</tt>: nomen est omen, fill color for "thick" objects and ignored for "thin" objects.
* <tt>'''highlightStrokeColor'''</tt>: same as <tt>strokeColor</tt> but is used when the mouse is near the object.
* <tt>'''highlightFillColor'''</tt>: same as <tt>fillColor</tt> but only used when the mouse is near the object.

The value of a color attribute can be any [http://www.w3.org/TR/REC-html40/types.html#h-6.5 html compatible color string], e.g.: '#ff0000', 'red', 'navy', ...

Let's see these attributes in action:

<jsxgraph box="jxgbox2" width="600" height="400">
  var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 100, originY: 200, unitX: 20, unitY: 20});
  p = b2.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
  c = b2.create('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
</jsxgraph>
The code for this construction:
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
p = board.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = board.create('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
</source>

== Opacity ==

Analogous to the four main color attributes there are four opacity attributes
* <tt>'''strokeOpacity'''</tt>,
* <tt>'''fillOpacity'''</tt>.
* <tt>'''highlightStrokeOpacity'''</tt>,
* <tt>'''highlightFillOpacity'''</tt>
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:

<jsxgraph box="jxgbox3" width="600" height="400">
  var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 100, originY: 200, unitX: 20, unitY: 20});
  p31 = b3.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
  p32 = b3.create('point', [0, 0]);
  l3 = b3.create('line', [p31, p32], {strokeColor: 'red'});
  c3 = b3.create('circle', [p31, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc', fillOpacity: 0.5});
</jsxgraph>
The code for this construction:
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
p1 = board.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
// A point with default attributes
p2 = board.create('point', [0, 0]);
l = board.create('line', [p1, p2], {strokeColor: 'red'});
c = board.create('circle', [p1, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc', fillOpacity: 0.5});
</source>

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 <tt>'''strokeWidth'''</tt>. 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.:
<source lang="javascript">
l = board.create('line', [p1, p2], {strokeColor: 'red', strokeWidth: 4});
</source>
or just
<source lang="javascript">
l = board.create('line', [p1, p2], {strokeColor: 'red', strokeWidth: 4});
</source>
<jsxgraph box="jxgbox4" width="200" height="200">
  var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 100, originY: 100, unitX: 20, unitY: 20});
  p41 = b4.create('point', [3, 0]);
  p42 = b4.create('point', [0, 0]);
  l4 = b4.create('line', [p41, p42], {strokeColor: 'red', strokeWidth: 4});
</jsxgraph>

== Visibility ==

Visibility of an element is controlled by the property <tt>'''visible'''</tt>. 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.
<source lang="javascript">
p1 = board.create('point', [3, 0], {visible: true});
p2 = board.create('point', [0, 0], {visible: false});
</source>
<jsxgraph box="jxgbox5" width="200" height="200">
  var b5 = JXG.JSXGraph.initBoard('jxgbox5', {originX: 100, originY: 100, unitX: 20, unitY: 20});
  p51 = b5.create('point', [3, 0], {visible: true});
  p52 = b5.create('point', [0, 0], {visible: false});
</jsxgraph>
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 [http://www.geonext.de/ 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:
<jsxgraph box="jxgbox6" width="200" height="200">
  var b6 = JXG.JSXGraph.initBoard('jxgbox6', {originX: 100, originY: 100, unitX: 20, unitY: 20});
  p61 = b6.create('point', [3, 0], {draft: true});
  p62 = b6.create('point', [0, 0], {draft: false});
</jsxgraph>
<source lang="javascript">
p1 = board.create('point', [3, 0], {draft: true});
p2 = board.create('point', [0, 0], {draft: false});
</source>
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 <tt>'''trace'''</tt> 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 curve|Watt's Curve]] or [[Limacon|Lima&ccedil;on of Pascal]]. There are no restriction to the element, every element can be traced (even free points):
<jsxgraph box="jxgbox7" width="200" height="200">
  var b7 = JXG.JSXGraph.initBoard('jxgbox7', {originX: 100, originY: 100, unitX: 20, unitY: 20});
  p71 = b7.create('point', [3, 0], {trace: true});
  p72 = b7.create('point', [0, 0], {trace: false});
</jsxgraph>
<source lang="javascript">
p1 = board.create('point', [3, 0], {trace: true});
p2 = board.create('point', [0, 0], {trace: false});
</source>

See also: [[Geometry_Element#clearTrace.28.29|clearTrace()]]

= Methods =

== Set property ==

== Show/hide element ==

== clearTrace() ==