基于文件加载百分比的 RGB 渐变答案

【问题标题】：RGB gradient based on percentage of file loaded基于文件加载百分比的 RGB 渐变
【发布时间】：2011-01-07 13:12:36
【问题描述】：

我正在处理我的第一个 Flash 项目，对于我的预加载器，我想根据加载的百分比做一个非常简单的渐变。预加载器显示“77% 已加载...”，其中数字 77 是一个名为 percentLoaded 的动态文本实例。我希望 percentLoaded 的 textColor 在从 #000000 到 #FFFFFF 的渐变上以灰度变化。

因此，我不能简单地这样做：

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

这只是将 textColor 转换为 FFFFFF 的倍数，但会输出一种颜色，因为它不是三个独立的组件。目前，这就是我所拥有的：

percentLoaded.text=currentValue.toString();
percentLoaded.textColor=rgb2hex((currentValue/100)*255, (currentValue/100)*255, (currentValue/100)*255);

其中“rgb2hex”是在类中定义的函数：

public function rgb2hex(r:Number, g:Number, b:Number) {
    return '0x'+(r << 16 | g << 8 | b).toString(16).toUpperCase();
}

看起来这实际上并没有改变字体的颜色。我已经导入了 flash.text.TextField 和 flash.display.MovieClip，但不确定我是否遗漏了其他内容。使用字符串连接会更容易吗？或者 currentValue/100 可能发生了什么并将其作为数字传递？

如果好奇，我找到了 rgb2hex here 的代码。

谢谢！

【问题讨论】：

标签： flash actionscript-3 hex rgb gradient

【解决方案1】：

如果这对你有用

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

那你就可以了

var percent = currentValue / 100;
percentLoaded.textColor = Math.floor(percent*0xFF) * 0x010101;

【讨论】：

这不起作用。尝试将 currentValue 设置为 1。你得到 0x28f5c。您需要在乘以 0x010101 之前转换为 int。
@wallacoloo：你是对的，固定的。

【解决方案2】：

你很幸运，我碰巧最近在一个项目中做了这个，只是颜色不同。这是一个函数，它将基于 0-1 的范围返回其他两种颜色之间的颜色值。我认为代码很容易解释，但如果您遇到任何问题，请告诉我。

private function getBetweenColourByPercent(value:Number = 0.5 /* 0-1 */, highColor:uint = 0xFFFFFF, lowColor:uint = 0x000000):uint {
    var r:uint = highColor >> 16;
    var g:uint = highColor >> 8 & 0xFF;
    var b:uint = highColor & 0xFF;

    r += ((lowColor >> 16) - r) * value;
    g += ((lowColor >> 8 & 0xFF) - g) * value;
    b += ((lowColor & 0xFF) - b) * value;

    return (r << 16 | g << 8 | b);
}

泰勒。

【讨论】：

感谢 Tyler，这实际上可能在一段时间内有用；例如，我可能会选择让预加载器文本在红色和白色之间切换。

【解决方案3】：

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

这很接近了。

要获得灰度，您确实需要拥有每个组件，但这仍然可以通过您的类似方法完成：

percentLoaded.textColor = uint((currentValue / 100) * 0xFF) * 0x010101;

【讨论】：

这不起作用。尝试将 currentValue 设置为 1。你得到 0x28f5c。在乘以 0x010101 之前，您需要将 ((currentValue / 100) * 0xFF) 转换为 int。
是的，我忘记了，已修复；谢谢你注意到这一点！演员实际上需要继续除法结果，因为这就是它发生的原因 - Flash 的 Number 类是 IEE 浮点数。转换为 uint 应该可以解决它。
否，当前值在 0-100 之间。如果你在除法之后施放，但在乘以 0xFF 之前，你会得到 0 或 1。他想要全灰度，而不仅仅是黑/白。并且问题不是由浮点不准确引起的。这是因为您的格式 (*0x010101) 本质上是三个字段 (01, 01, 01)。不要期望一个领域的某些东西会受到另一个领域的影响。但是使用大于 255 的值，允许低字段影响高字段，并且介于整数之间的值允许高字段影响较低字段。试试 1.5*0x010101 看看我的意思。
我的错，今天编码太多了：P
感谢大家的回复。起初它不起作用，我不想发表评论，因为我不确定发生了什么。我现在明白了，这是一个特别优雅的解决方案！编辑：稍后我将在我的代码中实现这一点，并在确定它有效后将其标记为答案。

【解决方案4】：

percentLoaded.textColor = int((currentValue / 100) * 0xFF) * 0x010101;

在乘以 0x010101 之前转换为 int 是必须的。 8 位颜色值只能是 0-255 之间的整数。如果不在这些范围内，乘以 0x010101 可能会导致数字从一个颜色分量（RR、GG、BB）溢出到另一个颜色分量（B->G、G->R）。但如果不是整数 (R->G, G->B)，它们也可以采用其他方式。我假设 currentValue 是 0-100 之间的任何数字。

考虑一下，每个数字都有自己的颜色分量（十进制）：

5.0 * 111 = 555 = 5R, 5G, 5B
5.5 * 111 = 610.5 = 6R, 1G, 0.5B

【讨论】：