|
|
| Line 30: |
Line 30: |
| ** zoomY | | ** zoomY |
| More than one boards can be initialised simultaneously in one HTML file. | | More than one boards can be initialised simultaneously in one HTML file. |
| === Fourth step: Creating geometric elements === | | === Fourth step: [[Creating geometric elements]] === |
| 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], {name:'A', strokecolor:'red'});
| |
| </source>
| |
| Another example:
| |
| <source lang="javascript">
| |
| board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});
| |
| </source>
| |
| The parameters of createElement() are:
| |
| <source lang="javascript">
| |
| board.createElement(elementType, parentElements, attributes);
| |
| </source>
| |
| where
| |
| *elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
| |
| **primitive elements:
| |
| ***angle
| |
| ***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.
| |
| *attributes is a JavaScript object. Usually it is given in the "literal object" form
| |
| <source lang="javascript">
| |
| {key1:value1, key2:value2, ...}
| |
| </source>
| |
| *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
| |
| *Possible parameters:
| |
| <source lang="javascript">
| |
| el.setProperty('key1:value1','key2:value2',...);
| |
| el.setProperty([key1:value1],[key2:value2],...);
| |
| el.setProperty({key1:value1, key2:value2},...);
| |
| </source>
| |
First step
Link to prototye.js and to jsxgraphcore.js:
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
Second step
Insert a div inside of the document body:
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
Third step
Connect JXG with the div (usually at the end of the document body)
and call initBoard():
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
</script>
- Parameter 1: id of the division
- Parameter 2: properties of the board. Possible entries are:
- originX
- originY
- unitX
- unitY
- zoomX
- zoomY
More than one boards can be initialised simultaneously in one HTML file.
