计算比率差异？

时间：2013-02-20 01:55:53

标签： javascript jquery html resize

在我们的网站上，我们有视频缩略图，点击缩略图可以在模态对话框中打开视频。

视频本身是16：9，但播放器底部有额外的细节，所以不是。

在对话框中，我们有两个按钮，增长和缩小。

按钮以（originalsize（* | /）growBy）的步长增长/缩小播放器。因此，对于50％原始步骤，growBy将为1.5。

无论如何，这一切都很有效，并在代码块＃1中显示，

我遇到的问题是我需要设置一个限制，以便，如果要求对话框超出窗口的宽度或高度，它将简单地增长到（以比例）最大尺寸它可以

E.g。如果我们被要求超出窗口的最大宽度，对话框宽度（包括填充）将等于窗口宽度，但高度不会（除非对话比率恰好与窗口完全匹配，但是那不太可能！）

相反，如果我们被要求超出窗口的最大高度，对话框高度（包括填充）将等于窗口高度，但高度将不会（除非对话比例恰好匹配窗户）。

这是我陷入困境的地方，我的尝试是在代码块＃2中，现在我只是在检查太高的高度，但是我的工作正常，以确保高度，问题是，我不知道如何计算调整高度步长时的宽度。有趣的代码在Code Block pre＃2中。

如果我的想法是正确的，我需要解决，videoStep.height tempStep.height的百分比是多少，然后将tempStep.width设置为videoStep.width+ (videoStep.width*percentage)？

但我尝试过：

var percentage = tempStep.height/videoStep.height;
tempStep.width = videoStep.width+(videoStep.width*percentage);

取代

tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

但视频比率丢失时，宽度似乎增大太多（玩家比例变为586：281）

Code Block pre＃2 

var windowSize = {
    height: $(window).height(),
    width: $(window).width()
};

useTempStep = false;
var fullDialogSize = {
    height: newDialogSize.height+videoDialogSize.padding.height,
    width: newDialogSize.width+videoDialogSize.padding.width
};
if(fullDialogSize.height > windowSize.height){

    $growButton.addClass('disabled');

    tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
    tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

    useTempStep = true;

    newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
    newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width //This line is not being calculated right!
    };

}

代码块＃1 

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width()
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var clickHandler = function () {
    var button = $(this);

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, videoStep, action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);

代码块＃2 

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height(),
    width: $videoPlayer.width()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width(),
    padding: {
        height: $videoDialog.outerHeight() - $videoDialog.height(),
        width: $videoDialog.outerWidth() - $videoDialog.width()
    }
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var tempStep = {
    height: 0,
    width: 0
};

var useTempStep = false;

var clickHandler = function () {
    var button = $(this);

    if(button.hasClass('disabled')){
        return;
    }

    $growButton.removeClass('disabled');

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, (useTempStep ? tempStep : videoStep), action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    useTempStep = false;
    var fullDialogSize = {
        height: newDialogSize.height+videoDialogSize.padding.height,
        width: newDialogSize.width+videoDialogSize.padding.width
    };
    if(fullDialogSize.height > windowSize.height){

        $growButton.addClass('disabled');

        tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
        tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

        useTempStep = true;

        newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
        newDialogSize = {
            height: newPlayerSize.height + dialogDifference.height,
            width: newPlayerSize.width + dialogDifference.width
        };

    }


    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);

1 个答案:

答案 0 :(得分：1)

如果高度需要缩小 1 ，那么宽度需要与比率相匹配。 （因为16/9指的是宽度与高度之比）

Psuedo代码：

new_height = max_height;
new_width  = height * ratio;
// where ratio = 16/9

以下是我建议改变的内容：

    var ratio = currentPlayerSize.width / currentPlayerSize.height,
        new_height = newPlayerSize.height + dialogDifference.height;

    newDialogSize = {
        height: new_height,
        width:  new_height * ratio
    };

注意：

1 如果身高> 1，则需要更改身高。 <宽度和高度> MAX_HEIGHT

或许您的问题可能只在sizeCalc()：

    function sizeCalc(currentPlayerSize, step, action){
        var newPlayerSize,
            ratio = currentPlayerSize.width / currentPlayerSize.height;
            new_height;

        if (action == 'grow') {
            new_height = currentPlayerSize.height + step.height;
        } else {
            new_height = currentPlayerSize.height - step.height;
        }

        newPlayerSize =  {
            height: new_height,
            width:  new_height * ratio
        };

        return newPlayerSize;
    }
相关问题
最新问题