web-dev-qa-db-ja.com

html5キャンバス要素のテキストの高さを測定する

テキストがキャンバスにレンダリングされる場合は、context.measureTextを使用してテキストの幅を取得できることを知っています。同じことをするが、テキストの高さを取得する方法はありますか？

自分で考えただけです。テキストを90度回転してから、幅をテストできるかもしれません。..

htmltexthtml5-canvasmeasurement
14
epeleg

私は同じ問題を抱えていました、そして私が見つけたのはこれです。文字列からフォントサイズを取得します。理由はわかりませんが、プロパティをPXではなくPTで設定した場合にのみ機能します。

ctx.font="20px Georgia"; // This will not work.
ctx.font="20pt Georgia"; // This is what we need.

次に、そこから値を取得します。

var txtHeight = parseInt(ctx.font);

これで、テキストの高さがわかりました。私が言ったように、私の側では、PTのサイズをPXとして設定する必要がありました

5
Manuel Choucino

このSO回答はおそらくあなたのニーズに合わせて過剰に設計されています HTMLキャンバス上のテキストの高さをどのように見つけることができますか？

もう少しシンプルなものが好きです。

var text = "Hello World";
var font = "Serif";
var size = "16";
var bold = false;

var div = document.createElement("div");
    div.innerHTML = text;
    div.style.position = 'absolute';
    div.style.top  = '-9999px';
    div.style.left = '-9999px';
    div.style.fontFamily = font;
    div.style.fontWeight = bold ? 'bold' : 'normal';
    div.style.fontSize = size + 'pt'; // or 'px'
document.body.appendChild(div);
var size = [ div.offsetWidth, div.offsetHeight ];
document.body.removeChild(div);

// Output
console.log( size );
var pre = document.getElementById( "output" );
if( pre )
    pre.innerHTML = size;
<pre id="output"></pre>

参照： http://www.rgraph.net/blog/2013/january/measuring-text-height-with-html5-canvas.html

4
Michaelangel007

キャンバスのフォントサイズをピクセル単位で設定し、テキストボックスの高さとして使用できるようにする必要があります。ただし、これを行うようになったとき、正確な値を取得するには、ピクセルの高さに約50％を追加する必要があることがわかりました。

var textHeight = fontSize * 1.5;

それだけでは不十分な場合は、かなり本格的な解決策がいくつか概説されています ここ 、そのうちの1つはgetImageDataメソッドを使用して垂直ピクセルの数をカウントします。

1
net.uk.sweet