x、y座標を指定して、SVGキャンバス内にテキストを配置しようとしています
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");
しかし、他のすべてのオブジェクトのようにテキストを配置しません...
x、y座標はオブジェクトの中心を指定します! 「一番左と一番上」ピクセルではありません!
"左揃え"標準のHTMLと同じように、行に沿ったテキストを使用します。
助けをいただければ幸いです。
以下を使用して
paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
テキストを左揃えにします。
テキストメソッドのテキストアンカープロパティは、デフォルトで「中」に設定されています。
左揃えにする場合は、オブジェクトの属性のテキストアンカーを変更します。
var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!").attr({'text-anchor': 'start'});
上に垂直に揃える必要があるとは言わなかったのですが、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テキストオブジェクトを渡すだけです。それはあなたのためにそれを上揃えします。その関数を呼び出すだけです
以下のコードは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自体によって内部的に使用され、機能します!
それが役に立てば幸い。