将文本换成矩形：raphael [英] 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.

推荐答案

我不确定是否有任何直接的方法根据矩形的大小包装文本。可能是您可以指定换行符或\ n。或者，您可以尝试在文本长度增加时调整矩形的大小。

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

这篇关于将文本换成矩形：raphael的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！