文本换行以适应一个矩形：拉斐尔

任何人都知道的功能，可以在单词边界打破文本以适应矩形文本换行以适应一个矩形：拉斐尔

以下为矩形和文本代码

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

    };

当文本大于矩形宽度会自动换行，以便它始终显示为矩形边界。

来源

2012-01-07 Raje

就像这样：http://stackoverflow.com/questions/3142007/how-to-either-determine-svg-text-box-width-or-force-line-breaks-after-x-chara – 2012-01-07 17:52:42

@ RobSegerink我已经用相同的方式实现了。但是对于实现这一点，还有其他更好的选择吗？ – Raje 2012-01-07 18:19:57

我不确定是否有任何直接的方式来根据矩形的大小来包装文本。也许你可以指定换行符或“\ n”。或者，当文字长度增加时，您可以尝试调整矩形的大小。

下面是一个示例代码，其中随着文本长度的增加，矩形调整大小。

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

来源

2012-09-24 11:17:23 Nishit

我知道它现在是有点慢半拍，但你可能有兴趣在我的[拉斐尔 - 段] [1]项目。

这是一个小型库，允许您创建具有最大宽度和高度限制，行高和文本样式配置的自动包装多行文本。它仍然是一个测试版，需要很多优化，但它应该适用于您的目的。

GitHub页面上提供了使用示例和文档。

来源

2015-06-21 15:07:32

文本换行以适应一个矩形：拉斐尔

回答

相关问题