1

HTML5プロジェクトで作業しています。境界のあるテキスト（つまり、テキスト注釈）を描画したいと思います。

まず、次のように、mousemoveで長方形を描画し、その中にテキストを入力します。

context.strokeRect(x,y,w,h);
context.fillText('Enter youe text here',x,y);

しかし、テキスト注釈を描き始めると、テキストは完全に描画されます。そのため、テキストは長方形の境界の外側にオーバーフローします。長方形の部分の画像を撮りたいので、このテキストのオーバーフローの問題を管理できます。私はこれを行うために次の方法を使用しています：-

 context.strokeRect(x,y,w,h);
 context.fillText('Enter youe text here',x,y);
 var imageData = context.getImageData(x,y,w,h);
 var data = imageData.data;
 context.putImageData(imageData, x,y);

このようにして、text-imageは正常に作成されますが、fillText（x、y、w、h）ステートメントを非表示にするにはどうすればよいですか。また、テキストを使用して、長方形の内側にあるimage-dataも取得しています。

事前にたくさん感謝します

4

1 に答える 1

2

私が正しく理解していれば、テキストの幅を測定してキャンバスを分割したいようですが？

私は、measureTextメソッドの使用方法を説明する小さな例のプロトタイプを作成しました。

http://jsfiddle.net/sQ3S7/

実際には、デモでわかるように、測定された高さの寸法は返されません。そのため、テキストの高さを確認するために、キャンバスを1行ずつループする必要がある場合があります。

私のJSゲームエンジンでは、それを正確に実行してJSON形式にエクスポートする小さなフォントツールを実行しました。おそらく、背後にあるアルゴリズムがあなたの途中で役立つでしょう:)

http://martens.ms/lycheeJS/tool/Font.html

コードはgithub.com/martensms/lycheeJSで入手できます（私はSOを初めて使用するため、2つ以上のリンクを投稿することはできません）

〜乾杯

于 2012-07-23T09:01:21.050 に答える