Geometry Element: Difference between revisions

From JSXGraph Wiki
No edit summary
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
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 =
= 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):
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">
<source lang="javascript">
   var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
   var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
</source>
</source>
To put elements on this board, we use the <tt>board</tt>-method <tt>createElement()</tt>. The parameters of this function are for all elements the same:
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">
<source lang="javascript">
   JXG.Board.createElement = function(<string> elementType, <array> parents, <object> attributes);
   JXG.Board.create = function(<string> elementType, <array> parents, <object> attributes);
</source>
</source>
* <tt>&lt;string&gt; elementType</tt>
* <tt>&lt;string&gt; elementType</tt>
Line 15: Line 15:
[[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]]
[[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>&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>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>
* <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>.
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 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):
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">
<source lang="javascript">
p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
p = board.create('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
</source>
</source>
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:
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">
<jsxgraph box="jxgbox" width="300" height="300">
   var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
   var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
   p = board.createElement('point', [1, 1], {style: 1, strokeColor: 'green'});
   p = board.create('point', [1, 1], {style: 1, strokeColor: 'green'});
</jsxgraph>
</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 general GeometryElement attributes is given.
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=
=Properties=
Line 47: Line 47:
<jsxgraph box="jxgbox2" width="600" height="400">
<jsxgraph box="jxgbox2" width="600" height="400">
   var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 100, originY: 200, unitX: 20, unitY: 20});
   var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 100, originY: 200, unitX: 20, unitY: 20});
   p = b2.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
   p = b2.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
   c = b2.createElement('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
   c = b2.create('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
</jsxgraph>
</jsxgraph>
The code for this construction:
The code for this construction:
<source lang="javascript">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 200, unitX: 20, unitY: 20});
p = board.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
p = board.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = board.createElement('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
c = board.create('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
</source>
</source>


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


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


Line 106: Line 106:
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.
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">
<source lang="javascript">
p1 = board.createElement('point', [3, 0], {visible: true});
p1 = board.create('point', [3, 0], {visible: true});
p2 = board.createElement('point', [0, 0], {visible: false});
p2 = board.create('point', [0, 0], {visible: false});
</source>
</source>
<jsxgraph box="jxgbox5" width="200" height="200">
<jsxgraph box="jxgbox5" width="200" height="200">
   var b5 = JXG.JSXGraph.initBoard('jxgbox5', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   var b5 = JXG.JSXGraph.initBoard('jxgbox5', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   p51 = b5.createElement('point', [3, 0], {visible: true});
   p51 = b5.create('point', [3, 0], {visible: true});
   p52 = b5.createElement('point', [0, 0], {visible: false});
   p52 = b5.create('point', [0, 0], {visible: false});
</jsxgraph>
</jsxgraph>
As you can see you can't see the second point (that should be labelled ''B'').
As you can see you can't see the second point (that should be labelled ''B'').
Line 121: Line 121:
<jsxgraph box="jxgbox6" width="200" height="200">
<jsxgraph box="jxgbox6" width="200" height="200">
   var b6 = JXG.JSXGraph.initBoard('jxgbox6', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   var b6 = JXG.JSXGraph.initBoard('jxgbox6', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   p61 = b6.createElement('point', [3, 0], {draft: true});
   p61 = b6.create('point', [3, 0], {draft: true});
   p62 = b6.createElement('point', [0, 0], {draft: false});
   p62 = b6.create('point', [0, 0], {draft: false});
</jsxgraph>
</jsxgraph>
<source lang="javascript">
<source lang="javascript">
p1 = board.createElement('point', [3, 0], {draft: true});
p1 = board.create('point', [3, 0], {draft: true});
p2 = board.createElement('point', [0, 0], {draft: false});
p2 = board.create('point', [0, 0], {draft: false});
</source>
</source>
As you can see it is filled grey with no border.
As you can see it is filled grey with no border.
Line 135: Line 135:
<jsxgraph box="jxgbox7" width="200" height="200">
<jsxgraph box="jxgbox7" width="200" height="200">
   var b7 = JXG.JSXGraph.initBoard('jxgbox7', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   var b7 = JXG.JSXGraph.initBoard('jxgbox7', {originX: 100, originY: 100, unitX: 20, unitY: 20});
   p71 = b7.createElement('point', [3, 0], {trace: true});
   p71 = b7.create('point', [3, 0], {trace: true});
   p72 = b7.createElement('point', [0, 0], {trace: false});
   p72 = b7.create('point', [0, 0], {trace: false});
</jsxgraph>
</jsxgraph>
<source lang="javascript">
<source lang="javascript">
p1 = board.createElement('point', [3, 0], {trace: true});
p1 = board.create('point', [3, 0], {trace: true});
p2 = board.createElement('point', [0, 0], {trace: false});
p2 = board.create('point', [0, 0], {trace: false});
</source>
</source>



Latest revision as of 16:23, 20 February 2013

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 create(). The parameters of this function are for all elements the same:

  JXG.Board.create = 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.create('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});

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:

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.create('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = board.create('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.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});

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.create('point', [3, 0], {visible: true});
p2 = board.create('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.create('point', [3, 0], {draft: true});
p2 = board.create('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.create('point', [3, 0], {trace: true});
p2 = board.create('point', [0, 0], {trace: false});

See also: clearTrace()

Methods

Set property

Show/hide element

clearTrace()