Bounding box: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
We can supply a bounding box to specify the dimensions of the drawing panel.  
The bounding box defines the viewport of the board, i.e. the portion of the <math>\mathbb{R}^2</math> that is shown. The JavaScript code  
The JavaScript code  
<source lang="javascript">
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});
</source>
</source>
sets the vertical and horizontal units and the position of the origin such that
sets the vertical and horizontal units and the position of the origin such that
the upper left corner of the drawing panel has position ''(-5,10)'' and the lower right
the upper left corner of the drawing panel has position (-5,10) and the lower right
corner of the drawing panel has position ''(5,2)''.
corner of the drawing panel has position (5,-2).
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="https://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="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});
</script>
</html>
The source code of the page looks like this:
<source lang="xml">
<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div>
<script type="text/javascript">
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
</script>
</script>
</html>
</source>


[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 15:52, 22 March 2017

The bounding box defines the viewport of the board, i.e. the portion of the [math]\displaystyle{ \mathbb{R}^2 }[/math] that is shown. The JavaScript code

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], keepaspectratio: true, axis:true});

sets the vertical and horizontal units and the position of the origin such that the upper left corner of the drawing panel has position (-5,10) and the lower right corner of the drawing panel has position (5,-2).

The source code of the page looks like this:

<link rel="stylesheet" type="text/css" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
</script>