ラップ：ラファエル

Question

誰でも続い長方形

に収まるように単語の境界でテキストを破ることができる機能を知っているが、矩形とテキストのためのコードである

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

    }; 

テキストがより大きく、それは常に四角形の境界に表示されるように自動的にラップします。

Answer 1

矩形のサイズに従ってテキストを折り返す直接的な方法があるかどうかはわかりません。改行や "\ 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); 

Answer 2

私は今少し遅れだけど、あなたは私の[ラファエル-段落] [1]プロジェクトに興味があるかもしれません。

これは、最大幅と高さの制約、行の高さ、テキストスタイルの設定で自動ラップされた複数行のテキストを作成できる小さなライブラリです。それはまだかなりベータ版であり、多くの最適化が必要ですが、あなたの目的のためにはうまくいくはずです。

使用例とドキュメントは、GitHubページで提供されています。