6

iPad 2 キャンバス アプリ (ゲーム) を持っていて、それを新しい iPad Retina ディスプレイで実行したいと考えています。

簡単に言えば、Retina iPad モデル用に iPad2 の画像を拡大/縮小する最良の方法は何ですか?

私が行ったグーグル検索から、さまざまな方法を見てきましたが、多くの方法には、網膜サイズの画像から始めてスケーリングを行うことが含まれます。

また、Retina 品質のサイズのピクセルを画面に表示するとパフォーマンスが低下し、iPad サイズの画像を使用した方が画質が多少犠牲になると聞いたことがあります。

現在のところ、新しい iPad ではアプリの左上 4 分の 1 が表示されますが、これは理にかなっていますが、iPad 2 と比較するとパフォーマンスは衝撃的です。

私が見たテクニックには、ピクセル密度を使用した CSS メディア クエリや、明らかに非常に高速な CSS 変換が含まれます。

ありがとう

4

1 に答える 1

10

この問題を処理するための簡単な関数をまとめました。基本的に、現在のキャンバスサイズを取得し、デバイスのピクセル比で拡大縮小し、CSSを使用して縮小します。次に、比率によってコンテキストをスケーリングして、元のすべての関数が通常どおりに機能するようにします。

あなたはそれにショットを与えて、パフォーマンスがどのように運ばれるかを見ることができます。希望どおりでない場合は、削除するだけです。

function enhanceContext(canvas, context) {
    var ratio = window.devicePixelRatio || 1,
        width = canvas.width,
        height = canvas.height;

    if (ratio > 1) {
        canvas.width = width * ratio;
        canvas.height = height * ratio;
        canvas.style.width = width + "px";
        canvas.style.height = height + "px";
        context.scale(ratio, ratio);
    }
}
于 2012-06-22T22:21:01.873 に答える