2

私は答えを徹底的に探しました.stackoverflowが再び助けになることを願っています.

コンテキストのフォント サイズを設定すると、任意の精度が許容されるように見えます。

fontSize = 11.654321;
context.font = 'bold ' + fontSize + 'px sans-serif ';

コンテキスト オブジェクトを調べると、フォント サイズが非常に正確に設定されていることがわかります。measureText()ただし、コンテキスト オブジェクトのメソッドは常に整数値 (おそらく上限値) を返すことに気付きました。テキストの表示に使用される実際の精度を知っている人はいますか (ピクセルベースのフォントサイズを使用する場合)?

この情報を含むドキュメントへのリンクで十分です (精度について実際に通知する限り)。

誰かが尋ねた場合に備えて、次のようにして、テキストが特定の幅に収まるようにフォントを調整しようとしています。

var fontSize = 12;
context.font = 'bold ' + fontSize + 'px sans-serif ';

var text = "whatever";
var maxWidth = 200;

var currentWidth = context.measureText(text).width;
var adjustment = maxWidth / currentWidth;
fontSize *= adjustment;
context.font = 'bold ' + fontSize " 'px sans-serif ';
4

1 に答える 1

0

Chromium と Firefox の場合、実効精度は整数レベルのようです (Internet Explorer はテストしていません)。この問題を調査するためにこの jsFiddleを作成しました。私の調査によると、Chromium と Firefox では、整数以下の精度で指定されたフォント サイズが効果的に最も近い整数に丸められているようです。

私が行ったテストでは、measureText()メソッドが正しく機能していると仮定しています (これは誤った仮定である可能性があります)。テストでは、このメソッドにいくつかの奇妙な動作が見られました (Firefox よりも Chromium でより明白です)。

繰り返し文字 ('m') の固定長文字列を使用して、文字列の測定サイズをフォント サイズの関数としてグラフにしました。フォント サイズの入力ステップ サイズに 0.1 を使用する場合、出力文字列の幅はステップ サイズ 1.0 に対して一定のままです。これらの「ステップ」は整数のフォント サイズを中心としており、ジャンプは整数間の中間点で発生します。

Chromium で見られる奇妙な動作は、文字列の測定幅を変更せずに、入力フォント サイズを 2 ピクセルまで変更できる場合があることです。この動作は予想外ですが、定期的に発生します (ゼロからのオフセット)。[3.5, 5.5)、[12.5, 14.5)、[21.5, 23.5)、[30.5, 32.5)」などの入力値の間隔では、測定幅は変化しませんでした。これらの「大きな平坦な階段」の中心は、9 ピクセル (4.5、13.5、22.5、31.5) 離れているように見えます。残りの間隔の約半分の間隔の中心を持つ最初のものは、これが実際にバグである場合の手がかりになる可能性があります。

Firefox では、奇妙な動作ははるかに微妙です。入力ステップ サイズを 1 に変更すると、グラフは (予想どおり) ほぼ線形になります。ただし、定期的に、間隔 1 でグラフがわずかに急勾配になります。たとえば、これは [11.5, 12.5) と [35.5, 36.5] で発生します。 ）。

何か見落としがある場合、または私の方法に誤りがある場合は、コメントしてお知らせください。Firefox の動作についてはあまり心配していませんが、現時点では Chromium の動作はバグであると考えています。バグ レポートを提出する場合があります。その場合は、回答を更新してリンクを含めます。

于 2012-12-02T19:21:32.030 に答える