0

幅と高さの比率と寸法が同じ既知の数の画像が与えられた場合、解像度が異なる可能性のある画面にそれらを表示するための最良の方法を決定するアルゴリズムはありますか? 別名、それらを 1 ページまたは 2 ページに配置します。

たとえば、画面に 2 つの画像を表示できるかどうかを判断したり、幅/高さが与えられた場合に、一方の画像の方が見栄えが良いことを「検出」したりします。幅に合わせて上下に空白を入れるか、高さに合わせて左右に空白を入れるかを確認します。

私は自分自身でそのようなアルゴリズムを決定しようと試みましたが、完全に満足しているわけではなく、より良い解決策やアドバイスがあるかもしれないと思っていました.

残念ながら、「幅 > 高さ => 2 つの画像、それ以外の場合は 1 つの画像」という単純なものではありません。

要約すると、最初に画像の高さに基づいてすべての計算を行い、次に画面の幅が画像の幅の 1.5 倍より大きいかどうかを確認します。大きいほど高さを下げて 2 つの画像が収まるようにし、小さいほど画像を 1 つだけ表示します。それでも、画像サイズ/画面解像度の特定の組み合わせに対して、望ましくない結果が得られ続けています。

同じ問題に出くわし、余裕のあるコードやヒントがあれば、大歓迎です。

PS ご存知かもしれませんが、これは雑誌の紹介に関するものです。

[編集] コーディングに javascript (バニラ、プラグイン/フレームワークなし) を使用していることを忘れていました。

4

2 に答える 2

1

kd-tree アルゴリズムを使用できます。kd ツリー階層は、画面を四角形に分割し、バイナリ ツリーに似たデータ構造を使用して情報を格納します。たとえば、ディスク容量を表示するために、多くのアプリケーションで使用されます。Jquery プラグイン Masonry も同じことができます。Jquery プラグインのツリーマップも見てみましょう。

于 2012-06-18T08:01:32.943 に答える
0

私自身の質問に答えるために、そのようなアルゴリズムはないようです、または少なくとも私はそれを見つけることができませんでした. 提案されたkd-treeは、実用的であるにはあまりにも複雑なオーバーキルソリューションです。

結局、私は自分で思いついたものに落ち着きました：

  • まず、ウィンドウの高さをチェックして、最大の画像が収まるかどうかを確認します。そうでない場合は、一定の割合 (75%) がそうであるかどうかを確認します。それでも大きすぎる場合は、高さを小さくします
  • 収まる高さを決定したら、2 つの画像が全体の幅に収まるかどうかを確認します。もしそうなら、これは私がダブルページモードを持っていることを意味し、そうでなければシングルページモードです

これはバニラのJavaScript実装です

var selCase = 0; //an "ok" var
//pageH = array with page heights
//pageW = array with page widths
//currentWH = window height
//currentWW = windowWidth

 for(i = pageH.length - 1; i >= 0; i--) {
    if(!selCase) {
        if(pageH[i] <= currentWH) { //if the page height is lower than the total height
            if(pageW[i] * 2 <= currentWW) { //if we have room for double pages
                currentMode = 'L';
                currentPW = pageW[i];
                currentPH = pageH[i];
                selCase = 11;
            }else {
                if(currentWW > currentWH) { //if the width is bigger, double-page mode is prefered
                    if((pageW[i] * 1.5) >= (currentWW - 20)) { //there wouldn't be much space left for double-pages 
                        currentMode = 'P';
                        currentPW = pageW[i];
                        currentPH = pageH[i];
                        selCase = 12;
                    } // else: the height fits, but not the width so a smaller height is required
                }else { //standard portrait mode
                    if(pageW[i] <= (currentWW - 20)) {
                        currentMode = 'P';
                        currentPW = pageW[i];
                        currentPH = pageH[i];
                        selCase = 13;
                    }
                }
            }   
        }else { //we check to see if maybe we can shrink the page a little to fit in the total height
            var sPerc; //scale percentage
            sPerc = currentWH * 100 / pageH[i];
            if(sPerc >= perc) {
                var newW = pageW[i] * sPerc / 100; 
                if(newW * 2 <= (currentWW - 20)) { //if we have room for two also-scaled pages
                    currentMode = 'L';
                    currentPW = Math.floor(newW);
                    currentPH = currentWH;
                    selCase = 21; 
                }else { 
                    if(currentWW > currentWH) { //same as before
                        if((newW * 1.5) >= (currentWW - 20)) { //only one scaled page fits
                            currentMode = 'P';
                            currentPW = Math.floor(newW);
                            currentPH = currentWH;
                            selCase = 22;
                        }
                    }else {
                        if(newW < (currentWW - 20)) {
                            currentMode = 'P';
                            currentPW = Math.floor(newW);
                            currentPH = currentWH;
                            selCase = 23;
                        }
                    }
                }
            }
        }
    }       
}
于 2012-06-25T14:54:08.110 に答える