web-dev-qa-db-ja.com

ラファエルJSとテキストの配置？

x、y座標を指定して、SVGキャンバス内にテキストを配置しようとしています

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");

しかし、他のすべてのオブジェクトのようにテキストを配置しません...

x、y座標はオブジェクトの中心を指定します！ 「一番左と一番上」ピクセルではありません！

"左揃え"標準のHTMLと同じように、行に沿ったテキストを使用します。

助けをいただければ幸いです。

javascriptsvgraphael
45
RadiantHex

解決しました！

以下を使用して

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);

テキストを左揃えにします。

10
RadiantHex

テキストメソッドのテキストアンカープロパティは、デフォルトで「中」に設定されています。

左揃えにする場合は、オブジェクトの属性のテキストアンカーを変更します。

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});
151
Dasha Salo

上に垂直に揃える必要があるとは言わなかったのですが、paper.printの代わりにpaper.textを使用したい場合、垂直に上揃えにします。

これを試して：

function alignTop(t) {
    var b = t.getBBox();
    var h = Math.abs(b.y2) - Math.abs(b.y) + 1;

    t.attr({
        'y': b.y + h
    });
}

そして、Raphaelテキストオブジェクトを渡すだけです。それはあなたのためにそれを上揃えします。その関数を呼び出すだけです

20
Jimmy Chandra

以下のコードはIE、Chrome（Firefoxはテストされていません）でうまく機能します）：

var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"),
    b = t._getBBox();
t.translate(-b.width/2,-b.height/2);

説明：

raphaelでは、テキストはデフォルトで指定されたxとyの中央に配置されます。左揃えで設定できます。

t.attr({'text-anchor':'start'})

ただし、上揃えに設定する属性はありません。私が最初に試しました：

var b=t.getBBox();

iEでNaNを返したので、次のようにしました。

var b=t._getBBox();

_getBBox（）はドキュメント化されていませんが、Raphael自体によって内部的に使用され、機能します！

それが役に立てば幸い。

0
ciga