javascript - 使用ActionScript褪色有什么想法/帮助？

这是我添加到基于Flash的聊天中的一项功能，用于使[rainbow]和[/ rainbow]标签中的某些文本彩虹化。

ChatUI.prototype.rainbowParse = function(txt) {
    txt = txt;
    if ((txt.indexOf("[rainbow]") > -1) && (txt.indexOf("[/rainbow]") > -1)) {
        txt = txt.replace("'", "@").replace("'", "@");
        var firstChar = txt.indexOf("[rainbow]") + 9;
        var lastChar = txt.indexOf("[/rainbow]");

        if (((lastChar - firstChar) > 100) || ((txt.split("[rainbow]").length - 1) > 3)) {
            break;
        }

        while (lastChar <= txt.lastIndexOf("[/rainbow]")) {
            var RAINBOWTEXT = '';
            var i = firstChar;
            while (i < lastChar) {
                RAINBOWTEXT += txt.charAt(i);
                i++
            }
            var text = RAINBOWTEXT;
            var texty = '';

            colors = new Array('ff00ff','ff00cc','ff0099','ff0066','ff0033','ff0000','ff3300','ff6600','ff9900','ffcc00','ffff00','ccff00','99ff00','66ff00','33ff00','00ff00','00ff33','00ff66','00ff99','00ffcc','00ffff','00ccff','0099ff','0066ff','0033ff','0000ff','3300ff','6600ff','9900ff','cc00ff');

            i = 0;

            while (i <= text.length) {
                var t = text.charAt(i);

                if (t != undefined) {
                    texty += "<font color=\"#" + colors[i % colors.length] + "\">" + t + "</font>";
                    i++;
                }
            }

            texty = texty.replace("> <", ">&nbsp;<");
            var REPLACEME = "[rainbow]" + RAINBOWTEXT + "[/rainbow]";
            txt = txt.replace(REPLACEME, texty);

            if (lastChar == txt.lastIndexOf("[/rainbow]")) {
                break;
            }
            nextChar = lastChar + 10;
            firstChar = txt.indexOf("[rainbow]", lastChar) + 9;
            lastChar = txt.indexOf("[/rainbow]", lastChar);
        }
        txt = txt.replace("@", "&apos;");
    }
    return txt;
}

但是，我不喜欢这些彩虹的样子。文字的颜色会重复。

要查看我的意思的示例，请转到http://www.tektek.org/color/并单击“彩虹”，然后将重复设置为1进行预览。然后，将重复设置为3或更高。

我希望代码的重复数为1，但是由于Rainbow文本的长度差异很大，所以我不知道该怎么做。我已经用Google搜索了许多Rainbow文本生成器，试图查看它们的代码。糟透了请给我一些想法或帮助。 :(

最佳答案

您需要将颜色数组中的元素数除以彩虹字符串中的字符数，然后将每种颜色应用于字符串中的该字符数。这样，每种颜色将仅以相同的比例应用一次，而不管您的字符串的长度如何：

// Calculate the number of characters to apply each character to
var inc = Math.round(colors.length / txt.length);
// Empty string to store the modified rainbox text in
var str = "";
// Loop through each color and apply it to the correct number of characters
for (var i = 0; i < colors.length; i ++) {
    str += "<font color='#'" + colors[i] + "'>"
        + txt.substr(i * inc, inc)
        + "</font>";
}

编辑：

好的，我重新阅读了问题，并再次查看了链接到的示例，我认为更好的解决方案是使用绘图API在Sprite中创建线性渐变，并使用包含必须具有对其应用了彩虹效果：

import flash.text.TextField;
import flash.text.TextFormat;
import flash.display.Sprite;
import flash.display.GradientType;
import flash.text.TextFieldAutoSize;
import flash.geom.Matrix;
import flash.text.Font;

// You need to embed the font to use it as a mask
Font.registerFont(Arial);

var txt:String = "My Rainbow text";

// Removed some of your colors to save time formatting
var colors:Array = [0xff00ff, 0xff00cc, 0xff0099, 0xff0066, 0xff0033,
                    0xff0000, 0xff3300, 0xff6600, 0xff9900, 0xffcc00,
                    0xffff00, 0xccff00, 0x99ff00, 0x66ff00, 0x33ff00];

var alphas:Array = [];
var ratios:Array = [];

// Populate alphas and ratios arrays of the same length as colors array
for (var i:int = 0; i < colors.length; i ++)
{
    alphas.push(1);
    ratios.push(i * Math.round(255 / colors.length)); // Equal ratio for each color
}

// Create a text field
var field:TextField = new TextField();
field.text = txt;
field.autoSize = TextFieldAutoSize.LEFT;
field.setTextFormat(new TextFormat("Arial", 30, 0x0000000));
field.embedFonts = true;

// Create a gradient of the same dimensions as the text field
var matrix:Matrix = new Matrix();
matrix.createGradientBox(field.width, field.height);

var gradient:Sprite = new Sprite();
gradient.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
gradient.graphics.drawRect(0, 0, field.width, field.height);
gradient.graphics.endFill();

this.addChild(field);
this.addChild(gradient);

// Mask the gradient with the text field
gradient.mask = field;