html canvas text overflow省略記号

Question

テキストが使用可能な幅に収まらず、切り捨てられる必要がある場合は、テキストの最後に省略記号が付いたキャンバスにテキストを描画できますか？ありがとう。

Answer 1

html5 drawTextにはこのようなことはなく、実装するには少し複雑です。目的のサイズに収まるまで文字列をトリミングするにはループが必要です。 テキストを回転またはその他の特殊効果を持っていない場合、私は絶対位置と、次のCSSスタイルで、通常のdiv要素を使用することをお勧め：

overflow: hidden; 
text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
white-space: nowrap; 
width: 100%; 

Answer 2

標準的な機能はありません。私は1つを必要に応じて

は、私は最高のフィッティング文字列を計算し、この小さな関数を作った：cは、2Dコンテキストをある

function fittingString(c, str, maxWidth) { 
    var width = c.measureText(str).width; 
    var ellipsis = '…'; 
    var ellipsisWidth = c.measureText(ellipsis).width; 
    if (width<=maxWidth || width<=ellipsisWidth) { 
     return str; 
    } else { 
     var len = str.length; 
     while (width>=maxWidth-ellipsisWidth && len-->0) { 
      str = str.substring(0, len); 
      width = c.measureText(str).width; 
     } 
     return str+ellipsis; 
    } 
} 

。

あなたのフォントとキャンバスの他の描画パラメータを設定した後、通常の文字列を描画することができます

c.fillText(fittingString(c, "A big string that will likely be truncated", 100), 50, 50); 

Answer 3

をいくつかのブラウザがあります - 複数行のテキストレンダリングをサポートしていない関連技術は。

私はこの問題に取り組むために小さなライブラリを開発しました。ライブラリは、文字レベルのテキストレンダリングをモデル化して実行するためのオブジェクトを提供します。これはあなたが必要とするものだけを行う必要があります：

http://www.samuelrossille.com/home/jstextのスクリーンショット、チュートリアル、およびダウロードのリンクについては、こちらをご覧ください。