0

给定已知数量的具有相同宽高比和尺寸的图像，是否有一种算法可以确定在分辨率可能不同的屏幕上呈现它们的最佳方式？又名安排他们单页或双页。

例如，确定您是否可以在屏幕上显示两个图像，或者在给定宽度/高度的情况下，“检测”只有一个看起来更好。看看是否最好让它们适合宽度，在它们上方和/或下方有一些空白空间，或者适合高度，在左边/右边有空白空间。

我已经做了一些尝试来确定我自己的这种算法，但我并不完全满意，我希望可能有更好的解决方案或一些建议。

不幸的是，正如我发现的那样，它不像“宽度 > 高度 => 两张图片，否则一张图片”那么简单。

总结一下，现在我首先根据图像高度进行所有计算，然后检查屏幕宽度是否大于 1.5 x 我的图像宽度。更大意味着我会降低高度以适应两张图像，更小意味着我只呈现一张图像。尽管如此，对于图像尺寸/屏幕分辨率的某些组合，我仍然得到一些不希望的结果。

如果您偶然发现了同样的问题并且有一些代码或提示可用，我们将不胜感激。

PS 如您所知，这是关于展示杂志。

[编辑] 我忘了提到我正在使用 javascript（香草，无插件/框架）进行编码

4

2 回答 2

1

您可以使用 kd-tree 算法。kd-tree 层次结构将屏幕细分为矩形，并使用类似于二叉树的数据结构来存储信息。它在许多应用程序中使用，例如显示磁盘空间。Jquery 插件 Masonry 可以做同样的事情。我还会看一下 Jquery 插件树形图。

于 2012-06-18T08:01:32.943 回答
0

要回答我自己的问题，似乎没有这样的算法，或者至少我找不到。建议的 kd-tree 是一个 waaaaaaaaaaaaaay 过于复杂的过度杀伤解决方案，不实用。

最后，我选择了我自己想出的那个：

  • 首先我检查窗口高度，看看最大的图像是否合适。如果没有，我会检查某个百分比（75%）是否有。如果它仍然很大，我会缩小高度
  • 一旦确定适合的高度，我会检查两个图像是否适合总宽度。如果他们这样做，这意味着我有一个双页模式，否则是单页模式

这是一个香草 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 回答