Geometry Element - Revision history

A WASSERMANN at 16:23, 20 February 2013

2013-02-20T16:23:07Z

A WASSERMANN at 16:20, 20 February 2013

2013-02-20T16:20:48Z

← Older revision		Revision as of 16:20, 20 February 2013
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">

Michael: typo & explanation

2009-06-03T18:31:09Z

typo & explanation

← Older revision		Revision as of 18:31, 3 June 2009
Line 3:		Line 3:
	= 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});
Line 19:		Line 19:
	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 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):		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.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});

Michael at 18:48, 2 June 2009

2009-06-02T18:48:34Z

← Older revision		Revision as of 18:48, 2 June 2009
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 =
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><array> parents</tt>		* <tt><array> 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><object> attributes</tt>		* <tt><object> 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):
	<source lang="javascript">		<source lang="javascript">
	p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});		p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
Line 29:		Line 29:
	</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=

Michael: /* Trace */

2009-06-02T16:31:07Z

Trace

← Older revision		Revision as of 16:31, 2 June 2009
Line 142:		Line 142:
	p2 = board.createElement('point', [0, 0], {trace: false});		p2 = board.createElement('point', [0, 0], {trace: false});
	</source>		</source>

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

	= Methods =		= Methods =

Michael: /* Trace */

2009-06-02T16:17:38Z

Trace

← Older revision		Revision as of 16:17, 2 June 2009
Line 132:		Line 132:
	==Trace==		==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 ~~movement~~ 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çon of Pascal]]. There are no restriction to the element, every element can be traced (even free points):		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ç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">		<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});

Michael at 16:16, 2 June 2009

2009-06-02T16:16:11Z

@@ Line 21: / Line 21: @@
 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):
 <source lang="javascript">
-  p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
+p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
 </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:
@@ Line 31: / Line 31: @@
 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.
-=Attributes=
+=Properties=
 ==Colors==
@@ Line 52: / Line 52: @@
 The code for this construction:
 <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.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
-  c = board.createElement('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
+c = board.createElement('circle', [p, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc'});
 </source>
@@ Line 75: / Line 75: @@
 The code for this construction:
 <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.createElement('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.createElement('point', [0, 0]);
-  l = board.createElement('line', [p1, p2], {strokeColor: 'red'});
+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});
+c = board.createElement('circle', [p1, 8], {strokeColor: 'green', highlightStrokeColor: 'lime', fillColor: '#123456', highlightFillColor: '#789abc', fillOpacity: 0.5});
 </source>
 == Width ==
 == Visibility ==
 == Draft ==
 ==Trace==

Michael: New page: 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 ...

2009-06-02T15:44:22Z

New page: 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 ...

New page

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):
<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>createElement()</tt>. The parameters of this function are for all elements the same:
<source lang="javascript">
JXG.Board.createElement = function(<string> elementType, <array> parents, <object> attributes);
</source>
* <tt><string> 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><array> 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><object> 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 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):
<source lang="javascript">
p = board.createElement('point', [1, 1], {style: JXG.POINT_STYLE_X, strokeColor: 'green'});
</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:
<jsxgraph box="jxgbox" width="300" height="300">
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 100, originY: 100, unitX: 50, unitY: 50});
p = board.createElement('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 general GeometryElement attributes is given.

=Attributes=

==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.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = b2.createElement('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.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
c = board.createElement('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.createElement('point', [8, 0], {strokeColor: 'green', highlightStrokeColor: 'lime'});
p32 = b3.createElement('point', [0, 0]);
l3 = b3.createElement('line', [p31, p32], {strokeColor: 'red'});
c3 = b3.createElement('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.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});
</source>

== Width ==

== Visibility ==

== Draft ==

==Trace==