Difference between revisions of "Images"

From JSXGraph Wiki
Jump to: navigation, search
(Dynamic image)
Line 23: Line 23:
 
</source>
 
</source>
  
==Dynamic image==
+
==Dynamic image I==
 
<jsxgraph with="500" height="500" box="box2">
 
<jsxgraph with="500" height="500" box="box2">
 
(function(){
 
(function(){
Line 33: Line 33:
 
</jsxgraph>
 
</jsxgraph>
  
 +
===The JavaScript code===
 +
The parameters
 +
* ''urlImage''
 +
* ''[x,y]''
 +
* ''[w,h]''
 +
can be given by functions. Here is an example where the position of the image depends on the position of the point "A".
 +
<source lang="javascript">
 +
  var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
 +
  var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
 +
  var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
 +
  var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);
 +
</source>
 +
 +
==Dynamic image II==
 +
<jsxgraph with="500" height="500" box="box3">
 +
(function(){
 +
  var brd = JXG.JSXGraph.initBoard('box3', {boundingbox:[-5,5,5,-5],axis:true});
 +
  var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
 +
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/fagiolo.jpg";
 +
  var urlImg2 = "http://jsxgraph.uni-bayreuth.de/distrib/images/perched_birds.jpg";
 +
  var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [2*1.61,2] ]);
 +
})();
 +
</jsxgraph>
 +
 +
===The JavaScript code===
 +
The parameters
 +
* ''urlImage''
 +
* ''[x,y]''
 +
* ''[w,h]''
 +
can be given by functions. Here is an example where the position of the image depends on the position of the point "A".
 +
<source lang="javascript">
 +
  var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
 +
  var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
 +
  var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
 +
  var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 22:57, 1 January 2011

Static image

The JavaScript code

Images can be included with the command

var im = brd.create('image',[urlImg, [-1,-1], [2*2.67181,2] ]);

It has the parameters:

  • urlImage: URL of the image. Data URLs are possible, but will not beshown in the Internet Explorer <8 and are restricted to max. 32kByte in the Internet Explorer 8.
  • [x,y]: position of the lower left corner of the image.
  • [w,h]: width and height of the image.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5],axis:true});
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
var im = brd.create('image',[urlImg, [-1,-1], [3,3] ]);

Dynamic image I

The JavaScript code

The parameters

  • urlImage
  • [x,y]
  • [w,h]

can be given by functions. Here is an example where the position of the image depends on the position of the point "A".

  var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
  var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
  var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);

Dynamic image II

The JavaScript code

The parameters

  • urlImage
  • [x,y]
  • [w,h]

can be given by functions. Here is an example where the position of the image depends on the position of the point "A".

  var brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5],axis:true});
  var p = brd.create('point',[-1,-1], {size:10, opacity:0.3});
  var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',[urlImg, [function(){return p.X();},function(){return p.Y();}], [3,3] ]);