Question

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

ChatUI.prototype.rainbowParse = function(txt) {
    txt = txt;
    if ((txt.indexOf("[rainbow]") > -1) && (txt.indexOf("[/rainbow]") > -1)) {
        txt = txt.replace("&apos;", "@").replace("&amp;apos;", "@");
        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，但由于彩虹文本长度变化太大，我不知道如何做到这一点。我用Google搜索了许多彩虹文本生成器，试图查看他们的代码。太糟糕了。请给我一些想法或帮助。：（

Answer 1

您需要将颜色数组中的元素数除以彩虹字符串中的字符数，并将每种颜色应用于字符串中的该字符数。这样，无论字符串的长度如何，每种颜色只会以相同的比例应用一次：

// 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;

ActionScript褪色的想法/帮助？

1 个答案: