1

Rahpaelライブラリを使用して、JavaScriptのテキストでいくつかのボタンを作成しようとしています。適切な背景（ボタン）を作成できるように、描画する前にスタイル付きテキストのサイズを確認したいと思います。また、キャンバス/紙の外側にテキストを描画することは避けたいと思います（テキストの位置はその中央の位置です）。

Raphaels getBBox（）メソッドを使用できますが、これを行うには、最初にテキストを作成（描画）する必要があります。そこで、テキストを描画して、正しい位置に描画できるサイズにします。これは醜いです。だから私は与えられたフォント、フォントサイズ、ファミリーのスタイル付きテキストのメトリックを推定するためのいくつかの一般的な方法を探しています...

HTML5キャンバスhttp://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/を使用してこれを行う可能性がありますが、Raphaelはキャンバスを使用しません。RaphaelまたはプレーンJavascriptを使用してテキストメトリックを取得する可能性はありますか？

4

2 に答える 2

6

この猫をスライスする方法はいくつかあります。2つの明らかなものがすぐに思い浮かびます。

アウトオブビュールーラーテクニック

これが一番簡単です。キャンバスのviewBoxの外側にテキスト要素を作成し、フォント情報とテキストを入力して測定するだけです。 

// set it up -- put the variable somewhere globally or contextually accessible, as necessary
var textRuler = paper.text( -10000, -10000, '' ).attr( { fill: 'none', stroke: 'none' } );

function getTextWidth( text, fontFamily, fontSize )
{
    textResult.attr( { text: text, 'font-family': fontFamily, 'font-size': fontSize } );
    var bbox = textResult.getBBox();
    return bbox.width;
}

想像力の広がりによってはエレガントではありません。しかし、それは比較的少ないオーバーヘッドと複雑さなしであなたが望むでしょう。

Cufonizedフォント

cufonizedフォントの使用を検討する場合は、DOMをまったく混乱させることなく、特定のテキスト文字列のサイズを計算できます。実際、これはおそらく、キャンバスの要素measureTextメソッドが舞台裏で行うこととほぼ同じです。インポートされたフォントが与えられた場合、あなたは単にこのようなことをするでしょう（このプロトタイプを考えてください！）

//  font should be the result of a call to paper.[getFont][2] for a cufonized font
function getCufonWidth( text, font, fontSize )
{
    var textLength = text.length, cufonWidth = 0;
    for ( var i = 0; i < textLength; i++ )
    {
        var thisChar = text[i];
        if ( ! font.glyphs[thisChar] || ! font.glyphs[thisChar].w )
            continue;  //  skip missing glyphs and/or 0-width entities
        cufonWidth += font.glyphs[thisChar].w / font.face['units-per-em'] * fontSize;
    }
    return cufonWidth;
}

私は、cufonizedフォントを使用するのが本当に好きです。興味深い方法でアニメーション化できるという点で、テキストよりもはるかに便利です。ただし、この2番目のアプローチは、必要または必要以上に複雑になる可能性があります。

于 2013-02-12T21:03:44.263 に答える
5

ずさんなように見えますが、テキストを描画して測定し、ボタンを描画してラベルを移動しても問題はありません。安全のために、画面から描画してください。

var paper = Raphael(0, 0, 500, 500);

var text = paper.text(-100, -100, "My name is Chris");

//outputs 80 12
console.log(text.getBBox().width, text.getBBox().height);

しかし、これが本当にあなたの感性を傷つけるなら-そして私は理解するでしょう！--特定のフォントの各文字の幅を記憶するオブジェクトを簡単に生成できます。

var paper = Raphael(0, 0, 500, 500),
    alphabet = "abcdefghijklmnopqrstuvwxyz";
    font = "Arial",
    charLengths = {},
    ascii_lower_bound = 32,
    ascii_upper_bound = 126;

document.getElementById("widths").style.fontFamily = font;

for (var c = ascii_lower_bound; c <= ascii_upper_bound; c += 1) {
    var letter = String.fromCharCode(c);    
    var L = paper.text(-50, -50, letter).attr("font-family", font);
    charLengths[letter] = L.getBBox().width;
}

//output

for (var key in charLengths) if (charLengths.hasOwnProperty(key)) {
    var row = document.createElement("tr");
    row.innerHTML = "<td>" + key + "</td><td>" + charLengths[key] + "</td>";    
    document.getElementById("widths").appendChild(row);    
}
于 2013-02-12T20:38:32.560 に答える