Creating geometric elements: Difference between revisions

From JSXGraph Wiki
(New page: Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement(): <source lang="javascript"> board.createElement('point', [1,3], {n...)
 
No edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
Through the variable board new geometry elements can be added to the board. All elements are added with the method create():
<source lang="javascript">
<source lang="javascript">
board.createElement('point', [1,3], {name:'A', strokecolor:'red'});  
board.create('point', [1,3], {name:'A', strokecolor:'red'});  
</source>
</source>
Another example:
Another example:
<source lang="javascript">
<source lang="javascript">
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});  
board.create('point', [function(){return s.X();},function(){return t.X()}], {trace:true});  
</source>
</source>
The parameters of createElement() are:
The parameters of create() are:
<source lang="javascript">
<source lang="javascript">
board.createElement(elementType, parentElements, attributes);
board.create(elementType, parentElements, attributes);
</source>
</source>
where  
where  
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
**primitive elements:
**[[primitive elements]] like points and lines
***angle
**[[composite elements]] like bisectors, midpoints
***arc
***arrow
***circle
***curve
***group
***line
***point
***polygon
***sector
***text
***transform
**composite elements:
***arrowparallel
***bisector
***circumcircle
***circumcirclemidpoint
***integral
***midpoint
***mirrorpoint
***normal
***parallel
***parallelpoint
***perpendicular
***perpendicularpoint
***reflection
*parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.
*parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.
*attributes is a JavaScript object. Usually it is given in the "literal object" form
*attributes is a JavaScript object. Usually it is given in the "literal object" form
Line 45: Line 20:
{key1:value1, key2:value2, ...}
{key1:value1, key2:value2, ...}
</source>
</source>
[[Point]] is an easy example.
*Properties of a point:
*Properties of a point:
**style
**style
Line 63: Line 39:
*Additional properties for an element:
*Additional properties for an element:
**needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming
**needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming
*Possible parameters:
 
<source lang="javascript">
 
el.setProperty('key1:value1','key2:value2',...);
===See our [http://jsxgraph.uni-bayreuth.de/docs Reference] for the properties/attributes available for each element===
el.setProperty([key1:value1],[key2:value2],...);
el.setProperty({key1:value1, key2:value2},...);
</source>

Latest revision as of 07:48, 9 June 2011

Through the variable board new geometry elements can be added to the board. All elements are added with the method create():

board.create('point', [1,3], {name:'A', strokecolor:'red'});

Another example:

board.create('point', [function(){return s.X();},function(){return t.X()}], {trace:true});

The parameters of create() are:

board.create(elementType, parentElements, attributes);

where

  • elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
  • parentElements is an array containing the parameters which define the element. This can be parent elements like two points which define a line. It can also consist of JavaScript functions, numbers, and strings containing GEONExT syntax. The possible array elements depend on the element type.
  • attributes is a JavaScript object. Usually it is given in the "literal object" form
{key1:value1, key2:value2, ...}

Point is an easy example.

  • Properties of a point:
    • style
    • strokeColor
    • strokeWidth
    • fillColor
    • highlightStrokeColor
    • highlightFillColor
    • labelColor
    • visible
    • fixed
    • draft
    • trace
  • Additional properties of a line:
    • straightFirst
    • straightLast

There are no additional properties of a circle

  • Additional properties for an element:
    • needsRegularUpdate = [true]/false (eg axis are set to needsRegularUpdate=false) These elements are updated only, if the origin of the board is moved or after zooming


See our Reference for the properties/attributes available for each element