web-dev-qa-db-ja.com

Raphael jsテキストの配置：テキストを円の中心に配置

Raphaeljsを使用して円で囲まれた数字を描画しています。問題は、各数値の幅/高さが異なるため、1セットの座標を使用してテキストを中央揃えできないことです。 IE、FF、Safariではテキストの表示が異なります。数値の高さ/幅を見つけてそれに応じて中央に配置する動的な方法はありますか？

これが私のテストページです：

http://jesserosenfield.com/fluid/test.html

と私のコード：

function drawcircle(div, text) { 
    var paper = Raphael(div, 26, 26); //<<
    var circle = paper.circle(13, 13, 10.5);
    circle.attr("stroke", "#f1f1f1");
    circle.attr("stroke-width", 2);
    var text = paper.text(12, 13, text); //<<
    text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
    text.attr("fill", "#f1f1f1");
}

window.onload = function () {
    drawcircle("c1", "1");
    drawcircle("c2", "2");
    drawcircle("c3", "3");
};

どうもありがとう！

htmlcssraphaelcentering
21
HandiworkNYC.com

（回答の書き直し）：Raphael.jsは、デフォルトでテキストノードを水平方向と垂直方向の両方に中央揃えします。

ここでの「センタリング」とは、paper.text（）メソッドのx、y引数が、テキストのバウンディングボックスの中心を想定していることを意味します。

したがって、円と同じx、y値を指定するだけで、目的の結果が得られます。

var circle = paper.circle(13, 13, 10.5);
var text = paper.text(13, 13, "10");

Example output

（ jsFiddle ）

関連するソースコード：

31
ento

多分これ：

var paper = Raphael(div, 26, 26); //<<
var circle = paper.circle(13, 13, 10.5);
circle.attr("stroke", "#f1f1f1");
circle.attr("stroke-width", 2);
var text = paper.text(0, 0, text); //<<
text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'});
text.attr("fill", "#f1f1f1");
text.translate((35 - text.getBBox().width)/2, (45 - text.getBBox().height)/2);
9
Jan Tojnar

この属性を使用します：'text-anchor':'start'：

paper.text( x, y, text ).attr( {'text-anchor':'start'} );
3
user213265

テキストを正確に回転させる の例（ページの右側の列にリストされている、または ここではgithub ）では、通常どおり、テキストを正確な位置に配置する方法について説明しています。 、IEで動作させるために必要な追加の手順。

テキストの境界ボックスが見つかります。 Janが提案したように、テキストをバウンディングボックスの半分だけ移動するのは簡単だと思います。

0
Clinton Blackmore