javascript - ラファエル JS とテキストの配置?

Question

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

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

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

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

標準の HTML と同じように、行に沿ってテキストを「左揃え」にしたいと思います。

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

score 151 · Accepted Answer

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

左揃えにしたい場合は、オブジェクトの属性で text-anchor を変更します。

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

score 20 · Accepted Answer

垂直方向に上に揃える必要があるとは言わなかったと思いますが、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 テキストオブジェクトを渡すだけです。それはあなたのためにそれを上に揃えます。そしてその関数を呼び出すだけです

score 10 · Accepted Answer

解決しました！

以下を使用して

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

テキストが左側に配置されるようになりました。

score 0 · Accepted Answer

次のコードは 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 自体によって内部的に使用されており、動作します!

それが役に立てば幸い。