Images: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Static image==
<jsxgraph with="500" height="500">
<jsxgraph with="500" height="500">
(function(){
  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] ]);
})();
</jsxgraph>
===The JavaScript code===
Images can be included with the command
<source lang="javascript">
var im = brd.create('image',[urlImg, [-1,-1], [3,3] ]);
</source>
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.
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5],axis:true});
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,5,5,-5],axis:true});
picStr = "http://www.uni-bayreuth.de/layoutbilder_zentral/luftbild_campus2.jpg";
var urlImg = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
var im = brd.createElement('image',[picStr, [-1,3], [3,0]]);  
var im = brd.create('image',[urlImg, [-1,-1], [3,3] ]);
</source>
 
==Dynamic image I==
<jsxgraph with="500" height="500" box="box2">
(function(){
  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] ]);
})();
</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==
The following example is even more dyanmic. If the position of the point "A"s changed, the image not only follows but
also the image itself changes and the opcity.
<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,0], {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',
          [
            function(){if (p.X()<0) { return urlImg1; } else { return urlImg2; } },  // Make the image url dynamic
            [function(){return p.X();},function(){return p.Y();}], [2*1.61,2]        // Make the image position dynamic
          ],
          { opacity: function(){ return 2.0/Math.exp(Math.abs(p.Y()));} }            // Make the opacity dynamic
          );
})();
</jsxgraph>
 
===The JavaScript code===
<source lang="javascript">
  var brd = JXG.JSXGraph.initBoard('box3', {boundingbox:[-5,5,5,-5],axis:true});
  var p = brd.create('point',[-1,0], {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',
          [
            function(){if (p.X()<0) { return urlImg1; } else { return urlImg2; } },  // Make the image url dynamic
            [function(){return p.X();},function(){return p.Y();}], [2*1.61,2]        // Make the image position dynamic
          ],
          { opacity: function(){ return 2.0/Math.exp(Math.abs(p.Y()));} }            // Make the opacity dynamic
          );
</source>
 
==Rotated image ==
Rotate image around its lower left corner.
<jsxgraph with="500" height="500" box="box4">
(function(){
  var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.4 }            // original position
          );
  var im1 = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.6, rotate: 30 }            // rotate by 30°
          );
})();
</jsxgraph>
 
===The JavaScript code===
<source lang="javascript">
  var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.4 }            // original position
          );
  var im1 = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.6, rotate: 30 }            // rotate by 30°
          );
</source>
 
==Rotate image around its center==
Rotate image around its center. This has to be realized with transformations, see [[Texts and Transformations II]].
<jsxgraph with="500" height="500" box="box5">
(function(){
  var brd = JXG.JSXGraph.initBoard('box5', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.4 }            // original position
          );
  var im1 = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.6 }            // rotate by 30°
          );
 
  var tOff = brd.create('transform', [
                    function () {
                        return -im1.X() - im1.W()*0.5;
                    }, function () {
                        return -im1.Y() - im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tOffInverse = brd.create('transform', [
                    function () {
                        return im1.X() + im1.W()*0.5;
                    }, function () {
                        return im1.Y() + im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tRot = brd.create('transform', [
                    60 * Math.PI / 180.0
                ], {type: 'rotate'});
 
 
 
  tOff.bindTo(im1);        // Shift image to origin
  tRot.bindTo(im1);        // Rotate
  tOffInverse.bindTo(im1); // Shift image back
 
  brd.update();
})();
</jsxgraph>
</jsxgraph>
===The JavaScript code===
<source lang="javascript">
  var brd = JXG.JSXGraph.initBoard('box5', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.4 }            // original position
          );
  var im1 = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.6 }           
          );
  var tOff = brd.create('transform', [
                    function () {
                        return -im1.X() - im1.W()*0.5;
                    }, function () {
                        return -im1.Y() - im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tOffInverse = brd.create('transform', [
                    function () {
                        return im1.X() + im1.W()*0.5;
                    }, function () {
                        return im1.Y() + im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tRot = brd.create('transform', [
                    60 * Math.PI / 180.0        // Rotate by 60°
                ], {type: 'rotate'});
  tOff.bindTo(im1);        // Shift image to origin
  tRot.bindTo(im1);        // Rotate
  tOffInverse.bindTo(im1); // Shift image back
  brd.update();
</source>
[[Category:Examples]]

Latest revision as of 10:46, 9 March 2016

Static image

The JavaScript code

Images can be included with the command

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

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 following example is even more dyanmic. If the position of the point "A"s changed, the image not only follows but also the image itself changes and the opcity.

The JavaScript code

  var brd = JXG.JSXGraph.initBoard('box3', {boundingbox:[-5,5,5,-5],axis:true});
  var p = brd.create('point',[-1,0], {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',
          [
            function(){if (p.X()<0) { return urlImg1; } else { return urlImg2; } },   // Make the image url dynamic
            [function(){return p.X();},function(){return p.Y();}], [2*1.61,2]         // Make the image position dynamic
          ],
          { opacity: function(){ return 2.0/Math.exp(Math.abs(p.Y()));} }             // Make the opacity dynamic
          );

Rotated image

Rotate image around its lower left corner.

The JavaScript code

  var brd = JXG.JSXGraph.initBoard('box4', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.4 }             // original position
          ); 
  var im1 = brd.create('image',
          [urlImg1, [0, 0], [3, 3]],
          { opacity: 0.6, rotate: 30 }             // rotate by 30°
          );

Rotate image around its center

Rotate image around its center. This has to be realized with transformations, see Texts and Transformations II.

The JavaScript code

  var brd = JXG.JSXGraph.initBoard('box5', {boundingbox:[-5,5,5,-5],axis:true});
  var urlImg1 = "http://jsxgraph.uni-bayreuth.de/distrib/images/uccellino.jpg";
  var im = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.4 }             // original position
          ); 
  var im1 = brd.create('image',
          [urlImg1, [-3, 0], [3, 3]],
          { opacity: 0.6 }            
          ); 

  var tOff = brd.create('transform', [
                    function () {
                        return -im1.X() - im1.W()*0.5;
                    }, function () {
                        return -im1.Y() - im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tOffInverse = brd.create('transform', [
                    function () {
                        return im1.X() + im1.W()*0.5;
                    }, function () {
                        return im1.Y() + im1.H()*0.5;
                    }
                ], {type: 'translate'});
  var tRot = brd.create('transform', [
                    60 * Math.PI / 180.0        // Rotate by 60°
                ], {type: 'rotate'});



  tOff.bindTo(im1);        // Shift image to origin
  tRot.bindTo(im1);        // Rotate
  tOffInverse.bindTo(im1); // Shift image back

  brd.update();