Question

我试图根据对象的大小反向计算不透明度。基本上它越大，它就越透明。

对象大小的计算如下：

var baseSize = 60;
var sVariance = 4;
var outputA = [];

function blah() {
    for (i = 0; i < 5; i++) {
        this.newSize = Math.ceil(baseSize - (Math.random() * sVariance));
        outputA[i] = this.newSize;
    }
    document.writeln("Size = "+outputA);
}

blah();

...我希望能够计算出尺寸范围之间的不透明度。例如，如果生成的5个尺寸是：60,59,58,57,59，我希望相应的不透明度值如下：.25，.5，.75,1，.5

如果已经涵盖了类似的内容，我深表歉意，但我们将非常感谢任何帮助。

Answer 1

听起来你想要对数据进行标准化，使最大值为1，最小值为一小部分。这将有助于定义您想要的分数（例如，总是0.25,1 /＃的值）。如何规范化数据取决于该选择。

考虑做一些事情，比如按列表中的最低值减去所有内容，或者将所有内容除以最大值，或两者兼而有之。

Answer 2

function getSizes(baseSize, sVariance) {
    var sizes = [];
    for (i = 0; i < 5; i++) {
        sizes[i] = Math.ceil(baseSize - (Math.random() * sVariance));
    }
    return sizes;
}

function calculateOpacityValues(baseSize, sVariance) {
    var min = 0.25, max = 1,
        step = 0.75 / sVariance, i,
        opacityValues = {};
    for (i = 0; i <= sVariance; i++) {
        opacityValues[baseSize - i] = min + step * i;
    }
    return opacityValues;
}

function getOpacities(sizes, opacityValues) {
    // create a map of opacities
    // and your expected values
    var opacities = [];
    sizes.forEach(function(value, index) {
        opacities[index] = opacityValues[value];
    });
    return opacities;
}

var baseSize = 60, sVariance = 3, 
    sizes = getSizes(baseSize, sVariance);
console.log(sizes);
// use the map to get the opacity
console.log(getOpacities(sizes, calculateOpacityValues(baseSize, sVariance)));

您可以在行动here中看到它。它使用旧版浏览器不支持的forEach构造，但如果需要，您将能够将其切换到正常的for循环。我还通过移动getSizes方法中的所有生成逻辑和getOpacities方法中的所有不透明度计算来重构您的代码。

在旁注中，您应该使用console.log进行调试（这会在FireFox的FireBug控制台，Chrome WebInspector窗口或IE开发控制台中登录）。对于这种情况，这比document.write（this is true好很多，即使我们在这里没有谈到alert。

修改

~~您没有提及是否希望baseSize和variance变量。在这种情况下，您应该添加一个方法来根据您的逻辑生成不透明度值映射。~~ 我已经在示例中添加了您请求的逻辑，并且我已经更新了代码。

Answer 3

这是我将使用的功能。您可以看到转换函数中的值的逻辑。这里还有一个example。

请注意，$.map函数是一个jQuery函数，它非常便于转换数组项。如果您不使用jQuery，可以使用for循环替换它。

function getOpacityArray (sizeArray, max, range) {
    return $.map(sizeArray, function (n, i) {
        return (max - n) / range;
    });
}

因此，在您的示例中，您可以在计算size数组后得到不透明度数组，如下所示：

var baseSize  = 60, 
    sVariance = 4,
    outputA   = [], 
    opacityA  = [];

function blah() {
   for (i = 0; i < 5; i++) {
      this.newSize = Math.ceil(baseSize - (Math.random() * sVariance));
      outputA[i] = this.newSize;
   }
   document.writeln("Size = "+outputA);
   opacityA = getOpacityArray(outputA, baseSize, sVariance);
}

blah();

计算尺寸上的不透明度值

3 个答案:

修改