Canvas テキスト描画で CSS の text-overflow: ellipsis を実現
Canvas にテキストを描画する際に一定のサイズを超えると “…” といった形で CSS の text-overflow: ellipsis
と同様にオーバーフロー分を省略する方法を紹介します。
やりたいこと
Canvas に長いテキストを描画する際に一定のサイズを超えると超えた分を省略して “…” のようにCSS の text-overflow: ellipsis
と同じように表示したいと思ったのですが既存の API で簡単にはできなかったので、自分で作ってみたいと思います。
テキスト描画幅の指定
Canvas へのテキスト描画は CanvasRenderingContext2D
インスタンスの fillText()
メソッドを使います。
構文は以下の通りです。
引数の text
は描画するテキスト、x
は描画を開始する x 座標、y
は描画を開始する y 座標です。
そしてオプション引数の maxWidth
はテキストを描画する範囲の最大幅です。
maxWidth
を指定するとその範囲内でテキストが描画されるのはよいのですが、maxWidth
を超えるテキストを描画するとフォントを水平方向に縮小したり、全体を縮小して表示されたりします。
まず maxWidth
を指定せずに描画します。
次に maxWidth
に 60
を指定してみます。
水平方向に縮小されて描画されているのがわかるかと思います。
補足
描画幅とは直接関係ありませんが、2つ注意点があるので補足します。
まず fillText
の x
、y
ですが、テキストの左下の位置が基準となっていますので注意です。
次に font
の指定ですが、font-size
、font-family
が必須です。font-size
のみの指定はできないので注意です。
MDN に以下の記載があります。
CanvasRenderingContext2D.font
はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS の font の記述子と同じ構文を用います。 - CanvasRenderingContext2D.font - Web API | MDN
CSS の font 記述子と同じ構文とあるので、CSS の font 記述子を確認してみます。
次の値を含めなければなりません。
<font-size>
<font-family>
- font - CSS: カスケーディングスタイルシート | MDN
font-size
と font-family
は必須で指定する必要があるとのこと。普段 CSS で font
一括指定プロパティ使わないので知りませんでした。
フォント描画幅の取得
さて .fillText()
の maxWidth
で、テキスト描画の最大幅が指定できることはわかりましたが、テキスト幅がその最大幅を超える場合にテキストが縮小されてしまいます。描画したいテキストの幅が予めわかれば最大幅を超える分のテキストに対して編集してから描画することができそうです。
テキストの幅を描画前に取得することは measureText()
で実現できます。
実際に取得してみます。
measureText()
の戻り値は TextMetrics - Web APIs | MDN というオブジェクトで、width
が実際の幅となります。
オーバーフローしたテキストを省略する
では measureText()
を使って、テキストが最大幅を超える場合に省略表示する関数を作成します。
実際に使ってみます。
無事に省略表示されて描画されました。
あとがき
ひと手間必要ですが、Canvas へのテキスト描画で CSS の text-overflow: ellipsis
のような省略表示を実現してみました。例えばソシャゲのようなものでユーザー名を表示したりするようなケースとかで使えるのではないかなと思います。