1

私のウェブサイトには画像ジェネレーターがあります。訪問者は、画像にカスタム テキストを書き込むことができます。

画像を表示し、Javascript を使用して状況を処理し、画像に書き込むことができるようにします (画像がどのように見えるかをプレビューするため)。送信を押すと、x&y 座標、テキスト、フォント サイズが表示されます。

（フォントサイズの乗算もサポートしています）

画像にテキストを書き込むには、ImageTTFText関数を使用します。

わかりました、これまでのところすべてが良かったです。今私が抱えている問題は、文が長すぎて 1 行に収まらないときを知る方法です。wordwrap関数に出くわしましたが、信頼できません。文字数に応じて文を分割します。しかし、たとえば、'I' を 10 回入力し、'D' を 10 回入力すると、幅に違いがあることがわかります。

OK、それから、ボックスのサイズを計算するImageTTFBBoxに出くわしたので、長すぎるとわかります。これでいいのですが、どうすれば文を分割できますか? （言葉で）。

誰かが私に答えてくれたらとてもありがたいです。

4

2 に答える 2

0

私の論理は、単語を切り取らずに、各行にできるだけ多くの単語を追加することです。したがって、行に単語を追加し、レンダリングされたサイズをで確認しImageTTFBBox()、行がオーバーフローするまで繰り返します（そして、オーバーフローの原因となった単語を明らかに削除します）。行がオーバーフローし、行に単語が1つしかない状況に遭遇した場合は、その単語を切り取る必要があります。ImageTTFBBox()あなたは何度も電話をかけるでしょう。

于 2012-05-20T16:40:44.937 に答える
0

HTML5 を使用している場合は、送信する前に JavaScript に助けを求めることができます。キャンバス (コードで作成されている場合でも) とコンテキストがあると仮定すると、次のctxtことができます。

ctxt.font = "14pt Arial";
ctxt.textAlign = "left";
ctxt.fillStyle = "#000";
ctxt.fillText(text, x, y);
var metrics = ctxt.measureText(text);
var width = metrics.width;

これで、テキストの幅がわかったので、基本的なワード ラッピングを行うことができます。有効な幅 (画像の幅から内側のマージンを差し引いたもの) が 180 ピクセルで、テキストの幅が 679 ピクセルだとします。これは +/- 25% の比率 (26.05%) です。その比率を使用して、文の最初の 25% を抽出し、幅に収まるかどうかを確認し、描画して、1 行下に移動します。

于 2012-05-20T17:18:52.960 に答える