Extension

2008-10-23T14:06:03Z

132.180.233.197: New page: Because of the dynamic of JavaScript JSXGraph can easily be extended without touching the project's source files. == Triangle == For a very simple example we will implement a simple tria...

Because of the dynamic of JavaScript JSXGraph can easily be extended without touching the project's source files.

== Triangle ==

For a very simple example we will implement a simple triangle. This example is extremely minimal and uses only two methods which are required by every geometry element in JSXGraph: One function is written to create the element and one is invoked to register the element in JSXGraph.

== Create-function ==

This create function is used to construct a geometry element based on given parent elements. The function's definition is the same for every geometry element. It takes three parameters ''board'', ''parents'', ''attributes'' and returns the created object or an object which members are the created objects.
* ''board'' is a reference to the [http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html JXG.Board] the parents are on and the geometry element shall be put on,
* ''parents'' is an array of parent elements which define the element to construct,
* ''attributes'' define the look and feel of the element e.g. colors or if a point shall be fixed or free.

E.g.
<source lang="javascript">JXG.createTriangle = function(board, parents, attributes) [...]</source>
'''Note:''' The function doesn't have to be placed in the JXG namespace.

''...to be continued...''

== Register-method ==

The [http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.JSXGraph.html JSX.JSXGraph] singleton has a method called [http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.JSXGraph.html#.registerElement registerElement] which takes two parameters ''element'' and ''creator'':
<source lang="javascript"><static> JXG.JSXGraph.registerElement(element, creator)</source>
* ''Element'' is a identification string like the strings passed in the first parameter of the [http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Board.html#createElement createElement] method, e.g. 'point', 'circle' or 'polygon'. For our triangle we'll choose 'triangle',
* ''creator'' is a reference to the create-function for the geometry element. In case of our example it is JXG.createTriangle.

<source lang="javascript">JXG.JSXGraph.registerElement('triangle', JXG.createTriangle);</source>

== The complete example code ==
<source lang="javascript">
JXG.createTriangle = function(board, parents, attributes) {
if(JXG.IsPoint(parents[0]) && JXG.IsPoint(parents[1]) && JXG.IsPoint(parents[2])) {
var p1 = parents[0], p2 = parents[1], p3 = parents[2];
var l1, l2, l3;

if((attributes == null) || (typeof attribues == undefined))
attributes = new Object();

attributes.straightFirst = false;
attributes.straightLast = false;

l1 = board.createElement('line', [p1, p2], attributes);
l2 = board.createElement('line', [p2, p3], attributes);
l3 = board.createElement('line', [p3, p1], attributes);

var g = new JXG.Group(board);
g.addPoints([p1, p2, p3]);

return {A: p1, B: p2, C: p3, a: p4, b: l1, c: l2, G: g};
} else {
throw ("Can't create triangle with parent types '" + (typeof parents[0]) + "' and '" + (typeof parents[1]) + "' and '" + (typeof parents[2]) + "'.");
}
};

JXG.JSXGraph.registerElement('triangle', JXG.createTriangle);
</source>

[[Category:Examples]]

JSXGraph Wiki - User contributions [en]

Extension