8

質問の下部にあるスクリーンショットでわかるように、または ゲームに直接アクセスしてください。テキストは、ブラウザーに応じて異なる方法で配置されます (firefox 15.0.1 は、IE 9.9 および Chrome 21 とは異なる方法でレンダリングされます)。描画関数の呼び出し:

context.fillText(this.wlines[i], this.xcoord, this.ycoord + y + (t) * this.sizey);

オブジェクトのコンストラクタ:

function textItem(text, xcoord, ycoord, sizex, sizey,style, context) {
this.wlines = [];
this.text = text;
this.xcoord = xcoord;
this.ycoord = ycoord;
this.sizex = sizex;
this.sizey = sizey;
this.style = style;

if (text == null) {
    text = "";
}
var lines = text.split("~");
// this is first line text
context.save();
if (this.style < 3) {
    context.shadowOffsetY = 2;
    context.font = 'bold 18px "palatino linotype"';
} else if (this.style == 4) {
    this.font = '16px "palatino linotype"';
    this.shadowOffsetX = 2;
    this.shadowOffsetY = 1;
    this.shadowColor = "rgba(255,255,255,1)";
}
if (this.style == 5) {
    this.wlines.push(text);
} else {
    for (j = 0; j < lines.length; j += 1) {
        var words = lines[j].split(" ");
        var lastLine = "";
        var l = sizex;
        var measure = 0;
        for (i = 0; i < words.length; i += 1) {
            var w = words[i];
            measure = context.measureText(lastLine + w).width;
            if (measure < l) {
                lastLine += (w + " ");
            } else {
                //this is body text
                if (this.style == 6) {
                    lastLine += "...";
                }
                this.wlines.push(lastLine);
                lastLine = (w + " ");
                if (this.style < 3) {
                    context.font = 'bold 14px "palatino linotype"';
                }
            }
            if (i == words.length - 1) {
                this.wlines.push(lastLine);
                break;
            }
        }
    }
}
context.restore();
}

text、xcoorc、ycoord、xsize、ysize は xml ファイルから解析されます。この例の化合物名:

<sizex>196</sizex>
<sizey>20</sizey>
<xcoord>383</xcoord>
<ycoord>14</ycoord>

style は、必要なテキスト効果に基づいて定義された値であり、 context は、描画するキャンバスの 2D コンテキストです (レイヤー効果用)。

示されているように、すべての値はブラウザー間でまったく同じです。私がブラウザ間で行う唯一のチェックは

<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>

html ページのヘッダーにあります。

行の高さの不一致がどこから来ているのか本当にわかりません。この問題に関する助けをいただければ幸いです。

行の高さの不一致はテキストによって異なりますが、まだ把握している方法ではありません。私が省略した情報があれば、遠慮なく質問してください。ff: ff 画面 http://www.sunshinecompound.com/images/firefoxscreen.png Chrome: クローム画面 http://www.sunshinecompound.com/images/googlescreen.png

更新少なくとも私のプログラムの解決策は、オフセットを使用して構築することでした。さらに、テキスト オブジェクトを作成し、テキスト オブジェクトを画像として保存することで、パフォーマンスが大幅に向上しました。速度が最も低下したブラウザである FF では、全体的なプログラムの実行時間が 5 分の 1 を少し超える程度に減少しました。これは、プログラム内でテキストが動的に変更されるたびにテキスト オブジェクトを再作成する必要があるにもかかわらずです (1 秒あたりの動的カウンターと 200 ミリ秒ごとにマウス ホバー効果を変更しますが、現在取得しているパフォーマンスでは、おそらく 100 ミリ秒まで改善できます)。

4

1 に答える 1

3

うん。

measureTextブラウザ間で、配置、スケーリング、カーニング、エイリアス、測定方法が異なります ( のように)。

ゲームでピクセルの一貫性が必要な場合は、テキストの代わりに画像を使用する必要があります。ごめん。:(

一貫性を保つ唯一の方法measureTextは、事前に計算することです。

一貫性を保つ唯一の方法fillTextは、テキストの代わりに画像を使用することです。とにかく、それは速くなければなりません。

テキストが非常に動的である場合、これらはどちらも受け入れられませんが、アプリで 100 未満の異なるテキストを書くだけの場合は、おそらく画像が最善の策です.

それ以外の場合は、画像から生成されたピクセル フォントを使用し (各文字または一般的な単語で drawImage を使用)、長い一般的な文字列をキャッシュして、良好なパフォーマンスを期待できます。

于 2012-09-26T02:44:21.447 に答える