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 2: | Line 2: | ||
the y-axis have different scalings. To be precise, tha ratio of the two scalings is equal to 4. | 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. | The result is that rotating the text and the image will also stretch these objects. | ||
<jsxgraph with="500" height="500" box=" | <jsxgraph with="500" height="500" box="box1"> | ||
(function(){ | (function(){ | ||
var brd, txt, im, p0, p1; | var brd, txt, im, p0, p1; | ||
JXG.Options.text.display = 'internal'; | JXG.Options.text.display = 'internal'; | ||
brd = JXG.JSXGraph.initBoard(' | brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true}); | ||
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); | p0 = brd.create('point', [0,0], {style:5, name:'offset'}); | ||
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); | p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); | ||
txt = brd.create('text',[0,0, 'Hello | txt = brd.create('text',[0,0, 'Hello'], {fontSize:64}); | ||
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5}); | im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5}); | ||
| Line 17: | Line 17: | ||
tOff.bindTo(im); | tOff.bindTo(im); | ||
tOff.bindTo(p1); | tOff.bindTo(p1); | ||
// Rotate text around point "offset" by dragging point "rotate+scale" | // 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'}); | var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); | ||
| Line 26: | Line 27: | ||
In order to avoid this effect, we have to do the following | In order to avoid this effect, we have to do the following | ||
<jsxgraph with="500" height="500"> | <jsxgraph with="500" height="500" box="box2"> | ||
(function(){ | (function(){ | ||
var brd, txt, p0, p1, p2, im; | var brd, txt, p0, p1, p2, im; | ||
JXG.Options.text.display = 'internal'; | JXG.Options.text.display = 'internal'; | ||
brd = JXG.JSXGraph.initBoard(' | brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true}); | ||
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); | p0 = brd.create('point', [0,0], {style:5, name:'offset'}); | ||
p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); | p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); | ||
Revision as of 07:24, 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.
