Extension - Revision history

A WASSERMANN at 11:07, 17 March 2020

2020-03-17T11:07:27Z

← Older revision		Revision as of 11:07, 17 March 2020
Line 22:		Line 22:
	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'':		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>		<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',		* ''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#create create] 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.		* ''creator'' is a reference to the create-function for the geometry element. In case of our example it is JXG.createTriangle.

Line 40:		Line 40:
	attributes.straightLast = false;		attributes.straightLast = false;

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

	var g = new JXG.Group(board);		var g = new JXG.Group(board);

Michael at 14:10, 7 June 2011

2011-06-07T14:10:53Z

← Older revision		Revision as of 14:10, 7 June 2011
Line 34:		Line 34:
	var l1, l2, l3;		var l1, l2, l3;

	if((attributes ~~== null) \|\| (typeof attribues == undefined~~))		if(!JXG.exists(attributes))
	attributes = ~~new Object()~~;		attributes = {};

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

Michael at 14:10, 7 June 2011

2011-06-07T14:10:05Z

← Older revision		Revision as of 14:10, 7 June 2011
Line 47:		Line 47:
	g.addPoints([p1, p2, p3]);		g.addPoints([p1, p2, p3]);

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

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...

2008-10-23T14:06:03Z

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...

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 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]]