Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

wrap text to fit into a rectangle : raphael

Anyone know of function that can break text at word boundaries to fit into rectangle

Following is code for rectangle and text

  window.onload = function () { 

    var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10;
    var group = paper.set();


    var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10);
    var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'});

    group.push(rect1);
group.push(text3);

     };

When text is greater than rectangle width it automatically wrap so that it always display into rectangle boundaries.

like image 996
Raje Avatar asked Jan 07 '12 17:01

Raje


1 Answers

I'm not sure whether there is any direct way to wrap the text according to the size of the rectangle. May be you can specify line breaks or a "\n". Or you can try to resize the rectangle as and when the text length increases.

Here is a sample code where the rectangle resize as the text length increases.

var recttext = paper.set();
el = paper.rect(0, 0, 300, 200);
text = paper.text(0,10, "Hi... This is a test to check whether the rectangle dynamically changes its size.").attr({"text-anchor":"start",fill:'#ff0000',"font-size": 14});
text1=paper.text(0,30,"hi").attr({"text-anchor":"start",fill: '#ff0000',"font-size": 14});
//el.setSize(495,200);
recttext.push(el);
recttext.push(text);
recttext.push(text1);
alert(recttext.getBBox().width);
alert(recttext.getBBox().height);
var att = {width:recttext.getBBox().width,height:recttext.getBBox().height};
el.attr(att);
recttext.translate(700,400);
like image 103
Nishit Avatar answered Oct 27 '22 17:10

Nishit