# Texts and Transformations

## A simple text rotation

Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied.

### The JavaScript code

    var brd, txt;

txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});

// Rotate text around the lower left corner (-2,-1) by 30 degrees.
var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'});
tRot.bindTo(txt);
brd.update();


## A more complex example

The same transformations we applied to images in Images and Transformations can be applied to texts, too.

### The JavaScript code

Here is the complete code to accomplish this behaviour.

    var brd, txt, p0, p1;

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});

var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'});
tOff.bindTo(txt);
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);

// Scale text by dragging point "rot+scale"
// We do this by moving the text back to the origin (inverse of transformation tOff),
// then scale the text (because scaling "starts from (0,0))
// Finally, we move the text back to point "Offset"
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'});
var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},
function(){return p1.Dist(p0)/3;}], {type:'scale'});
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);