21

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

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

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");
};

どうもありがとう！

4

4 に答える 4

32

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

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

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

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

出力例

( jsFiddle )

関連するソース コード:

于 2011-03-17T14:51:42.943 に答える
9

多分これ：

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);
于 2010-04-03T21:42:49.523 に答える
3

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

paper.text( x, y, text ).attr( {'text-anchor':'start'} );
于 2011-06-14T23:49:40.097 に答える
0

テキストを正確に回転する例 (ページの右側の列、またはgithubにリストされています) では、テキストを正確な位置に配置する方法と、いつものように、IE で機能させるために必要な追加の手順について説明しています。

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

于 2010-12-09T23:11:18.657 に答える