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ます）。

編集

baseSizeとvarianceを可変にするかどうかについては言及していません。その場合は、ロジックに基づいて不透明度値マップを生成するメソッドを追加する必要があります。 サンプルでリクエストしたロジックを追加し、コードを更新しました。

于 2012-07-19T21:00:38.270 に答える