29

Raphael ライブラリを使用して SVG テキスト ボックスを作成し、XML ドキュメントから抽出された動的文字列を入力しています。

時々、この文字列はテキストボックスを配置しているキャンバスよりも長いため、ボックスの幅を制限して改行を強制する必要があります (これが可能であるという証拠は見つかりません) または一定量の文字の後に '\n' 改行が挿入されること。

では、(1) これが最善の選択肢でしょうか? そして（2）どうすればこれを行うことができますか？

4

5 に答える 5

47

テキストの折り返しに関する属性はありませんが、使用できる簡単なトリックがあります。一度に 1 つの単語をテキスト オブジェクトに追加し、幅が広すぎる場合は改行を追加します。getBBox() 関数を使用して幅を決定できます。基本的に、昔ながらのタイプライターをエミュレートします。これを行うコードのサンプルを次に示します。これを、テキストと幅を受け取る単純な関数に簡単に変えることができます。

var r = Raphael(500, 500);
var t = r.text(100, 100).attr('text-anchor', 'start');
var maxWidth = 100;

var content = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. ";
var words = content.split(" ");

var tempText = "";
for (var i=0; i<words.length; i++) {
  t.attr("text", tempText + " " + words[i]);
  if (t.getBBox().width > maxWidth) {
    tempText += "\n" + words[i];
  } else {
    tempText += " " + words[i];
  }
}

t.attr("text", tempText.substring(1));
于 2010-06-30T21:14:42.980 に答える
9

答えてくれてありがとう。しかし、私は私のために働くためにいくつかの調整が必要であることがわかりました：

function textWrap(t, width) {
    var content = t.attr("text");
    var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    t.attr({
      'text-anchor' : 'start',
      "text" : abc
    });
    var letterWidth = t.getBBox().width / abc.length;
    t.attr({
        "text" : content
    });

    var words = content.split(" ");
    var x = 0, s = [];
    for ( var i = 0; i < words.length; i++) {

        var l = words[i].length;
        if (x + (l * letterWidth) > width) {
            s.push("\n");
            x = 0;
        }
        x += l * letterWidth;
        s.push(words[i] + " ");
    }
    t.attr({
        "text" : s.join("")
    });
}

変更点は次のとおりです。

  • 使用するために必要な比較（l *文字幅）...lだけでなく
  • if / elseがif-に変更されたため、改行によってXが常に0に設定されます。
  • 常に新しいl*文字幅をx値に追加します

お役に立てれば。

于 2012-03-27T23:56:02.633 に答える
3

大量のテキストの場合、マークのソリューションは遅くなります (firefox 11)。これは、BBOX を取得するためにテキストを何度も再レンダリングするためだと思います。次の関数は、大量のテキストに対してより効率的ですが、おそらく正確性に欠けます ( raphaelmarkup プロジェクトのコード)。

/**
 * @param t a raphael text shape
 * @param width - pixels to wrapp text width
 * modify t text adding new lines characters for wrapping it to given width.
 */
rm._textWrapp = function(t, width) {
    var content = t.attr("text");
    var abc="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    t.attr({'text-anchor': 'start', "text": abc});
    var letterWidth=t.getBBox().width / abc.length;
    t.attr({"text": content});
    var words = content.split(" "), x=0, s=[];
    for ( var i = 0; i < words.length; i++) {
        var l = words[i].length;
        if(x+l>width) {
            s.push("\n")
            x=0;
        }
        else {
            x+=l*letterWidth;
        }
        s.push(words[i]+" ");
    }
    t.attr({"text": s.join("")});
};
于 2012-03-22T00:13:27.213 に答える
0

少し遅れていることは承知していますが、これを自動的に行う私のRaphael-paragraphプロジェクトに興味があるかもしれません。

Raphael-paragraph を使用すると、最大幅と高さの制約、行の高さ、およびテキスト スタイルの構成を使用して、自動ラップされた複数行のテキストを作成できます。長い単語をハイフンでつないで、縦の境界を超える場合は切り詰めることができます。まだかなりベータ版であり、多くの最適化が必要ですが、目的には合っているはずです。

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

于 2015-05-24T22:54:06.410 に答える