Question

基本

我正在研究一种小工具，它可以帮助打印相关产品的几何计算。

概述

我有两个输入（w和h），用户应输入框的宽度和高度。这个框应该是用户测量的一种表示，作为一个基于CSS的小盒子。

问题在于我不能仅仅进行测量并将它们用作像素，甚至是pixels * 10或其他任何东西，作为显示框的宽度/高度，因为我的空间有限。

该框的最大测量值为69 x 69。

我想要实现的是将较长输入的测量应用于其相应的轴，然后按照与此成比例的方式计算另一个轴。

我的方法

我不是的数学人。但是我尽了最大努力，并将一个完成上述功能的功能放在一起：

updateRectBox: function(w, h){

    // define maximum width and height for box
    var max_x=69;
    var max_y=69;
    var factor,x,y;

    factor=w/h;

    if(w==h){

        // if we have a 1:1 ratio, we want the box to fill `69px` on both axis
        x=max_x;
        y=max_y;

    } else {

        if(w>h){

            // if width is larger than height, we calculate the box height using the factor
            x=max_x;
            y=(factor>1 ? max_y/factor : max_y*factor);

        } else {

            // if height is larger than width, we calculate the box width using the factor
            x=(factor>1 ? max_x/factor : max_x*factor);
            y=max_y;

        }

    }

    // using this to set the box element's properties
    jQuery('#rect').css({
        'width': (x)+'px',
        'height': (y)+'px'
    });

}

此功能效果很好，但是：

问题

我知道这可以用更少的代码完美地完成。但由于我缺乏数学技能，我无法想到比我写的更紧凑的东西。

I've created a working fiddle让您更轻松地测试优化。

Answer 1

您的功能完全符合其需要。然而，有些方法可以说更优雅。

基本的想法是你有一个尺寸为w×h）的盒子，你想要一个盒子，它是这个盒子的缩放版本，以适合（69×69）盒子

要放入（69×69）框，您的（w×h）框必须小于69宽，小于69高。假设您按数量s进行缩放。然后，您的新框具有尺寸（s * w×s * h）。使用上述约束，我们知道：

s * w <= 69和s * h <= 69。重写这些，解决s，你得到：

s <= 69 / w和s <= 69 / h。两者都必须成立，因此您可以将其重写为：

s <= min( 69 / w, 69 / h)。此外，您希望s尽可能大（因此框完全填充该区域），因此s = min( 69 / w, 69 / h)。

您的代码通过if语句完成相同的操作。你可以通过以下方式重写它：

updateRectBox: function(width, height) {

    // define maximum width and height for box
    var max_width = 69;
    var max_height = 69;
    var scale = Math.min( max_width / width, max_height / height );

    var x = scale * width;
    var y = scale * height;

    // using this to set the box element's properties
    jQuery('#rect').css({
        'width': x+'px',
        'height': y+'px'
    });
}

更改变量名称有助于使其更具可读性（w和h可能意味着宽度和高度，但明确这一点是有帮助的。）

所有这一切都表明，这与原版之间不太可能存在明显的性能差异。代码非常快，因为它做得很少。也就是说，我制作了一个jsperf，表明使用Math.min在我的浏览器上快了1.7倍。

计算轴长与固定相关长度的比例

1 个答案: