0

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

对象大小的计算如下:

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

如果已经涵盖了类似的内容,我深表歉意,但我们将不胜感激任何帮助。

4

3 回答 3

1

听起来您想对数据进行规范化,以便最大值为 1,最小值为某个分数。这将有助于定义您希望该分数是什么(例如,始终为 0.25、1 / # 个值)。如何规范化数据取决于该选择。

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

于 2012-07-19T20:53:54.740 回答
0

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

请注意,该$.map函数是一个 jQuery 函数,可以非常方便地转换数组项。如果您不使用 jQuery,则可以将其替换为 for 循环。

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

因此,在您的示例中,您可以在计算大小数组后获取不透明度数组,如下所示:

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();
于 2012-07-19T21:30:44.287 回答
0
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)));​

您可以在这里看到它的实际应用。它使用旧版浏览器不支持的forEach构造,但如果需要,您可以将其切换到普通的 for 循环。getSizes通过移动方法中的所有生成逻辑和方法中的所有不透明度计算,我还稍微重构了您的代码getOpacities

在旁注中,您应该console.log用于调试(这会在 FireFox 上的 FireBug 控制台、Chrome WebInspector 窗口或 IE 开发控制台中记录)。这比document.write(即使我们不在这里讨论,这也适用alert于这种情况)要好得多。

编辑

您没有提到是否希望baseSizeandvariance是可变的。在这种情况下,您应该添加一个方法来根据您的逻辑生成不透明度值图。 我已在示例中添加了您要求的逻辑,并更新了代码。

于 2012-07-19T21:00:38.270 回答