javascript - 如何从值0到1获得从红色到白色的平滑渐变值？

Question

使用 0 到 1 的比例时，如何生成红色到白色的值？

我有一个从 0 到 1 的值列表，如果值为 0，我想显示全红色，如果值为 1，我想显示全白。

我确定有 API 可以找到这个值，但我在上面画了一个空白。

这是我到目前为止所拥有的：

var color:Number = value==0 ? 0xFF0000 : 0xFFFFFF;

这显然不支持梯度值。

JavaScript 代码也有助于解决这个问题。

标签： javascriptactionscript-3

Answer 1

我有一个从 0 到 1 的值列表...

假设这个列表是一个名为 的数组myList。它有 100 个值，范围从0到1（或 0.99）。

要将 100 个条目的长度映射到预期的 255 个（绿色和蓝色，以获得白色），只需划分：

(255/myList.length); //gives 2.55
2.55 * ( myList[i] * 100 ) //gives 0-255 range version (eg: myList[i]==0.5... now is 127)

首先声明一些变量...

public var temp_R :uint = 0;
public var temp_G :uint = 0;
public var temp_B :uint = 0;

public var RGB :uint = 0; //output colour (24-bit)

然后只需使用 For 循环进行更新...

for (var j:uint = 0; j < myList.length; j++)
{
    //maximum 255 is divided by total values...
    //multiply by 100 to ramp up the List value... eg: If "myList[j]" == 0.5 then we want as == 50
    temp_Int = (255 / myList.length) * ( 100 * myList[j] ); 

    if( temp_Int > 255) { temp_Int = 255;} //clamp to 255 range

    temp_R = 255; //kept as constant value of 255
    temp_G = temp_B = temp_Int; //for whitening, these other two share same value

    RGB = (temp_R << 16) | (temp_G << 8) | temp_B; //generate output colour

    temp_BMD.setPixel(j, k, RGB );
}

更紧凑的 For 循环中的相同逻辑

for (var j:uint = 0; j < myList.length; j++)
{
    temp_Int = (255 / myList.length) * ( 100 * myList[j] );
    temp_R = 255; temp_G = temp_B = temp_Int; //set R to 255, set G and B to "temp_Int"
    RGB = (temp_R << 16) | (temp_G << 8) | temp_B; //generate output colour
    //temp_BMD.setPixel(j, 0, RGB ); //visual test on a Bitmap-Data object
}

注意：您还可以通过使用(255 / (myList.length / X) );where Xis a small value（如 2、4 或 8）来“缩小”峰值点。这可能对以后的项目有所帮助。