Texts and Transformations II: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
This example is similar to the one [[Text and Transformations]], beside that the x-axis and | |||
the y-axis have different scalings. To be precise, tha ratio of the two scalings is equal to 4. | |||
The result is that rotating the text and the image will also stretch these objects. | |||
<jsxgraph with="500" height="500" box="box2"> | |||
(function(){ | |||
var brd, txt, im, p0, p1; | |||
JXG.Options.text.display = 'internal'; | |||
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true}); | |||
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); | |||
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); | |||
txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30}); | |||
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,10]], {opacity:0.5}); | |||
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); | |||
tOff.bindTo(txt); | |||
tOff.bindTo(im); | |||
tOff.bindTo(p1); | |||
// Rotate text around point "offset" by dragging point "rotate+scale" | |||
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); | |||
tRot.bindTo(txt); | |||
tRot.bindTo(im); | |||
})(); | |||
</jsxgraph> | |||
In order to avoid this effect, we have to do the following | |||
<jsxgraph with="500" height="500"> | <jsxgraph with="500" height="500"> | ||
(function(){ | (function(){ | ||
| Line 8: | Line 35: | ||
p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); | p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); | ||
p2 = brd.create('point', [0,4], {color:'blue', trace:true}); | p2 = brd.create('point', [0,4], {color:'blue', trace:true}); | ||
txt = brd.create('text',[ | txt = brd.create('text',[0, 0, JXG.JSXGraph.rendererType], {fontSize:'64'}); | ||
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,10]], {opacity:0.5}); | im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,10]], {opacity:0.5}); | ||
| Line 15: | Line 42: | ||
tOff.bindTo(p1); | tOff.bindTo(p1); | ||
tOff.bindTo(txt); | |||
tOff.bindTo(im); | tOff.bindTo(im); | ||
Revision as of 07:21, 1 August 2011
This example is similar to the one Text and Transformations, beside that the x-axis and the y-axis have different scalings. To be precise, tha ratio of the two scalings is equal to 4. The result is that rotating the text and the image will also stretch these objects.
In order to avoid this effect, we have to do the following
The JavaScript code
Here is the complete code to accomplish this behaviour.
