Create your own constructions/visualizations using JavaScript: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 3: Line 3:
<source lang="xml">
<source lang="xml">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<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>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</source>
</source>
Line 18: Line 17:
<source lang="xml">
<source lang="xml">
<script type="text/javascript">
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('box', {originX: 100, originY: 200, unitX: 50, unitY: 50});
  var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</script>
</source>
</source>
* Parameter 1: id of the division
* Parameter 1: id of the div tag
* Parameter 2: properties of the board. Possible entries are:
* Parameter 2: properties of the board.  
** originX
====Possible properties of the board====
** originY
* originX, originY (in pixel)
** unitX
* unitX, unitY (in pixel)
** unitY
* zoomX, zoomY
** zoomX
* Or easier than origin*, unit* and zoom*: [[Bounding box]]
** zoomY
* axis (true/false)
* grid (true/false)
* showNavigation (true/false)
* showCopyright (true/false)
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 ===
====The result====
Through the variable board new geometry elements can be added to the board. All elements are added with the method createElement():
<jsxgraph box="box" width="400" height="400">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
board.createElement('point', [1,3], {name:'A', strokecolor:'red'});  
</jsxgraph>
</source>
 
Another example:
====The complete code====
<source lang="javascript">
<source lang="xml">
board.createElement('point', [function(){return s.X();},function(){return t.X()}], {trace:true});
<head>
</source>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
The parameters of createElement() are:
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<source lang="javascript">
</head>
board.createElement(elementType, parentElements, attributes);
<body>
</source>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
where
<script type="text/javascript">
*elementType is a string containing the type of the element which is constructed. At the moment, possible types are:
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
**primitive elements:
</script>
***angle
</body>
***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>
</source>
=== Fourth step: [[Creating geometric elements]] ===

Latest revision as of 07:45, 9 June 2011

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/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', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
  • Parameter 1: id of the div tag
  • Parameter 2: properties of the board.

Possible properties of the board

  • originX, originY (in pixel)
  • unitX, unitY (in pixel)
  • zoomX, zoomY
  • Or easier than origin*, unit* and zoom*: Bounding box
  • axis (true/false)
  • grid (true/false)
  • showNavigation (true/false)
  • showCopyright (true/false)

More than one boards can be initialised simultaneously in one HTML file.

The result

The complete code

<head>
<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/jsxgraphcore.js"></script>
</head>
<body>
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 4, 6, -4], axis:true, grid:true});
</script>
</body>

Fourth step: Creating geometric elements

Retrieved from "http://jsxgraph.org/wiki/index.php?title=Create_your_own_constructions/visualizations_using_JavaScript&oldid=5327"