Difference between revisions of "Bounding box"

From JSXGraph Wiki
Jump to navigationJump to search
 
(9 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 17:52, 22 March 2017

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

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>